Table

Use Table

Table is a named export of @flood-md/react. Connect the package once, then import what you use.

"use client";

import { FloodRoot, Table } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <Table caption="Projects">
        <thead><tr><th scope="col">Project</th><th scope="col" data-numeric>Members</th></tr></thead>
        <tbody><tr><th scope="row">Flood</th><td data-numeric>12</td></tr></tbody>
      </Table>
    </FloodRoot>
  );
}

Design notes

• Caption is required and remains the accessible table name with hideCaption. Supply table sections and correct native header/cell associations.
• Native table props, className/style and HTMLTableElement ref target the actual table. Set style.minWidth when horizontal overflow is preferable to compressed columns.
• Flood ScrollArea owns horizontal scrolling and keyboard access. scrollLabel can name its viewport independently; dir and hidden apply to the containing scroll area too.
• Use data-numeric on headers/cells for end alignment and tabular figures; data-align=start/center/end gives logical alignment. No automatic sorting, selection, pagination or data access.
• Striped and compact/comfortable density are opt-in presentation. Available in 0.2.4.

API reference