HTML in cells

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

import { Paginator, html } from '@carry0987/paginator';

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

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

Live Editor

const paginator = new Paginator({
    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.person.fullName(), faker.internet.email(), null]),
    dataRender: (response) => {
        let dataHtml = '<ul>';
        response.forEach((item, index) => {
            dataHtml += '<li><span>' + item.join(' : ') + '</span></li>';
        });
        dataHtml += '</ul>';
        document.querySelectorAll('div.list-container')[0].innerHTML = dataHtml;
    }
});

Result

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 paginator = new Paginator({
    columns: ['Name', 'Email', 'Actions'],
    data: Array(5)
        .fill()
        .map((x) => [
            faker.person.fullName(),
            faker.internet.email(),
            html(
                "<div style='padding: 2px; border: 1px solid #ccc;border-radius: 4px;'>" +
                    '<center>hello!</center>' +
                    '</div>'
            ),
        ]),
    dataRender: (response) => {
        let dataHtml = '<ul>';
        response.forEach((item, index) => {
            dataHtml += '<li><span>' + item.join(' : ') + '</span></li>';
        });
        dataHtml += '</ul>';
        document.querySelectorAll('div.list-container')[1].innerHTML = dataHtml;
    }
});

Result