javascriptgridjs

Populate cells with HTML in Grid.js


How can I populate cells with HTML content in Grid.js?


Solution

  • Import the html function first:

    import { Grid, html } from "gridjs";
    

    then use that in formatter function or directly in data:

    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
      ])
    });
    

    also check out https://gridjs.io/docs/examples/html-cells