Async data import

The data attribute accepts an async function, too. This is useful for making any external HTTP calls and loading data from a server.

Here we have passed a function to the data attribute which returns a Promise object and resolves the data after 1 second:

Live Editor

const paginator = new Paginator({
    columns: ['Name', 'Email', 'Phone Number'],
    data: () => {
        return new Promise((resolve) => {
            setTimeout(
                () =>
                    resolve([
                        ['John', 'john@example.com', '(353) 01 222 3333'],
                        ['Mark', 'mark@gmail.com', '(01) 22 888 4444'],
                    ]),
                1000
            );
        });
    },
    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