HTML in header cells

Import the html function first:

import { Grid, html } from "gridjs";

Then you can use that in columns or name field of columns:

Live Editor

const grid = new Grid({ columns: [ { id: 'name', name: html('<i>Name</i>'), }, { id: 'email', name: html('<div style="border: 1px solid #ccc;padding: 5px;border-radius: 5px;text-align: center;">Email</div>'), } ], data: Array(5).fill().map(x => [ faker.name.findName(), faker.internet.email(), ]) });

const grid = new Grid({
  columns: [
      { 
        id: 'name',
        name: html('<i>Name</i>'),
      },
      {
        id: 'email',
        name: html('<div style="border: 1px solid #ccc;padding: 5px;border-radius: 5px;text-align: center;">Email</div>'),
      }
   ],
  data: Array(5).fill().map(x => [
    faker.name.findName(),
    faker.internet.email(),
  ])
});

Result

Loading...

You can also create a virtual DOM and attach it to header cells:

import { Grid, h } from "gridjs";

Live Editor

const grid = new Grid({ columns: [ { id: 'name', name: h('b', {}, 'Name'), }, { id: 'div', name: h('div', { style: { border: '1px solid #ccc', padding: '5px', 'border-radius': '5px', 'text-align': 'center', } }, 'Email'), }, ], data: Array(5).fill().map(x => [ faker.name.findName(), faker.internet.email(), ]), search: true });

const grid = new Grid({
  columns: [
    {
      id: 'name',
      name: h('b', {}, 'Name'),
    },
    {
      id: 'div',
      name: h('div', {
        style: {
          border: '1px solid #ccc',
          padding: '5px',
          'border-radius': '5px',
          'text-align': 'center',
        }
      }, 'Email'), 
    },
  ],
  data: Array(5).fill().map(x => [
    faker.name.findName(),
    faker.internet.email(),
  ]),
  search: true
});

Result

Loading...