HTML in cells

If you are using the ES module, import the html function first:

import { Grid, html } from "gridjs";

or use gridjs.html(...) if you are using the UMD export.

Then you can use that in formatter function or directly in data array:

Live Editor

const grid = new Grid({ columns: [ { name: 'Name', formatter: (cell) => html(`<b>${cell}</b>`) }, 'Email', { name: 'Actions', formatter: (_, row) => html(`<a href='mailto:${row.cells[1].data}'>Email</a>`) }, ], data: Array(5).fill().map(x => [ faker.name.findName(), faker.internet.email(), null ]) });

const grid = new Grid({
  columns: [
      { 
        name: 'Name',
        formatter: (cell) => html(`<b>${cell}</b>`)
      },
      'Email',
      { 
        name: 'Actions',
        formatter: (_, row) => html(`<a href='mailto:${row.cells[1].data}'>Email</a>`)
      },
   ],
  data: Array(5).fill().map(x => [
    faker.name.findName(),
    faker.internet.email(),
    null
  ])
});

Result

Loading...

note

Using the html function can expose your application to XSS attacks. Make sure you understand the implications of using this function and always sanitize the user inputs before passing them to the html function.

Live Editor

const grid = new Grid({ columns: [ 'Name', 'Email', 'Actions', ], data: Array(5).fill().map(x => [ faker.name.findName(), faker.internet.email(), html( "<div style='padding: 2px; border: 1px solid #ccc;border-radius: 4px;'>" + "<center>hello!</center>" + "</div>" ) ]), search: true });

const grid = new Grid({
  columns: [
    'Name',
    'Email',
    'Actions',
  ],
  data: Array(5).fill().map(x => [
    faker.name.findName(),
    faker.internet.email(),
    html(
      "<div style='padding: 2px; border: 1px solid #ccc;border-radius: 4px;'>" +
        "<center>hello!</center>" +
      "</div>"
    )
  ]),
  search: true
});

Result

Loading...