Table

Display structured data in a semantic table with adaptive columns, local horizontal scrolling, and loading states.

We are building SnowUI components into interfaces people can use directly in AI conversations. Conversational UI is still in development; this page demonstrates website usage. Supported chat platforms and component versions will be announced after verification. Generating and using SnowUI interfaces inside AI conversations is completely free. It is not a project, uses no project or developer-seat quota, and requires no SnowUI registration, activation, or paid proof.

How to use

Use Table to display structured data with TableHeader, TableBody, TableRow, TableHead, and TableCell. When searching, sorting, selection, action columns, or pagination are needed, let DataTable coordinate them rather than duplicating data management around Table.

Preserve valid table hierarchy with TableHeader, TableBody, TableRow, and related components.
columnWidths stores widths and columnId aligns a column across rows. Leave querying, selection, and pagination to DataTable.

Import

import { Table } from '@snowui-design-system/components';

Usage

Column widths

Loading

API Reference

Property	Type	Default	Example	Description
`columnWidths`	`Record<string, number>`	`{}`	`columnWidths={columnWidthsOptions}`	Controlled column widths; supports bind:columnWidths.
`horizontalScroll`	`boolean`	`—`	`horizontalScroll`	Keep all columns and scroll horizontally by default. When false, hide eligible columns from right to left first, then scroll if the remaining columns still overflow.
`roleLayout`	`TableRoleLayout`	`—`	`roleLayout={value}`	auto chooses between a persistent column and a hover overlay according to available space. Explicit column or overlay fixes the layout.
`minWidth`	`number \| string`	`—`	`minWidth="Example"`	Explicitly increase table minimum width. Without it, minimum width is derived from each column’s min-content plus Cell padding. Overflow stays inside Table’s local horizontal viewport.
`ariaLabel`	`string`	`—`	`ariaLabel="Example"`	Business accessible name for the table, kept as supplied. The horizontal scroll region adds a localized scroll hint; without a name, it uses a localized generic label.
`loadingSpinnerSize`	`ResourceSize`	`16`	`loadingSpinnerSize={value}`	Size of the centered Spinner at the end of the body when more data loads while existing data stays visible.
`onColumnWidthsChange`	`(widths: Record<string, number>) => void`	`—`	`onColumnWidthsChange={(value) => { /* handle value */ }}`	Complete column-width snapshot after a drag.
`children`	`Snippet`	`—`	`<Table>Content</Table>`	Semantic table content with no parameters. Compose TableHeader and TableBody; an outer DataTable provides data management.