Excel-like grid component built with React, with editors, keyboard navigation, copy & paste, and the like


stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
10Feb 12, 2020Sep 28, 2017Minified + gzip package size for @bhunjadi/react-data-grid in KB


Forked React Data Grid

This is a forked react-data-grid (v7.0.0-alpha.22).

Added features:

  • multiple column sorting
  • keeping all rows in DOM (no recycling)
  • option ignoreScrollbarSize which affects ColumnMetrics calculation (for grids without scrollbar)
  • column option cellTitle which can provide title for the cell
  • passing initial filters to grid
  • cellContext prop which is passed to cell formatter
  • renderSortableCellContent prop overrides default content of SortableHeaderCell allowing customization of sort arrow

Multiple column sorting


handleMultipleColumnSort(sort) {
   * sort will be an array
   * for empty sort, sort will still be array with length === 0
   * each object of array is like {column, direction} where column is column.key from columns definition
   * */

render() {
  return (

      // optionally (default: false)
      // this forces user to press Ctrl (or Cmd on Mac OS) to be able to do multiple sort, 
      // without Ctrl it would overwrite the last value and act as single sort (but still pass an array to handleMultipleColumnsSort)

Keep all rows in DOM



Can be useful if for example you are using expandable rows, etc.

React Data Grid npm-badge azure-badge coverage-badge

Excel-like grid component built with React, with editors, keyboard navigation, copy & paste, and the like


npm install react-data-grid


import ReactDataGrid from 'react-data-grid';

const columns = [{ key: 'id', name: 'ID' }, { key: 'title', name: 'Title' }];
const rows = [{ id: 1, title: 'Title 1' }, ...];
const rowGetter = rowNumber => rows[rowNumber];

const Grid = () => {
  return <ReactDataGrid
    minHeight={500} />);


Aside from the grid this package exports:

name source
RowComparer RowComparer
RowsContainer RowsContainer
Row Row
Cell Cell
HeaderCell HeaderCell
shapes shapes
_helpers _helpers

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.