@massimo-cassandro/minimo 1.32.4 → 1.33.1

package/src/web-components/json-table/src/parse-rows.js

@@ -0,0 +1,81 @@
+/*! minimo - json-table: rows parsing (sort & search values) */
+
+import { getNestedValue } from './content-utils.js';
+
+/** @typedef {import('./defaults.js').JsonTableParams} JsonTableParams */
+/** @typedef {import('./parse-cols.js').ParsedCol} ParsedCol */
+
+/**
+ * A data row with the values precomputed for sorting and searching.
+ * @typedef {Object} ParsedRow
+ * @property {number} idx - Index of the row in the original data set
+ * @property {Object} row - The original row object
+ * @property {Object<string, *>} sortValues - Sort value of every sortable column, keyed by column key
+ * @property {string} searchText - Lowercased concatenation of the search values of the searchable columns
+ */
+
+/**
+ * Resolves the sort/search value of a cell: column-level value or function `row => value`
+ * (when defined) → data type function `(value, row, params) => value` → raw value.
+ * @param {*} colValue - Column `sortValue`/`searchValue` (undefined = not set)
+ * @param {((value: *, row: Object, params: JsonTableParams) => *)|undefined} typeFn - Data type function
+ * @param {*} value - Raw cell value
+ * @param {Object} row - Row object
+ * @param {JsonTableParams} params - Resolved params
+ * @returns {*}
+ */
+function resolveValue(colValue, typeFn, value, row, params) {
+  if (colValue !== undefined) {
+    return typeof colValue === 'function' ? colValue(row) : colValue;
+  }
+  if (typeof typeFn === 'function') {
+    return typeFn(value, row, params);
+  }
+  return value;
+}
+
+
+/**
+ * Precomputes, for every row, the values used by sorting and searching, so that they are
+ * calculated once and not on every sort/search operation (see `sorting.js` and `search.js`).
+ *
+ * @param {Array<Object>} rows - Raw data rows
+ * @param {ParsedCol[]} cols - Parsed columns (see `parse-cols.js`)
+ * @param {JsonTableParams} params - Resolved params
+ * @returns {ParsedRow[]}
+ *
+ * @example
+ * parseRows([{ id: 1, name: 'Mario', amount: '12.5' }], cols, params);
+ * // → [{ idx: 0, row: {…}, sortValues: { id: 1, name: 'Mario', amount: 12.5 }, searchText: 'mario 12,5' }]
+ */
+export function parseRows(rows, cols, params) {
+
+  return rows.map((row, idx) => {
+
+    /** @type {Object<string, *>} */
+    const sortValues = {};
+    /** @type {string[]} */
+    const searchParts = [];
+
+    cols.forEach(col => {
+      const value = getNestedValue(row, col.key);
+
+      if (col.sortable) {
+        sortValues[col.key] = resolveValue(col.sortValue, col._type.sortValue, value, row, params);
+      }
+
+      if (col.searchable) {
+        const searchValue = resolveValue(
+          col.searchValue,
+          col._type.searchValue ?? (v => (v == null ? '' : String(v))),
+          value, row, params
+        );
+        if (searchValue != null && searchValue !== '') {
+          searchParts.push(String(searchValue));
+        }
+      }
+    });
+
+    return { idx, row, sortValues, searchText: searchParts.join(' ').toLowerCase() };
+  });
+}

package/src/web-components/json-table/src/resolve-params.js

