Skip to content
Brian Vaughn edited this page May 2, 2016 · 38 revisions

Circle CI badge

This describes my plans for react-virtualized version 7 (currently in progress as PR #206). I welcome input from the community so please feel free to comment on the PR if you think certain features should (or should not) be included in the next upcoming major release.

I plan to provide jscodeshift mods to make the transition from 6.x to 7.x simpler. Doing this enables me to make a changes I've wanted to make for a while but didn't for fear of causing too much churn for library users.

Backwards incompatible changes

Clean up property names

This project started as a drop-in replacement for fixed-data-table so I mimicked their property names. I find a few of them awkward though so I plan to clean them up in the next release. Here's a list of the ones I intend to change:

Components Old Name New Name
ArrowKeyStepper , Grid columnsCount columnCount
Grid overscanColumnsCount overscanColumnCount
FlexTable, Grid, VirtualScroll overscanRowsCount overscanRowCount
Collection, Grid renderCell cellRenderer
Grid renderCellRanges cellRangeRenderer
ArrowKeyStepper, FlexTable, Grid, InfiniteLoader, VirtualScroll rowsCount rowCount

Use named function arguments

Named function arguments are often simpler and more future-proof than the more traditional approach. Over time I've trended more towards using these (eg. onSectionRendered, onScroll, etc) but a few of the originals (those based on fixed-data-table) don't follow this pattern. This makes it harder to update them (eg. to add a new parameter) and it makes them more confusing to use (eg. which order do the params appear in? What if I only care about the first and last param?).

Here's a list of the ones I intend to change:

Function Old Name New Name
Collection.onSectionRendered (indices: Array<number>): void ({ indices: Array<number> }): void
Collection.cellRenderer (index: number): node ({ index: number }): node
Collection.cellSizeAndPositionGetter (index: number): { height: number, width: number, x: number, y: number } ({ index: number }): { height: number, width: number, x: number, y: number }
FlexColumn.cellDataGetter (dataKey: string, rowData: any, columnData: any): any ({ columnData: any, dataKey: string, rowData: any }): any
FlexColumn.cellRenderer (cellData: any, dataKey: string, rowData: any, rowIndex: number, columnData: any): element ({ cellData: any, columnData: any, dataKey: string, rowData: any, rowIndex: number }): node
FlexTable.onHeaderClick (dataKey: string, columnData: any): void ({ dataKey: string, columnData: any }): void
FlexTable.onRowClick (rowIndex: number): void ({ index: number }): void
FlexTable.rowClassName (rowIndex: number): string ({ index: number }): string
FlexTable.rowGetter (index: int): any ({ index: int }): any
FlexTable.rowHeight (index: number): number ({ index: number }): number
FlexTable.sort (sortBy: string, sortDirection: SortDirection): void ({ sortBy: string, sortDirection: SortDirection }): void
Grid.columnWidth (index: number): number ({ index: number }): number
Grid.rowHeight (index: number): number ({ index: number }): number
InfiniteLoader.isRowLoaded (index: number): boolean ({ index: number }): boolean
VirtualScroll.rowHeight (index: number): number ({ index: number }): number
VirtualScroll.rowRenderer (index: number): node ({ index: number }): node

Note that I'm on the fence about changing a few of the methods that accept only a single index parameter (eg. cellRenderer, isRowLoaded). I'm leaning towards changing them anyway though because it would be more consistent and it would allow me to potentially pass other useful information to those methods in the future without requiring a major release.

More flexible styles (theming)

There's some ongoing discussion on issues like #197 and #204 regarding the limitations of react-virtualized's current approach to supporting custom styles. This is still a work-in-progress but I'll update this section with a proposal once a direction has been settled on.

Backwards compatible changes

Defer cell measurement until necessary

In version <= 6 of react-virtualized, the Grid component pre-measures and caches sizes for all columns and rows. We can avoid that by estimating cell sizes for portions of the Grid that have not yet been rendered. This change should enable more performant implementation of just-in-time calculated sizes (see below).

Support just-in-time calculated cell sizes

Relates to issue #149 and ongoing discussion in the Gitter channel. More information coming soon.

Clone this wiki locally