React Virtualized combining custom table and Window Scroller

Question

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>

Christopher Messer · Accepted Answer · 2017-08-10 14:36:42Z

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

edited Aug 10, 2017 at 14:36

answered Aug 10, 2017 at 14:33

Christopher Messer

2,09011 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Totals Over a year ago

Is there more documentation then this github.com/bvaughn/react-virtualized/blob/master/docs/… for window scroller?

Christopher Messer Over a year ago

yes - see my edit - you don't want to style <WindowScroller /> itself, you want to style the components inside like the <Table /> right?

bvaughn Over a year ago

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.)

Totals Over a year ago

Ok I got it working after reading the documentation. Thank you.

Collectives™ on Stack Overflow

React Virtualized combining custom table and Window Scroller

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related