@@ -0,0 +1,166 @@
+/*! minimo - json-table: params resolution */
+
+import { defaults, mergedParams } from './defaults.js';
+
+/** @typedef {import('./defaults.js').JsonTableParams} JsonTableParams */
+
+/**
+ * Whether `value` is a plain object (not null, not an array).
+ * @param {*} value
+ * @returns {value is Object<string, *>}
+ */
+function isPlainObject(value) {
+  return value != null && typeof value === 'object' && !Array.isArray(value);
+}
+
+
+/**
+ * Reads and parses an HTML attribute of the `<json-table>` element.
+ *
+ * - booleans are auto-parsed when the built-in default is a boolean
+ *   (`search`, `search="true"`, `search="1"` → true; `search="false"`, `search="0"` → false)
+ * - numbers are auto-parsed when the built-in default is a number (`perpage="10"` → 10; a
+ *   non-numeric value is reported in the console and treated as a missing attribute)
+ * - values starting with `[` or `{` are parsed as JSON (invalid JSON is reported in the
+ *   console and treated as a missing attribute)
+ * - every other value is returned as a string
+ *
+ * @param {HTMLElement} el - The `<json-table>` element
+ * @param {keyof JsonTableParams} name - Parameter name (attribute names are case-insensitive)
+ * @returns {*} The parsed value, or `undefined` when the attribute is missing or invalid
+ *
+ * @example
+ * // <json-table search="false" cols='[{"key":"id"}]'></json-table>
+ * readAttr(el, 'search'); // → false
+ * readAttr(el, 'cols');   // → [{ key: 'id' }]
+ * readAttr(el, 'perPage'); // → 10 (from perpage="10")
+ * readAttr(el, 'caption'); // → undefined
+ */
+export function readAttr(el, name) {
+
+  const attr = el.getAttribute(name);
+  if (attr === null) {
+    return undefined;
+  }
+
+  const trimmed = attr.trim();
+
+  if (typeof defaults[name] === 'boolean') {
+    const lower = trimmed.toLowerCase();
+    // empty string = attribute present without value → true (standard HTML)
+    return lower !== 'false' && lower !== '0';
+  }
+
+  if (typeof defaults[name] === 'number') {
+    const num = Number(trimmed);
+    if (trimmed === '' || Number.isNaN(num)) {
+      // eslint-disable-next-line no-console
+      console.error(`[json-table] attributo \`${name}\`: valore numerico non valido (${attr}), viene usato il default`);
+      return undefined;
+    }
+    return num;
+  }
+
+  if (trimmed.startsWith('[') || trimmed.startsWith('{')) {
+    try {
+      return JSON.parse(trimmed);
+    } catch (err) {
+      // eslint-disable-next-line no-console
+      console.error(`[json-table] attributo \`${name}\`: JSON non valido, valore ignorato (viene usato il default)`, err);
+      return undefined;
+    }
+  }
+
+  return attr;
+}
+
+
+/**
+ * Resolves a single parameter, merging the four possible sources.
+ *
+ * Precedence (highest first):
+ * 1. `config` – value passed via `init()`/`reload()`. Present and `!== undefined` always wins;
+ *    pass `null` explicitly to skip the HTML attribute and fall back to the defaults.
+ * 2. HTML attribute (see `readAttr`).
+ * 3. `projectDefaults` – values set via `JsonTable.setDefaults()`.
+ * 4. Built-in default (see `defaults.js`).
+ *
+ * Object params listed in `mergedParams` (`classes`, `labels`, `dataTypes`, `serverParams`) are shallow-merged
+ * across the sources instead of being replaced, so every source only needs the keys to override.
+ *
+ * @param {HTMLElement} el - The `<json-table>` element (source of the HTML attributes)
+ * @param {Partial<JsonTableParams>|null} config - Config passed via `init()` (default: null)
+ * @param {Partial<JsonTableParams>} projectDefaults - Project-wide defaults (default: {})
+ * @param {keyof JsonTableParams} name - Parameter name
+ * @returns {*} The resolved value
+ *
+ * @example
+ * // <json-table jsonurl="/api/rows.json" search="false" classes='{"table":"table"}'></json-table>
+ * getParam(el, { jsonUrl: '/api/other.json' }, {}, 'jsonUrl'); // → '/api/other.json' (config)
+ * getParam(el, null, {}, 'search');                             // → false (attribute)
+ * getParam(el, null, { tableId: 'tbl' }, 'tableId');            // → 'tbl' (project defaults)
+ * getParam(el, null, {}, 'locale');                             // → 'it-IT' (built-in default)
+ * getParam(el, { classes: { sortBtn: 'btn' } }, {}, 'classes');
+ * // → { ...defaults.classes, table: 'table', sortBtn: 'btn' } (merged)
+ */
+export function getParam(el, config = null, projectDefaults = {}, name) {
+
+  const configValue = config ? config[name] : undefined;
+
+  // merged object params: built-in ← project ← attribute ← config
+  if (mergedParams.includes(name)) {
+    const builtIn = /** @type {Object<string, *>} */ (defaults[name]);
+    const projectValue = projectDefaults[name];
+    const attrValue = configValue === null ? undefined : readAttr(el, name);
+    return {
+      ...builtIn,
+      ...(isPlainObject(projectValue) ? projectValue : {}),
+      ...(isPlainObject(attrValue) ? attrValue : {}),
+      ...(isPlainObject(configValue) ? configValue : {})
+    };
+  }
+
+  // 1. config from script (undefined = key not present → go down one level)
+  if (configValue !== undefined) {
+    return configValue;
+  }
+
+  // 2. HTML attribute
+  const attrValue = readAttr(el, name);
+  if (attrValue !== undefined) {
+    return attrValue;
+  }
+
+  // 3. project defaults
+  if (projectDefaults[name] !== undefined) {
+    return projectDefaults[name];
+  }
+
+  // 4. built-in default
+  return defaults[name];
+}
+
+
+/**
+ * Resolves every parameter defined in `defaults.js` (see `getParam` for the precedence rules).
+ *
+ * @param {HTMLElement} el - The `<json-table>` element
+ * @param {Partial<JsonTableParams>|null} [config=null] - Config passed via `init()` (default: null)
+ * @param {Partial<JsonTableParams>} [projectDefaults={}] - Project-wide defaults (default: {})
+ * @returns {JsonTableParams} The complete params object
+ *
+ * @example
+ * const params = resolveParams(el, { jsonUrl: '/api/rows.json', debug: true }, {});
+ * // → { debug: true, jsonUrl: '/api/rows.json', jsonDataField: 'data', data: null, cols: [], ... }
+ */
+export function resolveParams(el, config = null, projectDefaults = {}) {
+
+  const params = Object.fromEntries(
+    Object.keys(defaults).map(name => [
+      name,
+      getParam(el, config, projectDefaults, /** @type {keyof JsonTableParams} */ (name))
+    ])
+  );
+
+  return /** @type {JsonTableParams} */ (params);
+}

