Table

@clawscale/react/table renders interactive, spreadsheet-like tables for large datasets. For a static table, use HTML table.

Usage#

import { Cell, Column, Table } from "@clawscale/react/table";

The styles ship in @clawscale/react/styles.css. There is no extra stylesheet to load.

Examples#

Basic#

The table stores no data. Set numRows, then give each Column a cellRenderer that returns a Cell for a row index. intent colors a cell.

table/overview/basic.tsx

import { Cell, Column, Table } from "@clawscale/react/table";
import { formatDuration, formatRows, RUNS, STATUS_INTENT } from "../_data";

const numeric = { textAlign: "right" } as const;

export default function TableBasic() {
  return (
    <div style={{ height: 300 }}>
      <Table numRows={RUNS.length}>
        <Column name="Pipeline" cellRenderer={(row) => <Cell>{RUNS[row]?.pipeline}</Cell>} />
        <Column
          name="Status"
          cellRenderer={(row) => {
            const status = RUNS[row]?.status;
            return <Cell intent={status && STATUS_INTENT[status]}>{status}</Cell>;
          }}
        />
        <Column name="Rows" cellRenderer={(row) => <Cell style={numeric}>{formatRows(RUNS[row]?.rows)}</Cell>} />
        <Column
          name="Duration"
          cellRenderer={(row) => <Cell style={numeric}>{formatDuration(RUNS[row]?.duration)}</Cell>}
        />
      </Table>
    </div>
  );
}

Tabular numbers#

Clawscale turns on tabular numbers in every table, so each digit takes the same width. Right-align numeric cells, like Rows and Duration above, and digits line up by place value.

Sizing#

The table fills the height of its container and measures it after mount. Give the container a height, either fixed or from a flex or grid layout. Only the cells in view render, so large row counts stay fast.

Features#

The API page lists the props of every component.