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.

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

See documentation

{
  "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.

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

See documentation

{
  // ...
  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