CODEWITHSUNDEEP
javascriptreactjsgridjs
Nyasha
Nyasha

Reputation: 101

Example of Grid.js on React

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)

Upvotes: 1

Views: 2210

Answers (4)

Sweder Schellens
Sweder Schellens

Reputation: 480

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.

Upvotes: 0

Afshin Mehrabani
Afshin Mehrabani

Reputation: 34929

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

Upvotes: 0

Diogo
Diogo

Reputation: 21

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' />
    )
}

Upvotes: 1

Yalung Tang
Yalung Tang

Reputation: 639

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)

Upvotes: 1

Related Questions