A smoother scrolling virtualized React grid with dynamically measured rows and columns.
npm install react-measured-grid> A smoother scrolling virtualized React grid with dynamically measured rows and columns.
react-measured-grid can be a good tool to use when:
- You want to display data in a tabular format with rows and columns.
- The height of a row might not be known until after it is rendered by the browser,
for example if the content of a cell consists of variable length text
that can wrap to an unknown number of lines.
- The number of rows can be very large, for example tens of thousands of rows.
- The number of columns is not very large.
- You want to support relatively smooth forward and backward scrolling.
- You want the option to easily control column widths
and the size of the view window
with a combination of inline and selector-based CSS
in units other than pixels.
You can interact with several
demos
to get an idea of the performance and flexibility this package offers
and to compare its behavior to other implementation approaches.
``bash
# Yarn
yarn add react-measured-grid
# NPM
npm install --save react-measured-grid
`
If dataArray is an array of arrays of data, for example:
dataArray = [
['gen-0157-C', 'Generator 157, model C; 120 volts, 500 Watts, with extended overload protection', 7],
['ptr-0049-F', 'Printer 49 in the F block', 1],
...
];
Then displaying three columns of data with a MeasuredGrid component
can be as simple as:
columnCountInitial={3}
columnWidth={['15ex', '45ex', '8ex']}
viewStyle={{width: 75ex, height: 20ex}}
/>
You can read about the
full API
for more details and options.
Additional features include:
- Position a specified row at the top, middle, or bottom
of the view window.
- Support for efficiently adding rows to or removing rows from
the end of the data.
- Support for rows that dynamically change height
and columns that change width.
MeasuredGrid displays virtualized data,
meaning that at any one time it will put in the DOM
only those rows in a neighborhood of the rows
that can be seen in the scrollable view window.
In contrast, if MeasuredGrid needs to add part of a row to the DOM,
it will add the entire row.
This package was inspired by
react-virtualized,
but is somewhat more directly a fork of
react-window.
This package is designed
to provide smoother scrolling than react-virtualized,react-measured-grid
especially smoother backwards scrolling over rows not previously rendered.
However will typically be somewhat less efficientreact-window
in its virtualization than ,react-measured-grid
which depends on knowing the height of rows
and widths of columns in pixels
before it decides how to populate the DOM.
The difference in efficiency will vary
depending on the number of columns and other patterns in the data
and on the extent to which you use features of
to tune its performance.
While react-measured-grid` borrowed many ideas from those packages,
it does not attempt to provide an API that is compatible with either one.
MIT © 2020 DavidCary