react-data-grid

What is react-data-grid?

react-data-grid is a powerful and feature-rich data grid component for React applications. It provides a wide range of functionalities for displaying, editing, and managing data in a tabular format. It is highly customizable and supports various features such as sorting, filtering, grouping, and more.

What are react-data-grid's main functionalities?

Basic Grid

This code demonstrates a basic data grid with three columns: ID, Title, and Count. It displays two rows of data.

import React from 'react';
import ReactDataGrid from 'react-data-grid';

const columns = [
  { key: 'id', name: 'ID' },
  { key: 'title', name: 'Title' },
  { key: 'count', name: 'Count' }
];

const rows = [
  { id: 0, title: 'Example', count: 20 },
  { id: 1, title: 'Demo', count: 40 }
];

function BasicGrid() {
  return <ReactDataGrid columns={columns} rows={rows} />;
}

export default BasicGrid;

Editable Grid

This code demonstrates an editable data grid where users can edit the values in the cells. The changes are reflected in the grid's state.

import React from 'react';
import ReactDataGrid from 'react-data-grid';

const columns = [
  { key: 'id', name: 'ID', editable: true },
  { key: 'title', name: 'Title', editable: true },
  { key: 'count', name: 'Count', editable: true }
];

const rows = [
  { id: 0, title: 'Example', count: 20 },
  { id: 1, title: 'Demo', count: 40 }
];

function EditableGrid() {
  const [gridRows, setGridRows] = React.useState(rows);

  const onGridRowsUpdated = ({ fromRow, toRow, updated }) => {
    const updatedRows = gridRows.slice();
    for (let i = fromRow; i <= toRow; i++) {
      updatedRows[i] = { ...updatedRows[i], ...updated };
    }
    setGridRows(updatedRows);
  };

  return (
    <ReactDataGrid
      columns={columns}
      rows={gridRows}
      onRowsUpdate={onGridRowsUpdated}
    />
  );
}

export default EditableGrid;

Sortable Grid

This code demonstrates a sortable data grid where users can sort the rows by clicking on the column headers. The sorting direction can be ascending or descending.

import React from 'react';
import ReactDataGrid from 'react-data-grid';

const columns = [
  { key: 'id', name: 'ID', sortable: true },
  { key: 'title', name: 'Title', sortable: true },
  { key: 'count', name: 'Count', sortable: true }
];

const rows = [
  { id: 0, title: 'Example', count: 20 },
  { id: 1, title: 'Demo', count: 40 }
];

function SortableGrid() {
  const [gridRows, setGridRows] = React.useState(rows);
  const [sortColumn, setSortColumn] = React.useState(null);
  const [sortDirection, setSortDirection] = React.useState(null);

  const onGridSort = (column, direction) => {
    const sortedRows = [...gridRows].sort((a, b) => {
      if (direction === 'ASC') {
        return a[column] > b[column] ? 1 : -1;
      } else if (direction === 'DESC') {
        return a[column] < b[column] ? 1 : -1;
      } else {
        return 0;
      }
    });
    setGridRows(sortedRows);
    setSortColumn(column);
    setSortDirection(direction);
  };

  return (
    <ReactDataGrid
      columns={columns}
      rows={gridRows}
      onGridSort={onGridSort}
      sortColumn={sortColumn}
      sortDirection={sortDirection}
    />
  );
}

export default SortableGrid;

Other packages similar to react-data-grid

ag-grid-react

ag-grid-react is a feature-rich data grid component for React applications. It offers a wide range of functionalities including sorting, filtering, grouping, and more. It is highly customizable and supports large datasets efficiently. Compared to react-data-grid, ag-grid-react provides more advanced features and better performance for large datasets.

react-table

react-table is a lightweight and flexible data table component for React. It provides basic functionalities such as sorting, filtering, and pagination. It is highly customizable and easy to use. Compared to react-data-grid, react-table is more lightweight and easier to integrate but may lack some advanced features.

material-table

material-table is a data table component for React based on Material-UI. It provides functionalities such as sorting, filtering, grouping, and more. It is highly customizable and integrates well with Material-UI components. Compared to react-data-grid, material-table offers a more modern and visually appealing design but may have a steeper learning curve.

README

react-data-grid

Install

npm install react-data-grid

react-data-grid is published as ES2019 modules, you'll probably want to transpile those down to scripts for the browsers you target using Babel and browserslist.

Example browserslist configuration file

last 2 chrome versions
last 2 edge versions
last 2 firefox versions
last 2 safari versions

See documentation

Example babel.config.json file

{
  "presets": [
    [
      "@babel/env",
      {
        "bugfixes": true,
        "shippedProposals": true,
        "corejs": 3,
        "useBuiltIns": "entry"
      }
    ]
  ]
}

See documentation

• It's important that the configuration filename be babel.config.* instead of .babelrc.*, otherwise Babel might not transpile modules under node_modules.
• We recommend polyfilling modern JS features with core-js by adding the following snippet at the top of your bundle's entry file:

  import 'core-js/stable';
  

  • Babel's env preset, if configured correctly, will transform this import so only the necessary polyfills are included in your bundle.
• Polyfilling the ResizeObserver API is required for older browsers.

Webpack configuration with babel-loader

{
  // ...
  module: {
    rules: {
      test: /\.js$/,
      exclude: /node_modules[/\\](?!react-data-grid[/\\]lib)/,
      use: 'babel-loader'
    }
  }
}

See documentation

rollup.js configuration with @rollup/plugin-babel

{
  // ...
  plugins: {
    babel({
      include: ['./src/**/*', './node_modules/react-data-grid/lib/**/*']
    });
  }
}

See documentation

Usage

import DataGrid from 'react-data-grid';

const columns = [
  { key: 'id', name: 'ID' },
  { key: 'title', name: 'Title' }
];

const rows = [
  { id: 0, title: 'Example' },
  { id: 1, title: 'Demo' }
];

function App() {
  return <DataGrid columns={columns} rows={rows} />;
}

Documentation

• Website
  • Source code
• Old website for react-data-grid v5
• Changelog
• Contributing