majsterkoo / react-data-grid Goto Github PK

View Code? Open in Web Editor NEW

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

License: Other

JavaScript 13.44% TypeScript 86.56%

react-data-grid's Introduction

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