Need help with react-data-grid?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

4.6K Stars 1.8K Forks Other 2.0K Commits 177 Opened issues


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

Services available


Need anything else?

Contributors list


npm-badge type-badge size-badge codecov-badge ci-badge


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": [
        "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: {
      include: ['./src/**/*', './node_modules/react-data-grid/lib/**/*']

See documentation


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 ; }


We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.