33 lines
1.4 KiB
JavaScript
33 lines
1.4 KiB
JavaScript
// Table with search, sorting and paging by DataTables (no jQuery: DataTables 3.x)
|
|
|
|
import { h } from './common.js';
|
|
|
|
/**
|
|
* columns: [{ title, cell(row) -> Node | string, sort?(row) -> number | string, className? }]
|
|
* A column without `sort` is not sortable. Rows keep the order they were given in until a
|
|
* header is clicked.
|
|
*/
|
|
export function createTable({ id, columns, rows, pageLength = 50 }) {
|
|
const head = h('tr', {}, ...columns.map((column) =>
|
|
h('th', { scope: 'col', class: column.className || '' }, column.title)));
|
|
|
|
// data-order: plain numbers and ISO dates, so sorting is numeric/chronological
|
|
const body = h('tbody', {}, ...rows.map((row) =>
|
|
h('tr', {}, ...columns.map((column) =>
|
|
h('td', { class: column.className || '', 'data-order': column.sort ? column.sort(row) : null },
|
|
column.cell(row))))));
|
|
|
|
const table = h('table', { class: 'table table-sm table-hover align-middle', id }, h('thead', {}, head), body);
|
|
const wrapper = h('div', {}, table);
|
|
|
|
new DataTable(table, {
|
|
pageLength,
|
|
lengthMenu: [25, 50, 100, 200],
|
|
order: [], // keep the order from the server: newest first
|
|
columnDefs: columns.flatMap((column, index) =>
|
|
column.sort ? [] : [{ targets: index, orderable: false }]),
|
|
language: { url: 'vendor/datatables-ru.json' },
|
|
});
|
|
|
|
return wrapper;
|
|
}
|