// #region Imports
import { html } from '../../../../Dom/Html';
import { repeat } from '../../../Directives/Directives';
// #endregion
/**
 * The template of the {@link DataTableElement}.
 *
 * @public
 */
export function dataTableElementTemplate(e) {
    return html `
        <mosaik-table columns="${e.getColumns().map(() => '1fr')
        .join(' ')}">
            <mosaik-table-header>
                <mosaik-table-row>
                    ${repeat(e.getColumns(), (column) => column.key, (column) => html `
                    <mosaik-table-cell .key="${column.key}"
                                       .text="${column.title ?? column.key}"
                                       ?sortable="${column.sortable}"
                                       sort-direction="${column.sortDirection ?? 'none'}"
                                       @tableCellSortChanged="${e.onSortChanged}"></mosaik-table-cell>
                    `)}
                </mosaik-table-row>
            </mosaik-table-header>
            <mosaik-table-body>
                ${repeat(e.sortedSource, (item) => item, (item) => html `
                <mosaik-table-row>
                    ${repeat(e.getColumns(), (column) => column.key, (column) => html `
                    <mosaik-table-cell .text="${column.path ? item[column.path].toString() : ''}"></mosaik-table-cell>
                    `)}
                </mosaik-table-row>
                `)}
            </mosaik-table-body>
        </mosaik-table>
    `;
}
//# sourceMappingURL=DataTableElementTemplate.js.map