HTML table

HTMLTable styles a native table element. Use it for small, static tables. For large or editable data, use the Table package.

Usage#

import { HTMLTable } from "@clawscale/react";

<HTMLTable compact striped>
  <thead>{/* header row */}</thead>
  <tbody>{/* data rows */}</tbody>
</HTMLTable>

Examples#

Basic#

Render thead and tbody as children. Right-align number columns and add the cs-numeric class: it switches to tabular figures, so digits line up.

Pipeline	Region	Rows	Errors
ingest-orders	us-east-1	1,204,331	0
enrich-customers	eu-west-1	88,412	3
export-ledger	us-east-1	14,602,118	0
train-forecast	ap-southeast-2	402,990	12

core/html-table/basic.tsx

import { HTMLTable } from "@clawscale/react";

const RUNS = [
  { pipeline: "ingest-orders", region: "us-east-1", rows: 1204331, errors: 0 },
  { pipeline: "enrich-customers", region: "eu-west-1", rows: 88412, errors: 3 },
  { pipeline: "export-ledger", region: "us-east-1", rows: 14602118, errors: 0 },
  { pipeline: "train-forecast", region: "ap-southeast-2", rows: 402990, errors: 12 },
];

export default function HtmlTableBasic() {
  return (
    <HTMLTable>
      <thead>
        <tr>
          <th>Pipeline</th>
          <th>Region</th>
          <th style={{ textAlign: "right" }}>Rows</th>
          <th style={{ textAlign: "right" }}>Errors</th>
        </tr>
      </thead>
      <tbody>
        {RUNS.map((run) => (
          <tr key={run.pipeline}>
            <td>{run.pipeline}</td>
            <td>{run.region}</td>
            <td className="cs-numeric" style={{ textAlign: "right" }}>
              {run.rows.toLocaleString("en-US")}
            </td>
            <td className="cs-numeric" style={{ textAlign: "right" }}>
              {run.errors}
            </td>
          </tr>
        ))}
      </tbody>
    </HTMLTable>
  );
}

Compact#

compact reduces the cell padding.

Pipeline	Region	Rows	Errors
ingest-orders	us-east-1	1,204,331	0
enrich-customers	eu-west-1	88,412	3
export-ledger	us-east-1	14,602,118	0
train-forecast	ap-southeast-2	402,990	12

core/html-table/compact.tsx

import { HTMLTable } from "@clawscale/react";

const RUNS = [
  { pipeline: "ingest-orders", region: "us-east-1", rows: 1204331, errors: 0 },
  { pipeline: "enrich-customers", region: "eu-west-1", rows: 88412, errors: 3 },
  { pipeline: "export-ledger", region: "us-east-1", rows: 14602118, errors: 0 },
  { pipeline: "train-forecast", region: "ap-southeast-2", rows: 402990, errors: 12 },
];

export default function HtmlTableCompact() {
  return (
    <HTMLTable compact>
      <thead>
        <tr>
          <th>Pipeline</th>
          <th>Region</th>
          <th style={{ textAlign: "right" }}>Rows</th>
          <th style={{ textAlign: "right" }}>Errors</th>
        </tr>
      </thead>
      <tbody>
        {RUNS.map((run) => (
          <tr key={run.pipeline}>
            <td>{run.pipeline}</td>
            <td>{run.region}</td>
            <td className="cs-numeric" style={{ textAlign: "right" }}>
              {run.rows.toLocaleString("en-US")}
            </td>
            <td className="cs-numeric" style={{ textAlign: "right" }}>
              {run.errors}
            </td>
          </tr>
        ))}
      </tbody>
    </HTMLTable>
  );
}

Striped#

striped shades every other row, which helps the eye follow long rows.

Pipeline	Region	Rows	Errors
ingest-orders	us-east-1	1,204,331	0
enrich-customers	eu-west-1	88,412	3
export-ledger	us-east-1	14,602,118	0
train-forecast	ap-southeast-2	402,990	12

core/html-table/striped.tsx

import { HTMLTable } from "@clawscale/react";

const RUNS = [
  { pipeline: "ingest-orders", region: "us-east-1", rows: 1204331, errors: 0 },
  { pipeline: "enrich-customers", region: "eu-west-1", rows: 88412, errors: 3 },
  { pipeline: "export-ledger", region: "us-east-1", rows: 14602118, errors: 0 },
  { pipeline: "train-forecast", region: "ap-southeast-2", rows: 402990, errors: 12 },
];

