Table

Status: Experimental

Table provides native table structure, Frasto density, structural row dividers, alignment hooks, and a narrow overflow boundary. It works independently and may also support higher-level data compositions in the future.

Preview

Customer accounts

Customer	Company	Status	Balance
Maya Chen	Northstar Goods	Active	$12,480
Arman Yusuf	Common Supply	Review	$8,240
Elena Rossi with a deliberately long account name	Studio Porto International	Invited	$920

Usage

---
import { Status, Table } from '@freightpx/frasto';
---

<Table caption="Customers" minWidth="42rem">
  <thead>
    <tr>
      <th scope="col">Customer</th>
      <th scope="col">Status</th>
      <th scope="col" class="frasto-number">Balance</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Maya Chen</th>
      <td><Status tone="positive">Active</Status></td>
      <td class="frasto-number">$12,480</td>
    </tr>
  </tbody>
</Table>

Responsibilities

Table owns	Application owns
native table element and caption position	records and column definitions
structural header and row styling	sorting state and execution
compact/default density	selection state and scope
numeric alignment hooks	pagination and URL state
horizontal overflow container	loading, empty, partial, and error orchestration
fixed or automatic table layout	fetching, mutation, persistence, and permissions

Table never accepts rows, columns, an endpoint, or callbacks for data operations. Authors provide native thead, tbody, tr, th, and td content directly.

API

Prop	Type	Default	Purpose
caption	string	—	visible native caption text
captionHidden	boolean	false	visually hides the caption while preserving its accessible name
captionClass	string	—	styles the caption
density	"compact" | "default"	"default"	controls cell block padding
layout	"auto" | "fixed"	"auto"	chooses the native table layout algorithm
minWidth	string	—	establishes intentional horizontal overflow
class	string	—	styles the table element
containerClass	string	—	styles the overflow container

The default slot accepts native table sections and rows. Native table attributes pass through to the table element. Use captionHidden when a visible caption would repeat clear nearby context; omitting an accessible name is appropriate only when nearby context already identifies the table unambiguously.

minWidth is applied through the overflow container, so a consumer-authored native style attribute remains untouched on the table.

Markup structure

<Table caption="Customers" minWidth="42rem">
  <thead>
    <tr>
      <th scope="col">Customer</th>
      <th scope="col">Status</th>
      <th scope="col" class="frasto-number">Balance</th>
    </tr>
  </thead>
  <tbody>
    <!-- application-authored rows -->
  </tbody>
</Table>

• Prefer column and row headers with explicit scope where relationships benefit from it.
• Use native table semantics only for genuinely tabular information.
• Rows use continuous structural dividers; they do not become separated cards.
• Numeric, date, and identifier cells may use Frasto’s tabular-number hooks.
• Row actions need record-specific accessible names.

Responsive and long-content behavior

The default narrow strategy is horizontal scrolling around the table, not changing table descendants into invalid display roles. Authors set a meaningful minWidth when columns cannot compress safely. Wrapping, truncation, priority columns, and access to full values remain deliberate application decisions.

Data states

• compact and default density
• short, long, empty, partial, and loading bodies
• numeric and text alignment
• long headings and localized values
• keyboard access to interactive cells
• narrow horizontal overflow
• light and dark themes

Best practices

• Write the caption for assistive technology first; hide it visually only when nearby context already supplies the same name.
• Use scope="col" and scope="row" to keep header relationships explicit.
• Apply frasto-number to numeric headers and cells for end alignment and tabular figures.
• Choose fixed layout only when the application also controls intentional column widths and overflow.
• Put loading, empty, partial, and error messaging in authored table content or a higher-level composition; Table does not infer those states.