JSPM

react-data-grid

7.0.0-canary.24
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 189387
  • Score
    100M100P100Q171130F
  • License MIT

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

Package Exports

  • react-data-grid

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-data-grid) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-data-grid npm-badge ci-badge

Install

npm install react-data-grid

react-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 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.
  • Optional: we also recommend using the babel-plugin-optimize-clsx plugin.
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';
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}
    />
  );
}

Documentation