Pricing

TableHeader handbook

v1.1.0 · @snowui-design-system/components

License: Before reading component documentation, source, or npm usage instructions for the first time, read the full LICENSE. Reuse that review for the same task and version. Public API configuration and internal implementation changes have different license implications. All components use the unified runtime package; source rights remain governed by the license.

Overview

Organize the header row of a Table, identify each column, and retain native table header semantics.

When to use it

Use as the Table header region, containing a header TableRow and TableHead cells. Preserve native table semantics.

  • Place inside Table and use TableRow to organize TableHead cells.

  • This component provides only header-region semantics. Configure sorting, column width, and selection through the corresponding TableHead and DataTable.

Quick start

This example shows the recommended basic composition. See the sections below for more cases and composition limits.

<script lang="ts">	import { TableHeader, Table, TableBody, TableCell, TableRow, TableHead } from '@snowui-design-system/components';</script> <Table ariaLabel="SnowUI component catalog columns" minWidth={680}>	<TableHeader><TableRow>		<TableHead columnId="component">Component</TableHead>		<TableHead columnId="package">Package</TableHead>		<TableHead columnId="category">Category</TableHead>		<TableHead columnId="updated">Last updated</TableHead>		<TableHead columnId="status" align="end">Documentation</TableHead>	</TableRow></TableHeader>	<TableBody><TableRow rowId="button"><TableCell columnId="component">Button</TableCell><TableCell columnId="package">components</TableCell><TableCell columnId="category">Basic</TableCell><TableCell columnId="updated">Today</TableCell><TableCell columnId="status" align="end">Published</TableCell></TableRow></TableBody></Table>

API

Keyword Type Default Description
children Snippet — Header-row content with no arguments. Compose TableRow and TableHead while preserving thead semantics.

See the base component documentation for inherited capabilities not redeclared here. This table lists only named public Props declared by this component.

Usage boundaries and details

Keyword

Keyword Description
component Current public component contract

  • The root element must remain thead.

TableHeader style overrides

Read the full LICENSE first; reuse that review for the same task, version, and scope.

First use public component Props to match the desired appearance, preserving the existing look where possible. If changes are necessary, follow the style selection and override order: use your own class (including Tailwind already in the project) or an instance style. The names below are public overrides actually consumed by source; check their scope and do not modify private DOM. Choose the correct SnowUI token family. External apps need not install SnowUI website utilities.

This component source does not directly consume a registered component-specific override. Style composed children through public parts or an explicit child; do not guess variable names.

Design guide · Tokens · Composition boundaries

TableHeader types and state

Required Props: no named required Props.

Bindable Props: this component declares no named two-way binding; handle state updates through public callbacks or its host.

Inheritance: Omit<FrameProps, "children">. Consult the base class public documentation; fields excluded by Omit cannot be passed through unchanged.

Shared Frame API · Back to API

The following type declarations are actually referenced by public Props and come from source. A Svelte Snippet denotes a content fragment; ComponentProps denotes the Props of the corresponding component.