Lily Design System™

Table Body

TableBody is a headless component that renders a <tbody> element within a table. It groups the main data rows of the table.

Use this component within a Table to define the body section containing data rows.

Example

Data
Show demo markup 
<tbody class="table-body"><tr class="table-row"><td class="table-td">Data</td></tr></tbody>
Usage example 
<Table label="Users">
  <TableBody>
    <TableRow>
      <TableTD>Alice</TableTD>
      <TableTD>alice@example.com</TableTD>
    </TableRow>
  </TableBody>
</Table>
Show Svelte source 
// In your Svelte component:
import TableBody from "lily-design-system-svelte-headless/components/TableBody/TableBody.svelte";

<TableBody>
  <!-- TableBody content -->
</TableBody>

Usage

<Table label="Users">
  <TableBody>
    <TableRow>
      <TableTD>Alice</TableTD>
      <TableTD>alice@example.com</TableTD>
    </TableRow>
  </TableBody>
</Table>

Props

  • className: string (default: "") -- CSS class name for the body group
  • children: slot (required) -- data rows, typically TableRow components
  • ...restProps: unknown -- additional attributes spread onto the <tbody> element

Keyboard Interactions

Standard table keyboard interactions.

ARIA

No additional ARIA attributes. Body semantics are provided by the <tbody> element.

When to Use

  • Use inside Table to wrap the data rows that contain the main table content
  • Use to separate data rows from header rows (TableHead) and footer rows (TableFoot)
  • Use to enable screen readers to distinguish between header and data sections

When Not to Use

  • Do not use outside of a Table -- use DataTableBody for DataTable or CalendarTableBody for CalendarTable
  • Do not use for header rows -- use TableHead instead

Headless

This headless component renders a <tbody> element. The consumer provides all visual styling.

Styles

The consumer provides all CSS styling. The component renders with a .table-body class for targeting.

Testing

  • Verify the component renders a <tbody> element
  • Verify children content is rendered
  • Verify pass-through attributes are applied

Composition

TableBody is a child of Table, following the Table pattern: Table > TableHead/TableBody/TableFoot > TableRow > TableTD.

Related components

  • table — a table with rows and columns <table>
  • table-foot — a table interactive grid tfoot <tfoot>
  • table-head — a table interactive grid thead <thead>
  • table-row — a table interactive grid row <tr>
  • table-td — a table interactive grid data cell <td>
  • table-th — a table interactive grid column <th>

References

  • MDN tbody element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody

Implementation Notes

  • Renders a <tbody> element for table body group semantics
  • Accepts className for CSS class targeting
  • Spreads restProps onto the <tbody> element for consumer customization

Canonical contract

Generated from this component's canonical metadata — the machine-checked source the implementations are held to.

Metadata

  • Component: table-body
  • PascalCase: TableBody
  • Description: a table interactive grid tbody <tbody>
  • Status: beta — implemented and unit-tested in all seven frameworks with an axe-clean demo page; not yet exercised in composed flows
  • HTML tag: <tbody>
  • CSS class: .table-body
  • Interactive: no

ARIA

  • Native <tbody> semantics group the body rows of the table
  • No additional ARIA is needed for this passive structural element

Keyboard

Standard table keyboard interactions.

Props

  • className: string (default: "") -- CSS class name for the body group
  • children: slot (required) -- data rows, typically TableRow components
  • ...restProps: unknown -- additional attributes spread onto the <tbody> element