datatables/components/TableBody.js

import ActionSet from "./toolbar/ActionSet";

export default class TableBody {
    constructor(rows, columns, rowActions, options) {
        this.rows = rows;
        this.columns = columns;
        this.rowActions = rowActions;
        this.options = options;
    }

    render() {
        if(this.options.selectable){
            return this.renderSelectable();
        }
        return this.renderDefaultTable();
    }

    renderDefaultTable(){
        const tbody = document.createElement('tbody');

        this.rows.forEach((row) => {
            const tr = document.createElement('tr');

            this.columns.forEach((column) => {
                const td = document.createElement('td');
                td.setAttribute('data-name', column.column);
                td.setAttribute('data-value', row[column.column]);

                if (column.column == 'id') {
                    tr.setAttribute('data-value', row[column.column]);
                    const idColumn = new ActionSet(this.rowActions, 'span', row[column.column]);
                    td.appendChild(idColumn.render());
                } else {
                    td.innerHTML = row[column.column];
                }

                tr.appendChild(td);
            });

            tbody.appendChild(tr);

        });
        return tbody;
    }

    renderSelectable(){
        const tbody = document.createElement('tbody');

        this.rows.forEach((row) => {
            const tr = document.createElement('tr');

            this.columns.forEach((column) => {
                const td = document.createElement('td');
                td.setAttribute('data-name', column.column);
                td.setAttribute('data-value', row[column.column]);

                if (column.column == 'id') {
                    tr.setAttribute('data-value', row[column.column]);
                    const idColumn = document.createElement('button');

                    let payload = {'element': row, ...this.options.selectable.callbackParameters};

                    idColumn.addEventListener('click', this.options.selectable.select.bind(null, payload));
                    idColumn.classList.add('btn', 'btn-danger', 'btn-block');
                    idColumn.style = "padding: 0.1rem 0.5em;";
                    idColumn.innerHTML = 'Selecionar';
                    td.appendChild(idColumn);
                } else {
                    td.innerHTML = row[column.column];
                }

                tr.appendChild(td);
            });

            tbody.appendChild(tr);

        });
        return tbody;
    }
}