Function HtmlTable

src/ui-solid-dom/common/components.tsx:73–144

(
  props: HtmlTableProps & {
    readonly params: HtmlTableParams;
  },
)

};

export const HtmlTable = (
  props: HtmlTableProps & {
    readonly params: HtmlTableParams;
  },
) => {
  const content = () => {
    const [
      cells,
      cellComponentProps,
      rowIds,
      extraCellsBefore,
      extraCellsAfter,
      sortAndOffset,
      handleSort,
      paginatorComponent,
    ] = props.params;
    const sort: SortAndOffset | [] =
      sortAndOffset == null ? [] : getValue(sortAndOffset);
    const paginator = getValue(paginatorComponent);
    return (
      <table class={props.className}>
        {paginator ? <caption>{paginator}</caption> : null}
        {props.headerRow === false ? null : (
          <thead>
            <tr>
              {extraHeaders(extraCellsBefore)}
              {props.idColumn === false
                ? null
                : HtmlHeaderCell({sort, label: 'Id', onClick: handleSort})}
              {objToArray(getValue(cells), ({label}, cellId) =>
                HtmlHeaderCell({
                  cellId,
                  label,
                  sort,
                  onClick: handleSort,
                }),
              )}
              {extraHeaders(extraCellsAfter)}
            </tr>
          </thead>
        )}
        <tbody>
          {arrayMap(getValue(rowIds), (rowId) => {
            const rowProps = {...(cellComponentProps as any), rowId};
            return (
              <tr>
                {extraRowCells(extraCellsBefore, rowProps)}
                {isFalse(props.idColumn) ? null : (
                  <th title={rowId}>{rowId}</th>
                )}
                {objToArray(
                  getValue(cells),
                  ({component: CellView, getComponentProps}, cellId) => (
                    <td>
                      <CellView
                        {...getProps(getComponentProps, rowId, cellId)}
                        {...rowProps}
                        cellId={cellId}