Package Exports

gridjs-react
gridjs-react/dist/gridjs.production.es.min.js
gridjs-react/dist/gridjs.production.min.js

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 (gridjs-react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Grid.js for React

React component for Grid.js

Install

npm install --save gridjs-react

Also, make sure you have Grid.js installed already as it's a peer dependency of gridjs-react:

npm install --save gridjs

Usage

Import the Grid component first:

import { Grid } from "gridjs-react";

<Grid
  data={[
    ['John', 'john@example.com'],
    ['Mike', 'mike@gmail.com']
  ]}
  columns={['Name', 'Email']}
  search={true}
  pagination={{
    enabled: true,
    limit: 1,
  }}
/>

Then you can pass all Grid.js configs to the Grid component. See Grid.js Config for more details.

React component in cells

You can bind your React components or elements in Table cells (both in header and body cells). Simply import the _ function and use it in data, columns or formatter function:

import { Grid, _ } from "gridjs-react";

<Grid
  data={[
    [
      _(<b>John</b>),
      'john@example.com',
    ],
    [
      _(<MyReactComponent>Mike</MyReactComponent>),
      'mike@gmail.com',
    ]
  ]}
  columns={[
    'Name', 
    {
      name: 'Email',
      formatter: (cell) => _(<i>{cell}</i>)
    }
  ]}
  search={true}
  pagination={{
    enabled: true,
    limit: 1,
  }}
/>

Example

See the React example on Grid.js website.

License

MIT