Display and feedback

Table

Accessible responsive data table with explicit surfaces, density, and striped rows.

Live example

Package	Adapter	Status
CSS	Native	Ready
React	React 19	Ready
Svelte	Svelte 5	Ready

Package	Adapter	Status
CSS	Native	Ready
React	React 19	Ready
Svelte	Svelte 5	Ready

Usage

Each example includes the complete adapter-specific parameter reference. Copy it as a starting point, then remove options your use case does not need.

React

import { Table } from "@cofob/design-system-react";

/**
 * Complete Table parameter reference.
 * @param label
 *   type: string | renderable content
 *   required
 *   example: "Accessible label"
 * @param caption
 *   type: string | renderable content
 *   default: —
 *   example: "Build results by package"
 * @param density
 *   type: "comfortable" | "compact"
 *   default: "comfortable"
 *   example: "compact"
 * @param headerTone
 *   type: "strong" | "muted"
 *   default: "strong"
 *   example: "muted"
 * @param striped
 *   type: boolean
 *   default: true
 *   example: true
 * @param minWidth
 *   type: CSS length
 *   default: "36rem"
 *   example: "48rem"
 * @param containerClassName/containerClass
 *   type: string
 *   default: —
 *   example: "docs-table-shell"
 * @param children
 *   type: ReactNode | Svelte Snippet | child HTML
 *   default: —
 *   example: children / snippet / child HTML
 * @param table attributes
 *   type: native element attributes
 *   default: —
 *   example: class / style / aria-* / data-*
 */
export function TableExample() {
  return (
    <Table label="Package comparison"><thead>…</thead><tbody>…</tbody></Table>
  );
}

Svelte

<script lang="ts">
  import { Table } from "@cofob/design-system-svelte";

  // Complete Table parameter reference.
  // label
  //   type: string | renderable content
  //   required
  //   example: "Accessible label"
  // caption
  //   type: string | renderable content
  //   default: —
  //   example: "Build results by package"
  // density
  //   type: "comfortable" | "compact"
  //   default: "comfortable"
  //   example: "compact"
  // headerTone
  //   type: "strong" | "muted"
  //   default: "strong"
  //   example: "muted"
  // striped
  //   type: boolean
  //   default: true
  //   example: true
  // minWidth
  //   type: CSS length
  //   default: "36rem"
  //   example: "48rem"
  // containerClassName/containerClass
  //   type: string
  //   default: —
  //   example: "docs-table-shell"
  // children
  //   type: ReactNode | Svelte Snippet | child HTML
  //   default: —
  //   example: children / snippet / child HTML
  // table attributes
  //   type: native element attributes
  //   default: —
  //   example: class / style / aria-* / data-*
</script>

<Table label="Package comparison"><thead>…</thead><tbody>…</tbody></Table>

HTML

<!--
  Complete Table parameter reference.
  label
    type: string | renderable content
    required
    example: "Accessible label"
  caption
    type: string | renderable content
    default: —
    example: "Build results by package"
  density
    type: "comfortable" | "compact"
    default: "comfortable"
    example: "compact"
  headerTone
    type: "strong" | "muted"
    default: "strong"
    example: "muted"
  striped
    type: boolean
    default: true
    example: true
  minWidth
    type: CSS length
    default: "36rem"
    example: "48rem"
  containerClassName/containerClass
    type: string
    default: —
    example: "docs-table-shell"
  children
    type: ReactNode | Svelte Snippet | child HTML
    default: —
    example: children / snippet / child HTML
  table attributes
    type: native element attributes
    default: —
    example: class / style / aria-* / data-*
-->
<div class="cf-table-container" role="region" aria-label="Package comparison" tabindex="0"><table class="cf-table" data-header-tone="strong" data-striped="true"><thead>…</thead><tbody>…</tbody></table></div>

Contract

CSS selector	`.cf-table`
Adapters	Native · React · Svelte
Primary props	label · caption · density · headerTone · striped · minWidth · containerClassName/containerClass · children · table attributes
Documented states	comfortable · compact · strong/muted header · striped · horizontal overflow · focus-visible
Interaction	Static and SSR-safe
Theme	Semantic light and dark tokens

Composition

Native attributes and framework props are forwarded. Add custom classes without replacing the semantic contract.

Parameters

Adapter differences are explicit. Native element attributes are forwarded in React and Svelte and can be written directly in HTML.

Parameter	Type	Default	Adapters	Example	Description
`label`required	`string \| renderable content`	`required`	React · Svelte · HTML	`"Accessible label"`	Visible or accessible name, depending on the component.
`caption`	`string \| renderable content`	`—`	React · Svelte · HTML	`"Build results by package"`	Visible caption for a figure or table.
`density`	`"comfortable" \| "compact"`	`"comfortable"`	React · Svelte · HTML	`"compact"`	Controls table cell and caption padding.
`headerTone`	`"strong" \| "muted"`	`"strong"`	React · Svelte · HTML	`"muted"`	Chooses a high-contrast dark or quiet muted column-header surface.
`striped`	`boolean`	`true`	React · Svelte · HTML	`true`	Adds a subtle semantic surface to alternating body rows.
`minWidth`	`CSS length`	`"36rem"`	React · Svelte · HTML	`"48rem"`	Sets the table width before the labelled container begins horizontal scrolling.
`containerClassName/containerClass`	`string`	`—`	React · Svelte · HTML	`"docs-table-shell"`	Adds a class to the labelled scroll container.
`children`	`ReactNode \| Svelte Snippet \| child HTML`	`—`	React · Svelte · HTML	`children / snippet / child HTML`	Idiomatic adapter composition content.
`table attributes`	`native element attributes`	`—`	React · Svelte · HTML	`class / style / aria-* / data-*`	Forwards native class/style, accessibility, event, and data attributes to the root element.