Morioh
Login
Henry Short

Henry Short

4 years ago

A Cool React Virtual Table

af-react-table. A Cool React virtual table.

Install

npm install --save af-react-table

Features

  • All heights are calculated automatically, so there is no need to provide them.
  • Optimized non-recursize segment tree is used to store row dimensions.
  • mobx-ready Row and Cell components, which can be easily wrapped by observer
  • available height and width are calculated and observed automatically via use-resize-observer hook
  • scrollToRow(rowIndex) method is available
  • fixed and auto table layout mode
  • -N … 0 rowCount handling available via rowCountWarningsTable prop
  • useApi can give table any table subcomponent access to global API
  • @emotion is used for styling, so you can pass css prop to table wrapper
  • renders table, tr, td, th, so default table styling, border collapsing, etc. can be easily applied.

PropTypes

Table.propTypes = {
    columns: PropTypes.array.isRequired,
    getRowData: PropTypes.func.isRequired,

    rowCount: PropTypes.number,
    getRowKey: PropTypes.func,
    estimatedRowHeight: PropTypes.number,
    getRowExtraProps: PropTypes.func,

    /* as row heights may be different, we measure overscan in px */
    overscanRowsDistance: PropTypes.number,

    HeaderRowComponent: PropTypes.any,
    RowComponent: PropTypes.any,
    CellComponent: PropTypes.any,

    RowCountWarningContainer: PropTypes.any,
    rowCountWarningsTable: PropTypes.object,
    fixedLayout: PropTypes.bool
};

Table.defaultProps = {
    rowCount: 0,
    estimatedRowHeight: 20,
    overscanRowsDistance: 200,
    fixedLayout: false,

    /*
        For 90% non-reactive solutions, which only provide new getRowData when data is changed, memo is ok.
        If RowComponent should be wrapped my mobx observer - non-memo version should be imported.
        memo(observer(RowComponentDefault)) will do the trick.
    */
    RowComponent: memo( RowComponentDefault ),
    CellComponent: CellComponentDefault,
    RowCountWarningContainer: RowCountWarningContainerDefault,
};

TODO

  • happens rarely(after certain width changes), but sometimes I can’t scroll to last index(it trembles and hides)
  • add resetCache( fromIndex, toIndex ) method
  • add rerenderCurrentRange() method
  • show example source in playground
  • write documentation
  • implement position: sticky where it is supported
  • maybe pass props via context somehow to avoid memos and deep passing?
  • as models are extensible and most of the logics is taken away from react, it should be easy to implement List
  • improve performance on mobile
  • optimize segments tree batch insertion
  • add footer with column summaries and sorting
  • mobile scroll flickering

GitHub

Author: nowaalex

Live Demo: https://nowaalex.github.io/af-react-table/exampleAssets/

GitHub: https://github.com/nowaalex/af-react-table

#reactjs #javascript

A Cool React Virtual Table
25.05 GEEK