moving tables to react-window

Summary:
Tables were using a custom virtualization, which wasn't as performant as other solutions out there. In this diff, the table component is reworked for performance.
- removes `Table` component, because it was never used standalone, `ManagedTable` is what all plugins used
- uses `react-window` for `ManagedTable`
- reworks table highlighting and arrow-navigation to work with the new virtualization
- moves actual filtering out of `ManagedTable` into `Searchable` component for a better separation of concerns.

Reviewed By: jknoxville

Differential Revision: D9447721

fbshipit-source-id: 15eb2eb55eed9f49a0cb1ccfb2d748b3672fa898
This commit is contained in:
Daniel Büchele
2018-08-23 04:43:51 -07:00
committed by Facebook Github Bot
parent 33f34650df
commit 1891e2c869
13 changed files with 611 additions and 1253 deletions

View File

@@ -71,9 +71,6 @@ class SearchableManagedTable extends PureComponent<Props, State> {
}
componentWillReceiveProps(nextProps: Props) {
// ManagedTable is a PureComponent and does not update when this.filterRows
// would return a different value. This is why we update the funtion reference
// once the results of the function changed.
if (
nextProps.searchTerm !== this.props.searchTerm ||
!deepEqual(this.props.filters, nextProps.filters)
@@ -90,13 +87,16 @@ class SearchableManagedTable extends PureComponent<Props, State> {
searchTerm: _searchTerm,
filters: _filters,
innerRef,
rows,
...props
} = this.props;
return (
// $FlowFixMe
<ManagedTable
{...props}
filter={this.state.filterRows}
rows={rows.filter(this.state.filterRows)}
onAddFilter={addFilter}
ref={innerRef}
/>