Example of Grid.js on React

Question

Is there a React example using grid.js? having errors

import React from 'react';
import { Grid } from 'gridjs';

export const TableNew = () => {
  const grid = new Grid({
    columns: ['Weekly', 'Fortnightly', 'Monthly', 'Annually'],
    data: () => [
      ['Pay', 0, 0, 0],
      ['Taxable Income', 0, 0, 0],
      ['Taxes', 0, 0, 0],
    ],
  });

  console.log('grid', grid);
  return <div>{grid}</div>;
};

ERROR: Error: Objects are not valid as a React child (found: object with keys {_config}). If you meant to render a collection of children, use an array instead. in div (at TableNew.jsx:15)

Yalung Tang · Accepted Answer · 2020-06-09 08:55:28Z

1

There are no docs on this, but the way it works is that it needs a ref in order to render.

import React, { useEffect, useRef } from "react";
import { Grid } from "gridjs";

const TableNew = () => {
  const wrapperRef = useRef(null);

  useEffect(() => {
    new Grid({
      columns: ["Weekly", "Fortnightly", "Monthly", "Annually"],
      data: () => [
        ["Pay", 0, 0, 0],
        ["Taxable Income", 0, 0, 0],
        ["Taxes", 0, 0, 0]
      ]
    }).render(wrapperRef.current);
  });

  return <div ref={wrapperRef} />;
};

export default TableNew;

I created a sandbox with a working example.

https://codesandbox.io/embed/vigorous-hopper-n4xig?fontsize=14&hidenavigation=1&theme=dark

There is an open issue to add a React Wrapper https://github.com/grid-js/gridjs/issues/26 (I can guess, since the issue intention is not clearly described)

edited Jun 9, 2020 at 8:55

answered Jun 9, 2020 at 8:18

Yalung Tang

6394 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Diogo · Accepted Answer · 2020-06-09 11:57:05Z

Here is an example with custom pagination, search, sorting and dynamic data from an api.

const ExampleComponent = () => { 
    const grid = new Grid({
        search: {
            enabled: true,
            placeholder: 'Search...'
        },
        sort: true,
        pagination: {
            enabled: true,
            limit: 5,
            summary: false
        },
        columns: [
            'Id',
            'Tag',
            'Name'
        ],
        data: () => {
            return api.movies.list({ locationId }).then(({ data }) => {
                return data.results.map(movie => [movie.id, movie.tag, movie.name])
            })
        }
    })

    useEffect(() => {
        grid.render(document.getElementById('wrapper'))
    }, [locationId])

    return (
      <div id='wrapper' />
    )
}

Afshin Mehrabani · Accepted Answer · 2020-06-14 16:45:34Z

0

I just published the first version of the 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

<Grid
  data={[
    ['John', '[email protected]'],
    ['Mike', '[email protected]']
  ]}
  columns={['Name', 'Email']}
  search={true}
  pagination={{
    enabled: true,
    limit: 1,
  }}
/>

Links

Example: https://gridjs.io/docs/integrations/react

Repo: https://github.com/grid-js/gridjs-react

Edit on CodeSandbox: https://codesandbox.io/s/gridjs-react-ddy69

edited Jun 14, 2020 at 16:45

answered Jun 12, 2020 at 18:05

Afshin Mehrabani

35.3k33 gold badges146 silver badges209 bronze badges

Comments

Sweder Schellens · Accepted Answer · 2020-06-25 00:57:34Z

0

I am also using Grid.js in a react context. I found I had to install both Grid.js and the React integration:

npm install gridjs
npm install gridjs-react

and then change the import to this:

import {Grid} from "gridjs-react";

I am sure there is another way without the react wrapper but this is what did the trick for me.

answered Jun 25, 2020 at 0:57

Sweder Schellens

4801 gold badge4 silver badges14 bronze badges

Collectives™ on Stack Overflow

Example of Grid.js on React

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related