TableCell

Display text, components, or custom content in a Table cell, truncating long content by default.

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 TableCell as a data cell in TableRow. Selection and action column roles apply only in a DataTable with those capabilities enabled. Explicit content replaces the default content for that cell.

Place it inside TableRow and use columnId to align columns. lines and tooltip control long-content display.
DataTable enables selection and action columns. Explicit children in an actions cell replace the default actions.

Import

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

Usage

Alignment

Composition

Wrapping

API Reference

Property	Type	Default	Example	Description
`columnId`	`string`	`—`	`columnId="Example"`	Column identity shared with the header for width alignment.
`lines`	`false \| 1 \| 2 \| 3`	`1`	`lines={value}`	Number of lines before truncation; false disables truncation.
`tooltip`	`TooltipProp`	`true`	`tooltip={value}`	Show full content or a custom hint after overflow.
`onTruncate`	`(isTruncated: boolean) => void`	`—`	`onTruncate={(value) => { /* handle value */ }}`	Callback when actual overflow state changes.
`align`	`"start" \| "center" \| "end"`	`"start"`	`align="start"`	Content alignment; defaults to start.
`roleLayout`	`TableRoleLayout`	`—`	`roleLayout={value}`	Override role-column layout for this role cell. Ignored by ordinary cells. Defaults to Table context.
`nowrap`	`boolean`	`—`	`nowrap`	Prevent text wrapping. With row, also prevent flex children from wrapping. Defaults to true, except for lines=2 or 3.
`singleLine`	`boolean`	`false`	`singleLine`	Apply the shared single-line contract to internal content while retaining native td layout. Enable row, nowrap, one line and at least 4 CSS px spacing. Use Text lines=1 for shrinkable labels and full-text hints.
`skeleton`	`boolean`	`false`	`skeleton`	Internal TableBody Skeleton-row protocol. Render a noninteractive placeholder and disable truncation.
`children`	`Snippet`	`—`	`<TableCell>Content</TableCell>`	Cell content with no parameters. Explicit children replace default actions in an actions role; DataTable still owns selection-role behavior.
`parts`	`ComponentPartsOf<{ Tooltip: typeof Tooltip; Checkbox: typeof Checkbox; }>`	`—`	`parts={partsOptions}`	Configure the built-in truncation Tooltip and selection Checkbox, only for default instances owned by this cell.