package/src/web-components/json-table/src/search.js

@@ -0,0 +1,71 @@
+/*! minimo - json-table: client-side search */
+
+/** @typedef {import('../json-table-component.js').JsonTable} JsonTable */
+/** @typedef {import('./parse-rows.js').ParsedRow} ParsedRow */
+
+/**
+ * Normalizes a search term: trimmed, lowercased, split into words (whitespace separated).
+ * @param {string|null|undefined} term
+ * @returns {string[]}
+ *
+ * @example
+ * searchWords('  Mario  Rossi '); // → ['mario', 'rossi']
+ * searchWords('');                // → []
+ */
+export function searchWords(term) {
+  return String(term ?? '').trim().toLowerCase().split(/\s+/).filter(Boolean);
+}
+
+
+/**
+ * Filters the parsed rows by a search term: every word of the term must be contained in the
+ * row `searchText` (precomputed by `parse-rows.js` from the searchable columns; case-insensitive).
+ * An empty term returns the original array.
+ *
+ * @param {ParsedRow[]} rows - Parsed rows
+ * @param {string} term - Search term
+ * @returns {ParsedRow[]}
+ *
+ * @example
+ * filterRows(state.rows, 'mario 2024'); // rows whose searchText contains both 'mario' and '2024'
+ * filterRows(state.rows, '');           // → state.rows
+ */
+export function filterRows(rows, term) {
+
+  const words = searchWords(term);
+
+  if (!words.length) {
+    return rows;
+  }
+
+  return rows.filter(parsed => words.every(word => parsed.searchText.includes(word)));
+}
+
+
+/**
+ * Attaches the `input` listener to the search input (`elements.searchInput`, when present):
+ * the search is executed through `jt.setSearch()` after `params.searchDebounce` milliseconds
+ * from the last keystroke. The pending timer id is stored in `jt._searchTimer` so that
+ * `destroy()` can clear it.
+ *
+ * @param {JsonTable} jt - The component instance
+ * @returns {void}
+ *
+ * @example
+ * setSearchListener(jt); // after mainBuilder(jt)
+ */
+export function setSearchListener(jt) {
+
+  const input = jt.elements.searchInput;
+
+  if (!input) {
+    return;
+  }
+
+  input.addEventListener('input', () => {
+    clearTimeout(jt._searchTimer);
+    jt._searchTimer = setTimeout(() => {
+      jt.setSearch(input.value);
+    }, Math.max(0, Number(jt.params.searchDebounce) || 0));
+  });
+}

package/src/web-components/json-table/src/sorting.js

