if (!window.SequraFE) { window.SequraFE = {}; } if (!window.SequraFE.components) { window.SequraFE.components = {}; } (function () { /** * @typedef TableCell * @property {string?} label * @property {string?} className * @property {(cell: HTMLTableCellElement) => void?} renderer */ /** * Renders table cell. * * @param {'td' | 'th'} type * @param {TableCell} cellData * @returns {HTMLElement} */ const renderCell = (type, cellData) => { const cell = SequraFE.elementGenerator.createElement(type, cellData.className, cellData.label); cellData.renderer && cellData.renderer(cell); return cell; }; const getTableElement = () => { return SequraFE.elementGenerator.createElementFromHTML('
'); }; /** * Renders table rows. * * @param tableWrapper * @param {TableCell[][]} items */ const createTableRows = (tableWrapper, items) => { items.length && tableWrapper.querySelector('tbody').append( ...items.map((item) => { const row = SequraFE.elementGenerator.createElement('tr'); row.append(...item.map((cellData) => renderCell('td', cellData))); return row; }) ); }; /** * Data table component. * * @param {TableCell[]} headers * @param {TableCell[][]} items * @param {string?} className */ const createDataTable = (headers, items, className = 'sq-table-container') => { const tableElement = getTableElement(); headers.forEach((header) => { header.label = SequraFE.translationService.translate(header.label); }); const heading = tableElement.querySelector('thead tr'); heading.append(...headers.map((cellData) => renderCell('th', cellData))); createTableRows(tableElement, items); return SequraFE.elementGenerator.createElement('div', className, '', null, [tableElement]); }; SequraFE.components.DataTable = { create: createDataTable, createTableRows }; })();