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
importDataGridfrom'react-data-grid';import'react-data-grid/dist/react-data-grid.css';constcolumns=[{key: 'id',name: 'ID'},{key: 'title',name: 'Title'}];constrows=[{id: 0,title: 'Example'},{id: 1,title: 'Demo'}];functionApp(){return(<DataGridcolumns={columns}rows={rows}/>);}