Simple Table with ECMA2015, dependency on Bootstrap 4.0 and font-awesome

SimpleTable.js

tableData = {
    data: [],
    totalCount: 1000,
    loadMore() {
        if (this.data.length < this.totalCount) {
            this.data = this.data.concat([
                {
                    id: this.data.length + 1,
                    name: Math.random().toString(36).substring(2, 7),
                    age: Math.ceil(30 * Math.random())
                }
            ]);
        }
        return Promise.resolve(this.data);
    }
}


utils = {
    createElement(parentEl, elName, className, style) {
        let el = document.createElement(elName);
        if (parentEl)
            parentEl.appendChild(el);
        if (className)
            el.setAttribute('class', className);
        if (style) {
            Object.keys(style).map(k => {
                el.style[k] = style[k];
            });
        }
        return el;
    },
    
    createTextElement(parentEl, elName, textContent) {
        let el = document.createElement(elName);
        if (parentEl)
            parentEl.appendChild(el);
        el.textContent = textContent;
        return el;
    }
}

class TableCardViewer {
    constructor(domId, tableName) {
        this.rowsPerPage = 10;
        let domEl = document.getElementById(domId);
        let cardEl = utils.createElement(domEl, 'div', 'card')
        
        /* Card Title*/
        let cardTitleBlockEl = utils.createElement(cardEl, 'div', 'card-block');
        let cardTitleEl = utils.createTextElement(cardTitleBlockEl, 'h4', tableName); 
        
        /* Card Table */
        let cardTableBlockEl = utils.createElement(cardEl, 'div', 'card-block');
        this.tableEl = utils.createElement(cardTableBlockEl, 'table', 'table');
        
        /* Card Footer */
        let cardFooterBlockEl = utils.createElement(cardEl, 'div', 'card-block');
        this.navEl = utils.createElement(cardFooterBlockEl, 'div', 'card-footer-floater');
        this.rightArrowEl = this.createFooterButton(
            cardFooterBlockEl, 'fa-arrow-right', this.onRightArrowClick.bind(this));
        this.leftArrowEl = this.createFooterButton(
            cardFooterBlockEl, 'fa-arrow-left', this.onLeftArrowClick.bind(this));
        
        this.rightArrowClickCallbacks = []
        this.leftArrowClickCallbacks = []
    }
    
    createFooterButton(footerBlockEl, fontAwesome, onClickListener) {
        let button = utils.createElement(footerBlockEl, 'button', 'btn btn-default card-footer-floater');
        button.innerHTML = `<i class="fa ${fontAwesome}" aria-hidden="true"></i>`
        button.onclick = onClickListener;
    }

    onLeftArrowClick() {
        this.leftArrowClickCallbacks.forEach(f => f());
    }
        
    onRightArrowClick() {
        this.rightArrowClickCallbacks.forEach(f => f());
    }
    
    setData(items, currentPage, totalPage) {
        this.setItems(items);
        this.navEl.textContent = `${currentPage} / ${totalPage}`
    }
    
    setItems(items) {
        while (this.tableEl.firstChild)
            this.tableEl.removeChild(this.tableEl.firstChild);

        if (items.length == 0) {
            this.tableEl.textContent = "Nothing to show"
            return;
        }

        let tableHead = this.tableEl.createTHead();
        let tableBody = this.tableEl.createTBody();
        
        let tableHeadRow = tableHead.insertRow();
        let columns = Object.keys(items[0]);
        columns.forEach(col => {
            utils.createTextElement(tableHeadRow, 'th', col)
        });
        
        items.forEach(item => {
            let row = tableBody.insertRow();
            columns.forEach(col => {
                utils.createTextElement(row, 'td', item[col])
            })
        })
    }
}

class TablePaginator
{
    constructor(tableData, tableViewer)
    {
        this.data = tableData;
        this.view = tableViewer;
        this.view.leftArrowClickCallbacks.push(this.setToPrevPage.bind(this));
        this.view.rightArrowClickCallbacks.push(this.setToNextPage.bind(this));
        this.rowsPerPage = 10;
        
        this.setPage(1)
    }
    
    setPage(page) {
        if (page < 1 || page > Math.ceil(this.data.totalCount / this.rowsPerPage)) {
            if (this.data.totalCount === 0) {
                this.view.setItem([], 1, 1)
                this.currentPage = 1;
            }
            return;
        }
        if (this.data.data.length < this.data.totalCount && (this.rowsPerPage * page > this.data.data.length)) {
            this.data.loadMore().then(() => {
                this.setPage(page);
            })
            return;
        }
        this.currentPage = page;
        this.view.setData(this.data.data.slice(
            (page - 1) * this.rowsPerPage,
            page * this.rowsPerPage
        ), this.currentPage, Math.ceil(this.data.totalCount / this.rowsPerPage));
    }
    
    setToNextPage() {
        this.setPage(this.currentPage + 1);
    }
    
    setToPrevPage() {
        this.setPage(this.currentPage - 1);
    }
}

function createTable(domId, tableName) {
    let viewer = new TableCardViewer(domId, tableName);
    return new TablePaginator(
        tableData,
        viewer
    );
}