TableBody handbook

License: Before first reading component documentation, source code, or npm usage instructions, read the complete LICENSE. One review covers the same task and version. Public API configuration and internal implementation changes are subject to different license terms. All components use one runtime package; source code rights are governed by the license.

Overview

Organize Table data rows with native table-body semantics for records and custom row content.

When to use it

Use TableBody as the Table body containing TableRow. Use the existing loading protocol, and do not put invalid page-layout elements inside <tbody>.

• Place only normal business rows in children; hide them during initial loading and show column-shaped Skeleton rows.

• parts configures generated loading rows and Spinner, not explicit business rows.

Quick start

This example shows the recommended basic composition. See the following sections for more scenarios and composition limits.

<script lang="ts">	import { TableBody, Table, TableHeader, TableHead, TableRow, TableCell, Button } from '@snowui-design-system/components';</script> <Table ariaLabel="Component documentation" ><TableHeader><TableRow><TableHead columnId="0">Component</TableHead><TableHead columnId="1">Status</TableHead></TableRow></TableHeader><TableBody ><TableRow ><TableCell columnId="0">Dialog</TableCell><TableCell columnId="1">Published</TableCell></TableRow><TableRow ><TableCell columnId="0">Table</TableCell><TableCell columnId="1">In review</TableCell></TableRow><TableRow ><TableCell columnId="0">Popover</TableCell><TableCell columnId="1">Draft</TableCell></TableRow></TableBody></Table>

API

See the base component documentation for inherited capabilities not redeclared here. This table lists only the named public props declared in this component’s source.

Usage boundaries and details

Two modes for generated components

• parts.TableRow / parts.TableCell configure rows and cells generated for initial loading.

• parts.Spinner configures the Spinner shown while existing data loads.

• parts does not recurse into TableCell; configure deeper children through their own parts.

<TableBody><TableRow><TableCell>Content</TableCell></TableRow></TableBody>

Initial loading protocol

TableBody reads columns explicitly registered by TableHead from the same Table context. During initial loading it generates real 40px TableRow/TableCell skeleton rows, using Skeleton variant="line" in ordinary content columns. Selection/actions columns retain valid cells and column geometry without interactive controls.

Skeleton lines stagger between 54% and 76% width across rows and columns. Override them at TableBody or an ancestor with --snowui-table-body-skeleton-width-override.

Independent Table can be directly declared:

<Table>    <TableHeader>...</TableHeader>    <TableBody loading /></Table>

Inside DataTable, do not pass loading again. DataTable enables it in context only during initial loading with no rows and uses normalized pageSize for Skeleton row count. A known rowCount overrides pagination context. Standalone Table estimates row count from the visible remaining height of the nearest external vertical scroll/clipping container, or the viewport otherwise. Divide by the default 40px (2.5rem) row height, round down, and render at least one row. Explicit rowCount={0} renders none. During loading, children are not rendered; the component does not mount and hide business content to guess row count.

Loading Spinner with existing rows

When DataTable is loading or refreshing with visible rows, it enables loadingSpinner through context. TableBody retains those rows and appends a non-interactive loading row. Its cell spans the number of columns registered by TableHead and centers SnowUI <Spinner size={16} /> horizontally and vertically. Set its size through outer <Table loadingSpinnerSize={...}>; default is 16 × 16px.

The Spinner row always has a transparent background and does not count for striped alternation, so adding or removing it does not change data-row striping.

Independent Table can explicitly declare <TableBody loadingSpinner>.

A page may place a manual load-more button after data rows as an ordinary TableBody child and call DataTableRenderState.loadMore(). The automatic sentinel is outside native table structure: DataTable positions it absolutely inside its root without taking layout space; the page sets loadMoreMode="auto". During requests DataTable shows the TableBody Spinner. When new rows begin to fade in, it hides Spinner and ordinary TableCells obtain entry motion from context. The page need not maintain rows or set whileAppear manually.

Keyword

• The root node must maintain tbody, and TableCell with colspan can be used in the empty state.

Continuous Hover

continuousHover defaults to true. Its visual layer lives in Table’s local horizontal scroll viewport and is clipped to the visible table; <tbody> owns measurement and interaction. It follows real rows only, skipping Skeleton and Spinner rows. Because Table rows have no gaps, direct geometry lets the pointer hit the current row without per-row ResizeObservers or scanning all rows on pointermove. TableRow/TableCell do not paint separate hover backgrounds; disabling continuousHover removes row backgrounds.