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
Yvette Predovic	Adeline31@hotmail.com
Ms. Brad Carroll	Myah_Hansen90@yahoo.com
Sadie Durgan	Dannie_Schulist@gmail.com
Kristen Hessel	Lenna.Borer@hotmail.com
Jerome Nitzsche	Veda_Jakubowski80@hotmail.com

tip

Explore Preact's documentation for more details.