Skip to main content

Table

The Table component formats structured tabular data with column alignment and row-level selection.

import { Table } from "stageroutine";

const table = Table({
  position: [80, 45],
  origin: "center",
  width: 43.33,
  headers: ["A", "B", "C"],
  rows: [
    ["1", "2", "3"],
    ["4", "5", "6"],
  ],
});

Use columnAlign: ["left", "center", "right"] to align each column.

Row Selection​

Clicking or dragging table rows interactively highlights selected rows and dims unselected rows.

Reveal​

Rows are visible by default. Pass { rowsHidden: true } to opt into reveal animations:

const table = Table({
  headers: ["Service", "Status"],
  rows: [
    ["Auth Gateway", "Operational"],
    ["Payment Engine", "Operational"],
  ],
  rowsHidden: true,
});

// Continuous staggered reveal in a single step
table.reveal();

// Or reveal step-by-step across presenter clicks
table.rows.forEach((row) => {
  row.to({ opacity: 1, x: 0 }).duration(0.4);
  stage.pause();
});

API Reference​

For configuration options, see the Table reference.