Function TableView

src/ui-solid-inspector/index.tsx:626–694

(props: TableProps & {readonly storeId?: Id} & StoreProp)

};

const TableView = (props: TableProps & {readonly storeId?: Id} & StoreProp) => {
  const uniqueId = getUniqueId('t', props.storeId, props.tableId);
  const sort = useCell(STATE_TABLE, uniqueId, SORT_CELL, props.s);
  const handleChange = useSetCellCallback(
    STATE_TABLE,
    uniqueId,
    SORT_CELL,
    jsonStringWithMap,
    props.s,
  );
  const [editable, handleEditable] = useEditable(uniqueId, props.s);
  const cellIds = useTableCellIds(props.tableId, props.store);
  return Details({
    uniqueId,
    title: TABLE + ': ' + props.tableId,
    editable,
    handleEditable,
    s: props.s,
    get children() {
      const [cellId, descending, offset] = jsonParse(
        (sort() as string) ?? '[]',
      );
      return (
        <>
          <SortedTableInHtmlTable
            tableId={props.tableId}
            store={props.store}
            cellId={cellId}
            descending={descending}
            offset={offset}
            limit={10}
            paginator={true}
            sortOnClick={true}
            onChange={handleChange}
            editable={editable()}
            extraCellsAfter={
              (() => (editable() ? rowActions : [])) as unknown as []
            }
            customCells={
              (() => {
                const CellComponent = editable()
                  ? EditableCellViewWithActions
                  : CellView;
                return objNew(
                  arrayMap(cellIds(), (cellId) => [
                    cellId,
                    {label: cellId, component: CellComponent},
                  ]),
                );
              }) as unknown as {[cellId: Id]: CustomCell}
            }
          />
          {editable() ? (
            <div class="actions">
              <div>
                <TableActions1 tableId={props.tableId} store={props.store} />
              </div>
              <div>