export default function HtmlTableStriped() {
  return (
    <HTMLTable striped>
      <thead>
        <tr>
          <th>Pipeline</th>
          <th>Region</th>
          <th style={{ textAlign: "right" }}>Rows</th>
          <th style={{ textAlign: "right" }}>Errors</th>
        </tr>
      </thead>
      <tbody>
        {RUNS.map((run) => (
          <tr key={run.pipeline}>
            <td>{run.pipeline}</td>
            <td>{run.region}</td>
            <td className="cs-numeric" style={{ textAlign: "right" }}>
              {run.rows.toLocaleString("en-US")}
            </td>
            <td className="cs-numeric" style={{ textAlign: "right" }}>
              {run.errors}
            </td>
          </tr>
        ))}
      </tbody>
    </HTMLTable>
  );
}

Bordered#

bordered adds lines between columns.

Pipeline	Region	Rows	Errors
ingest-orders	us-east-1	1,204,331	0
enrich-customers	eu-west-1	88,412	3
export-ledger	us-east-1	14,602,118	0
train-forecast	ap-southeast-2	402,990	12

core/html-table/bordered.tsx

import { HTMLTable } from "@clawscale/react";

const RUNS = [
  { pipeline: "ingest-orders", region: "us-east-1", rows: 1204331, errors: 0 },
  { pipeline: "enrich-customers", region: "eu-west-1", rows: 88412, errors: 3 },
  { pipeline: "export-ledger", region: "us-east-1", rows: 14602118, errors: 0 },
  { pipeline: "train-forecast", region: "ap-southeast-2", rows: 402990, errors: 12 },
];

export default function HtmlTableBordered() {
  return (
    <HTMLTable bordered>
      <thead>
        <tr>
          <th>Pipeline</th>
          <th>Region</th>
          <th style={{ textAlign: "right" }}>Rows</th>
          <th style={{ textAlign: "right" }}>Errors</th>
        </tr>
      </thead>
      <tbody>
        {RUNS.map((run) => (
          <tr key={run.pipeline}>
            <td>{run.pipeline}</td>
            <td>{run.region}</td>
            <td className="cs-numeric" style={{ textAlign: "right" }}>
              {run.rows.toLocaleString("en-US")}
            </td>
            <td className="cs-numeric" style={{ textAlign: "right" }}>
              {run.errors}
            </td>
          </tr>
        ))}
      </tbody>
    </HTMLTable>
  );
}

Interactive#

interactive highlights the row under the pointer. Use it when rows respond to clicks.

Pipeline	Region	Rows	Errors
ingest-orders	us-east-1	1,204,331	0
enrich-customers	eu-west-1	88,412	3
export-ledger	us-east-1	14,602,118	0
train-forecast	ap-southeast-2	402,990	12

core/html-table/interactive.tsx

import { HTMLTable } from "@clawscale/react";

const RUNS = [
  { pipeline: "ingest-orders", region: "us-east-1", rows: 1204331, errors: 0 },
  { pipeline: "enrich-customers", region: "eu-west-1", rows: 88412, errors: 3 },
  { pipeline: "export-ledger", region: "us-east-1", rows: 14602118, errors: 0 },
  { pipeline: "train-forecast", region: "ap-southeast-2", rows: 402990, errors: 12 },
];

export default function HtmlTableInteractive() {
  return (
    <HTMLTable interactive>
      <thead>
        <tr>
          <th>Pipeline</th>
          <th>Region</th>
          <th style={{ textAlign: "right" }}>Rows</th>
          <th style={{ textAlign: "right" }}>Errors</th>
        </tr>
      </thead>
      <tbody>
        {RUNS.map((run) => (
          <tr key={run.pipeline}>
            <td>{run.pipeline}</td>
            <td>{run.region}</td>
            <td className="cs-numeric" style={{ textAlign: "right" }}>
              {run.rows.toLocaleString("en-US")}
            </td>
            <td className="cs-numeric" style={{ textAlign: "right" }}>
              {run.errors}
            </td>
          </tr>
        ))}
      </tbody>
    </HTMLTable>
  );
}

Interactive playground#

Pipeline	Region	Rows
ingest-orders	us-east-1	1,204,331
enrich-customers	eu-west-1	88,412
export-ledger	us-east-1	14,602,118
train-forecast	ap-southeast-2	402,990

Props

BorderedCompactInteractiveStriped

View source on GitHub

Props interface#

HTMLTable also accepts the HTML attributes of a table.

interface HTMLTableProps extends React.TableHTMLAttributes<HTMLTableElement>, React.RefAttributes<HTMLTableElement>@clawscale/react

Props	Description
`bordered`	`boolean` Enable borders between rows and cells.
`compact`	`boolean` Use compact appearance with less padding.
`interactive`	`boolean` Enable hover styles on rows.
`striped`	`boolean` Use an alternate background color on odd-numbered rows.