Virtual DOM

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.

Simply, import h from the gridjs package:

import { h } from "gridjs";

Then, create a custom Preact component:

function bold(text) {
  return h('b', {}, text);
}

Finally, connect the component to Grid.js:

Live Editor

function bold(text) { return h('b', {}, text); } const grid = new Grid({ columns: [ 'Name', 'Email' ], data: Array(5).fill().map(x => [ faker.name.findName(), bold(faker.internet.email()) ]) });

function bold(text) {
  return h('b', {}, text);
}
const grid = new Grid({
  columns: [
      'Name',
      'Email'
   ],
  data: Array(5).fill().map(x => [
    faker.name.findName(),
    bold(faker.internet.email())
  ])
});

Result

Name	Email
Wendell Frami	Kolby.Johnson@yahoo.com
Randal Morissette	Madilyn49@yahoo.com
Mr. Kate McGlynn	Mariela2@gmail.com
Robin Hahn	Elmo_Jones39@gmail.com
Roland Dach	Dean.Greenfelder72@yahoo.com

tip

Explore Preact's documentation for more details.