Populate cells with HTML in Grid.js

Question

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

score 2 · Accepted Answer · answered Jun 07 '20 at 11:52

2

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

answered Jun 07 '20 at 11:52

Afshin Mehrabani

33,262
29
136
201

how do you do this when you aren't using a javascript framework? – Jake McAllister Jun 07 '20 at 13:30
@JakeMcAllister my answer is not framework specific. You can still use that answer without any JS frameworks. – Afshin Mehrabani Jun 08 '20 at 00:55
2

@AfshinMehrabani how to use this via vanilla JS directly via HTML markup? how do I get the "html" function to work? FYI, I'm using CDN to load the gridjs – mdennisa Aug 21 '20 at 12:21
What if I need to put two buttons with on click events for edit or delete for example ? I tried this method and it did not work. – Majd Jul 07 '22 at 06:22

score 2 · Answer 2 · answered Aug 24 '20 at 03:53

2

I'm using gridjs CDN implementation via browser, I can use formatter by accessing the html function via gridjs namespace as per below

    {
        name: "Action",
        formatter: (cell) => {
            return gridjs.html(`<a href="">update</a>`)
            // return `Update button`
        }
    }

answered Aug 24 '20 at 03:53

mdennisa

177
2
13

This doesn't work, it just says gridjs is undefined when importing from cdn – johnstaveley Sep 14 '22 at 09:48

Bunny · Answer 3 · 2020-09-24T18:27:56.377

For me, I set the script type "text/javascript" to "module". And then I can use "import" like this =>

<script type="module">
        import {
            Grid,
            html
        } from "/Scripts/gridjs.production.es.min.js";
        
        //then use html with formatter

        {
           name: "Actions",
           formatter: (cell) => {
           return html(`<a data-id=${cell} href="#"><span class="glyphicon glyphicon-pencil"></span>Edit</a>`)
        }
}
</script>

score 0 · Answer 4 · answered May 09 '22 at 19:17

You can also modify the data received with a service or something else and then pass it in html ;)

import { Grid, html } from "gridjs";

const columns = [
        {
            id: 'difficulty',
            name: 'Difficulté',
            formatter: (cell) => {
                const difficultyConverter = new DifficultyConverter()
                const displayedDifficultyResults = difficultyConverter.getNameAndAssociatedClassName(cell, null)

                return html(`<span class='badge ${displayedDifficultyResults.originClassToAdd}--active'>${displayedDifficultyResults.originName}</span>`)
            }
        },
        {
            id: 'community_difficulty',
            name: 'Communauté',
            formatter: (cell) => {
                const difficultyConverter = new DifficultyConverter()
                const displayedDifficultyResults = difficultyConverter.getNameAndAssociatedClassName(cell, null)

                return html(`<span class='badge ${displayedDifficultyResults.originClassToAdd}--active'>${displayedDifficultyResults.originName}</span>`)
            }
        },
]

Populate cells with HTML in Grid.js

4 Answers4