@@ -0,0 +1,111 @@
+/*! minimo - json-table: client-side sorting */
+
+/** @typedef {import('./parse-rows.js').ParsedRow} ParsedRow */
+/** @typedef {'asc'|'desc'} SortDir */
+
+/**
+ * Whether a sort value counts as "empty" (sorted last in both directions).
+ * @param {*} value
+ * @returns {boolean}
+ */
+function isEmpty(value) {
+  return value == null || value === '' || (typeof value === 'number' && Number.isNaN(value));
+}
+
+/**
+ * Whether a value is a number or a numeric string.
+ * @param {*} value
+ * @returns {boolean}
+ */
+function isNumeric(value) {
+  if (typeof value === 'number') {
+    return !Number.isNaN(value);
+  }
+  return typeof value === 'string' && value.trim() !== '' && !Number.isNaN(Number(value));
+}
+
+
+/**
+ * Compares two sort values in ascending order: empty values (`null`, `undefined`, `''`, `NaN`)
+ * always last, numbers (and numeric strings, when both are numeric) numerically, booleans as
+ * 0/1, everything else as strings via `localeCompare` (numeric collation, accent/case insensitive).
+ *
+ * @param {*} a
+ * @param {*} b
+ * @param {string} [locale] - Locale used by `localeCompare` (default: browser default)
+ * @returns {number} Negative when `a` comes first, positive when `b` comes first, 0 when equal
+ *
+ * @example
+ * compareValues(2, 10);                  // → negative
+ * compareValues('file10', 'file2');      // → positive (numeric collation)
+ * compareValues('à', 'b', 'it-IT');      // → negative
+ * compareValues(null, 'a');              // → positive (empty values last)
+ */
+export function compareValues(a, b, locale) {
+
+  const emptyA = isEmpty(a);
+  const emptyB = isEmpty(b);
+
+  if (emptyA || emptyB) {
+    return emptyA === emptyB ? 0 : (emptyA ? 1 : -1);
+  }
+
+  if (typeof a === 'boolean' && typeof b === 'boolean') {
+    return Number(a) - Number(b);
+  }
+
+  if (isNumeric(a) && isNumeric(b)) {
+    return Number(a) - Number(b);
+  }
+
+  return String(a).localeCompare(String(b), locale, { numeric: true, sensitivity: 'base' });
+}
+
+
+/**
+ * Returns a sorted copy of the parsed rows, by the precomputed `sortValues[key]` of every row.
+ * The sort is stable, so rows with equal values keep their original order.
+ *
+ * @param {ParsedRow[]} rows - Parsed rows (see `parse-rows.js`)
+ * @param {string} key - Column key
+ * @param {SortDir} dir - Direction
+ * @param {string} [locale] - Locale used to compare strings
+ * @returns {ParsedRow[]} A new array
+ *
+ * @example
+ * sortRows(state.rows, 'amount', 'desc', 'it-IT');
+ */
+export function sortRows(rows, key, dir, locale) {
+
+  const sign = dir === 'desc' ? -1 : 1;
+
+  return [...rows].sort((a, b) => {
+    const va = a.sortValues[key];
+    const vb = b.sortValues[key];
+    const cmp = compareValues(va, vb, locale);
+    // empty values stay last regardless of the direction
+    return (isEmpty(va) || isEmpty(vb)) ? cmp : cmp * sign;
+  });
+}
+
+
+/**
+ * Next direction in the sort cycle of a column button: none → `asc` → `desc` → none.
+ *
+ * @param {SortDir|null|undefined} current - Current direction of the column (null = not sorted)
+ * @returns {SortDir|null}
+ *
+ * @example
+ * nextSortDir(null);   // → 'asc'
+ * nextSortDir('asc');  // → 'desc'
+ * nextSortDir('desc'); // → null
+ */
+export function nextSortDir(current) {
+  if (current === 'asc') {
+    return 'desc';
+  }
+  if (current === 'desc') {
+    return null;
+  }
+  return 'asc';
+}

package/src/web-components/json-table/src/table-body.js

