Wondering what’s next for npm?Check out our public roadmap! »

    react-data-grid
    TypeScript icon, indicating that this package has built-in type declarations

    7.0.0-canary.46 • Public • Published

    react-data-grid

    npm-badge type-badge size-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';
    
    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}
        />
      );
    }

    Documentation

    Install

    npm i react-data-grid

    DownloadsWeekly Downloads

    57,527

    Version

    7.0.0-canary.46

    License

    MIT

    Unpacked Size

    579 kB

    Total Files

    9

    Last publish

    Collaborators

    • avatar