pactio-react-data-grid
v7.0.21
Published
Excel-like grid component built with React, with editors, keyboard navigation, copy & paste, and the like
Downloads
4,109
Maintainers
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.
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 undernode_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.
- Babel's
- 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} />;
}