@@ -0,0 +1,109 @@
+/*! minimo - json-table: tbody rendering */
+
+import * as styles from '../json-table-component.module.css';
+import { domBuilder } from '../../../utilities/dom-builder/dom-builder.js';
+import { classnames } from '../../../utilities/classnames.js';
+import { setContent, getNestedValue } from './content-utils.js';
+import { cellContent } from './cell-content.js';
+
+/** @typedef {import('../json-table-component.js').JsonTable} JsonTable */
+/** @typedef {import('./parse-rows.js').ParsedRow} ParsedRow */
+
+/**
+ * domBuilder item of a body row.
+ *
+ * Cells are created empty by domBuilder (tag, classes, attributes) and filled in the `<tr>`
+ * callback, so that the column `render` functions receive both the `tr` and the `td` elements.
+ * `trCallback` is invoked last.
+ *
+ * Generated structure:
+ * ```
+ * tr[data-jt-idx]
+ *   td[data-key][cellClass][internalCellClass]           ← cellContent()
+ *   th[scope=row][data-key]…                             ← when col.rowHeading is true
+ * ```
+ *
+ * @param {ParsedRow} parsed - Parsed row (see `parse-rows.js`)
+ * @param {JsonTable} jt - The component instance (`params`, `cols`)
+ * @returns {DomBuilderItem}
+ *
+ * @example
+ * domBuilder([rowItem(parsedRow, jt)], tbody);
+ */
+export function rowItem(parsed, jt) {
+
+  const { params, cols } = jt;
+  const row = parsed.row;
+
+  return {
+    tag: 'tr',
+    attrs: { 'data-jt-idx': parsed.idx },
+    children: cols.map(col => ({
+      tag: col.rowHeading ? 'th' : 'td',
+      className: classnames(
+        col.cellClass,
+        typeof col._type.internalCellClass === 'function'
+          ? col._type.internalCellClass(getNestedValue(row, col.key), row, params)
+          : null
+      ),
+      attrs: {
+        scope: col.rowHeading ? 'row' : null,
+        'data-key': col.key
+      }
+    })),
+    callback: el => {
+      const tr = /** @type {HTMLTableRowElement} */ (el);
+      const cells = tr.cells;
+
+      cols.forEach((col, i) => {
+        const td = cells[i];
+        setContent(td, cellContent(col, row, params, tr, td));
+      });
+
+      if (typeof params.trCallback === 'function') {
+        params.trCallback(tr, row, params);
+      }
+    }
+  };
+}
+
+
+/**
+ * Renders the rows of the current page (`state.pageRows`) inside `elements.tbody`, replacing
+ * the previous content. When there are no rows, a single cell spanning every column shows
+ * `labels.noResults` (search active) or `labels.noRows`.
+ *
+ * @param {JsonTable} jt - The component instance
+ * @returns {void}
+ *
+ * @example
+ * renderTbody(jt); // after `jt.state` has been updated
+ */
+export function renderTbody(jt) {
+
+  const { params, elements, state, cols } = jt;
+  const tbody = elements.tbody;
+
+  if (!tbody) {
+    return;
+  }
+
+  if (!state.pageRows.length) {
+    domBuilder([
+      {
+        tag: 'tr',
+        children: [
+          {
+            tag: 'td',
+            className: classnames(styles.empty, params.classes.empty),
+            attrs: { colspan: Math.max(cols.length, 1) },
+            content: state.searchTerm ? params.labels.noResults : params.labels.noRows
+          }
+        ]
+      }
+    ], tbody, { emptyParent: true });
+    return;
+  }
+
+  domBuilder(state.pageRows.map(parsed => rowItem(parsed, jt)), tbody, { emptyParent: true });
+}

package/src/web-components/json-table/src/table-builder.js

