Function TableView

src/ui-react-inspector/TablesView.tsx:51–110

({
  tableId,
  store,
  storeId,
  s,
}: TableProps & {readonly storeId?: Id} & StoreProp)

);

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