TableHead

Define a Table column heading with optional sorting and resizing.

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 TableHead for a title cell in a table header row. DataTable coordinates data sorting. Column resizing and data sorting are independent capabilities; resizable does not imply sortable.

columnId aligns the column, resizable controls width adjustment, and separate sortDirection and onSortChange express sort state.
The selection role uses the DataTable select-all control. parts configures generated Indicator and Checkbox components; configure an explicit title yourself.

Import

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

Usage

Alignment

Resizable

API Reference

Property	Type	Default	Example	Description
`responsiveHide`	`boolean`	`true`	`responsiveHide`	Allow this ordinary column to hide automatically when horizontal scrolling is off. false always keeps it. The first ordinary column and role columns do not hide.
`columnId`	`string`	`—`	`columnId="Example"`	Stable column identifier. Role columns use built-in identifiers; required for an ordinary column.
`label`	`string`	`—`	`label="Example"`	Readable column name for the TableToolbar sorting list and column-width handle. Without it, the list falls back to columnId while the handle uses a localized generic name and never announces the internal ID.
`sortDirection`	`"ascending" \| "descending"`	`—`	`sortDirection="ascending"`	Independently controlled sort direction. Defaults to context-derived state.
`defaultSort`	`"ascending" \| "descending"`	`—`	`defaultSort="ascending"`	Declare ascending or descending sorting of this column as the table default; also makes this column sortable.
`defaultSortActive`	`boolean`	`false`	`defaultSortActive`	Show the defaultSort direction as active with an icon and extend the interaction cycle so sorting can be cleared.
`roleLayout`	`TableRoleLayout`	`—`	`roleLayout={value}`	Override role-column layout for this role header. Ignored by ordinary headers. Defaults to Table context.
`onSortChange`	`(direction: "ascending" \| "descending" \| undefined) => void`	`—`	`onSortChange={(value) => { /* handle value */ }}`	Three-state sorting callback for independent use.
`resizable`	`boolean`	`—`	`resizable`	Show the column-width handle. An explicit setting takes priority over context. Defaults to false in Table and true in DataTable.
`minWidth`	`number`	`64`	`minWidth={42}`	Lower bound for column width adjustment in CSS pixels. Applies only when resizing is enabled.
`maxWidth`	`number`	`Infinity`	`maxWidth={42}`	Upper bound for column width adjustment in CSS pixels. Infinity by default, meaning no additional limit.
`align`	`"start" \| "center" \| "end"`	`"start"`	`align="start"`	Header content alignment: start, center, or end. Does not change data sorting.
`children`	`Snippet`	`—`	`<TableHead>Content</TableHead>`	Header title content with no parameters, including text, Icon, resource icons, or composed components. When sortable it sits in the built-in sort Button; selection-role content is handled by the built-in select-all control.
`parts`	`ComponentPartsOf<{ Indicator: typeof Indicator; Checkbox: typeof Checkbox; }>`	`—`	`parts={partsOptions}`	Configure the built-in resize Indicator and select-all Checkbox, not explicit child content.