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

adazzle
4.3K Stars 1.8K Forks Other 1.9K Commits 133 Opened issues

Description

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

Services available

!
?

Need anything else?

Contributors list

No Data

react-data-grid npm-badge ci-badge

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';
import 'react-data-grid/dist/react-data-grid.css';

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

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

function App() { return ( ); }

Documentation

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.