0

I am trying to combine a custom CSS table with the react virtualized window scroller. I currently can get the table to display, but am having trouble figuring out how to combine styling to that table, or add any logic to the table rows.

 <WindowScroller>
    {({ height, isScrolling, onChildScroll, scrollTop }) => (

      <Table
        autoHeight
        width={1000}
        height={700}
        headerHeight={20}
        rowHeight={30}
        isScrolling={isScrolling}
        onScroll={onChildScroll}
        rowCount={table.length}
        scrollTop={scrollTop}
        rowGetter={({ index }) => table[index]}
      >
        <Column
          label='Item1'
          dataKey='item1'
          width={150}
        />
        <Column
          width={200}
          label='item2'
          dataKey='item2'
        />
        <Column
          width={200}
          label='item3'
          dataKey='item3'
        />
        <Column
          width={150}
          label='item4'
          dataKey='item4'
        />
        <Column
          width={200}
          label='item5'
          dataKey='item5'
        />
      </Table>

    )}
  </WindowScroller>
Totals
  • 311
  • 2
  • 5
  • 14

1 Answers1

1

Definitely review the docs. You'll likely be passing both some type of style props and event props to the components - so you need to understand how those components define and accept those props. This is only possible by reviewing the documentation of the library.

EDIT:

Here are the propTypes for the <Table /> component:

https://github.com/bvaughn/react-virtualized/blob/master/docs/Table.md

You'll see that it accepts custom event handlers like onRowClick but also style props like rowStyle

Christopher Messer
  • 2,040
  • 9
  • 13
  • Is there more documentation then this https://github.com/bvaughn/react-virtualized/blob/master/docs/WindowScroller.md for window scroller? – Totals Aug 10 '17 at 14:35
  • yes - see my edit - you don't want to style `` itself, you want to style the components inside like the `
    ` right?     – Christopher Messer Aug 10 '17 at 14:37
  • Christopher is correct. `WindowScroller` doesn't have any presentation layer. It just watches for "scroll" events and passes down `scrollTop` to whatever RV component it wraps. (That's why there aren't many props.) – bvaughn Aug 10 '17 at 16:42
  • Ok I got it working after reading the documentation. Thank you. – Totals Aug 11 '17 at 20:50