@@ -0,0 +1,152 @@
+/*! minimo - json-table: table part (table, caption and footer bar) */
+
+import * as styles from '../json-table-component.module.css';
+import { classnames } from '../../../utilities/classnames.js';
+import { theadPart } from './table-thead.js';
+
+/** @typedef {import('./defaults.js').JsonTableParams} JsonTableParams */
+/** @typedef {import('../json-table-component.js').JsonTable} JsonTable */
+/** @typedef {import('./main-builder.js').JsonTableElements} JsonTableElements */
+
+/** Counter used to generate unique caption ids */
+let captionUid = 0;
+
+/**
+ * Id of the caption element of a table (used by `aria-labelledby`): `<tableId>-caption`, or a
+ * generated unique id when `tableId` is not set.
+ *
+ * @param {JsonTableParams} params - Resolved params
+ * @returns {string}
+ *
+ * @example
+ * captionId({ ...params, tableId: 'users' }); // → 'users-caption'
+ * captionId(params);                          // → 'jt-1-caption'
+ */
+export function captionId(params) {
+  return params.tableId ? `${params.tableId}-caption` : `jt-${++captionUid}-caption`;
+}
+
+
+/**
+ * domBuilder item of the caption (template slot `caption`), rendered only when `params.caption`
+ * is set. It is a plain container placed below the table (footer bar) instead of a `<caption>`
+ * element: the table is linked to it through `aria-labelledby`, which gives the table the same
+ * accessible name a `<caption>` would.
+ *
+ * Generated structure: `div.caption[classes.caption]#<id>`; the element is stored in `elements.caption`.
+ *
+ * @param {JsonTable} jt - The component instance
+ * @param {JsonTableElements} elements - Object collecting the generated elements (mutated)
+ * @param {string} id - Id of the element (see `captionId`)
+ * @returns {DomBuilderItem}
+ *
+ * @example
+ * domBuilder([captionPart(jt, elements, 'users-caption')], host);
+ * elements.caption; // → HTMLElement (when params.caption is set)
+ */
+export function captionPart(jt, elements, id) {
+
+  const { params } = jt;
+
+  return {
+    id,
+    condition: params.caption != null,
+    className: classnames(styles.caption, params.classes.caption),
+    content: params.caption,
+    callback: el => { elements.caption = /** @type {HTMLElement} */ (el); }
+  };
+}
+
+
+/**
+ * domBuilder item of the footer bar below the table: caption (start side) and pagination (end
+ * side). Rendered only when `children` is not empty (see `mainBuilder`, which removes the parts
+ * placed elsewhere by the template).
+ *
+ * Generated structure: `div.tableFooter[classes.tableFooter] > [caption] [pagination]`; the element
+ * is stored in `elements.tableFooter`.
+ *
+ * @param {JsonTable} jt - The component instance
+ * @param {JsonTableElements} elements - Object collecting the generated elements (mutated)
+ * @param {DomBuilderItem[]} children - Footer parts (caption and/or pagination items)
+ * @returns {DomBuilderItem}
+ *
+ * @example
+ * const footer = tableFooterPart(jt, elements, [captionItem, paginationItem]);
+ * domBuilder([tablePart(jt, elements, footer)], host);
+ */
+export function tableFooterPart(jt, elements, children) {
+
+  const { params } = jt;
+
+  return {
+    condition: children.length > 0,
+    className: classnames(styles.tableFooter, params.classes.tableFooter),
+    children,
+    callback: el => { elements.tableFooter = /** @type {HTMLElement} */ (el); }
+  };
+}
+
+
+/**
+ * domBuilder item of the table (template slot `table`).
+ *
+ * Generated structure:
+ * ```
+ * div.tableWrapper[classes.tableWrapper]
+ *   table#tableId.table[classes.table][aria-labelledby=<caption id>]   (aria-labelledby if `caption`)
+ *     thead                     ← theadPart()
+ *     tbody                     ← filled by `renderTbody()`
+ *     tfoot                     (if `tfoot`) ← filled by `renderTfoot()`
+ * div.tableFooter               ← footerBar (caption + pagination), if given
+ * ```
+ *
+ * References to the generated elements are stored in `elements`
+ * (`tableWrapper`, `table`, `thead`, `tbody`, `tfoot`).
+ *
+ * @param {JsonTable} jt - The component instance (`params`, `cols`)
+ * @param {JsonTableElements} elements - Object collecting the generated elements (mutated)
+ * @param {DomBuilderItem|null} [footerBar=null] - Footer bar item (see `tableFooterPart`) (default: null)
+ * @param {string|null} [captionElId=null] - Id of the caption element, for `aria-labelledby` (default: null)
+ * @returns {DomBuilderItem} A `div` wrapping the table wrapper and the footer bar
+ *
+ * @example
+ * domBuilder([tablePart(jt, elements, footerBar, 'users-caption')], host);
+ * elements.tbody; // → HTMLTableSectionElement (empty until renderTbody() is called)
+ */
+export function tablePart(jt, elements, footerBar = null, captionElId = null) {
+
+  const { params } = jt;
+
+  return {
+    className: styles.tableOuter,
+    children: [
+      {
+        className: classnames(styles.tableWrapper, params.classes.tableWrapper),
+        callback: el => { elements.tableWrapper = /** @type {HTMLElement} */ (el); },
+        children: [
+          {
+            tag: 'table',
+            id: params.tableId,
+            className: classnames(styles.table, params.classes.table),
+            attrs: { 'aria-labelledby': params.caption != null ? captionElId : null },
+            callback: el => { elements.table = /** @type {HTMLTableElement} */ (el); },
+            children: [
+              theadPart(jt, elements),
+              {
+                tag: 'tbody',
+                callback: el => { elements.tbody = /** @type {HTMLTableSectionElement} */ (el); }
+              },
+              {
+                tag: 'tfoot',
+                condition: params.tfoot,
+                callback: el => { elements.tfoot = /** @type {HTMLTableSectionElement} */ (el); }
+              }
+            ]
+          }
+        ]
+      },
+      ...(footerBar ? [footerBar] : [])
+    ]
+  };
+}