React Component in cells

Grid.js uses Preact to render the elements and that means that you can take advantage of Preact's Virtual DOM and render complex cells. In this example, we want to render React components in the table cells.

First of all, make sure you have the React wrapper library, gridjs-react, installed:

npm install gridjs-react --save

Then, import the _ function from gridjs-react package:

import { _ } from "gridjs-react";

And use it in your table header or body cells. Here is the finalized example:

Live Editor


const grid = new Grid({
  columns: [
    'Name',
    { 
      name: 'Email',
      formatter: (cell) => _(<i>{cell}</i>)
    },
    'Actions'
  ],
  data: Array(5).fill().map(x => [
    faker.name.findName(),
    faker.internet.email(),
    _(<button className={"py-2 px-4 border rounded-md text-white bg-blue-600"} onClick={() => alert('clicked!')}>Edit</button>)
  ])
});


const grid = new Grid({
  columns: [
    'Name',
    { 
      name: 'Email',
      formatter: (cell) => _(<i>{cell}</i>)
    },
    'Actions'
  ],
  data: Array(5).fill().map(x => [
    faker.name.findName(),
    faker.internet.email(),
    _(<button className={"py-2 px-4 border rounded-md text-white bg-blue-600"} onClick={() => alert('clicked!')}>Edit</button>)
  ])
});

Result