npm install react-data-gridreact-data-grid is published as ES2020 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 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
envpreset, if configured correctly, will transform this import so only the necessary polyfills are included in your bundle.
- Babel's
- Polyfilling the
ResizeObserverAPI is required for older browsers. - Optional: we also recommend using the
babel-plugin-optimize-clsxplugin.
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
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 (
<DataGrid
columns={columns}
rows={rows}
/>
);
}