Lily Design System™

Data Table Body

A data table body is the main content section of a data table, wrapping the rows that contain the data cells. It groups the data rows where each row represents a record and each cell represents a field value. It is designed to be used inside a DataTable <table> structure.

The component renders a <tbody> element and passes through its children, which are expected to be DataTableRow or <tr> elements containing data cells.

Example

Data
Show demo markup 
<tbody class="data-table-body"><tr class="data-table-row"><td class="data-table-td">Data</td></tr></tbody>
Usage example 
<script lang="ts">
    import DataTable from "../DataTable/DataTable.svelte";
    import DataTableHead from "../DataTableHead/DataTableHead.svelte";
    import DataTableBody from "./DataTableBody.svelte";
    import DataTableRow from "../DataTableRow/DataTableRow.svelte";
    import DataTableTD from "../DataTableTD/DataTableTD.svelte";
</script>

<DataTable label="Users">
    <DataTableHead>
        <DataTableRow><th scope="col">Name</th></DataTableRow>
    </DataTableHead>
    <DataTableBody>
        <DataTableRow><DataTableTD>Alice</DataTableTD></DataTableRow>
        <DataTableRow><DataTableTD>Bob</DataTableTD></DataTableRow>
    </DataTableBody>
</DataTable>
Show Svelte source 
// In your Svelte component:
import DataTableBody from "lily-design-system-svelte-headless/components/DataTableBody/DataTableBody.svelte";

<DataTableBody>
  <!-- DataTableBody content -->
</DataTableBody>

Usage

<DataTable caption="User accounts">
  <DataTableHead>...</DataTableHead>
  <DataTableBody>
    <tr><td>Alice</td><td>alice@example.com</td><td>Admin</td></tr>
    <tr><td>Bob</td><td>bob@example.com</td><td>Editor</td></tr>
  </DataTableBody>
</DataTable>

Props

  • children: slot (required) -- data rows representing records in the table
  • ...restProps: Any additional HTML attributes passed to the <tbody> element

Keyboard Interactions

None -- this component is a passive container. Navigation within the table follows standard browser behavior.

ARIA

  • Implicit rowgroup role from the <tbody> element -- groups the body rows of the table

When to Use

  • Use inside DataTable to provide the <tbody> body section containing data rows.
  • Use to wrap the main data rows, separating them from header and footer sections.
  • Use for each logical group of data rows within a table.

When Not to Use

  • Do not use outside DataTable -- use TableBody, CalendarTableBody, GanttTableBody, or KanbanTableBody for their respective table types.
  • Do not use for header rows -- use DataTableHead instead.

Headless

This headless DataTableBody component provides a semantic <tbody> element with implicit rowgroup role for assistive technology. The consumer provides all visual styling including row backgrounds, hover states, striping patterns, and spacing.

Styles

The consumer provides all CSS styling. The component renders with a .data-table-body class for targeting. No default styles are included — this is a fully headless component.

Testing

  • Verify the component renders a <tbody> element with class data-table-body
  • Verify pass-through attributes are applied

Advice

  • Designers: Use alternating row colors or subtle borders within the body section to help users track data across columns.
  • Developers: Place DataTableRow or <tr> elements as children. The <tbody> groups body rows separately from header and footer rows for assistive technology navigation.

Implementation Notes

  • Renders as a <tbody> element for the body section of a data table
  • Children should be data rows, each containing cells with field values
  • Designed to be used inside a DataTable <table> structure
  • Spreads restProps onto the <tbody> element for consumer customization
  • No internal state -- purely a structural wrapper

Composition

DataTableBody is part of the DataTable composition pattern. It sits inside a DataTable and contains DataTableRow components. The full hierarchy is DataTable > DataTableHead/DataTableBody/DataTableFoot > DataTableRow > DataTableTD.

Related components

  • data-table — a data table interactive grid for displaying and sorting tabular data <table>
  • data-table-foot — a data table interactive grid tfoot for displaying and sorting tabular data <tfoot>
  • data-table-head — a data table interactive grid thead for displaying and sorting tabular data <thead>
  • data-table-row — a data table interactive grid row for displaying and sorting tabular data <tr>
  • data-table-td — a data table interactive grid data cell for displaying and sorting tabular data <td>
  • data-table-th — a data table interactive grid header cell for displaying and sorting tabular data <th>
  • table — a table with rows and columns <table>

References

  • WAI-ARIA Table Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/table/
  • WAI Tutorial on Tables: https://www.w3.org/WAI/tutorials/tables/

Canonical contract

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

Metadata

  • Component: data-table-body
  • PascalCase: DataTableBody
  • Description: a data table interactive grid tbody for displaying and sorting tabular data <tbody>
  • Status: stable — exercised in composed page flows under e2e and axe, beyond the per-component checks
  • HTML tag: <tbody>
  • CSS class: .data-table-body
  • Interactive: no

ARIA

  • Implicit rowgroup role from the <tbody> element -- groups the body rows of the table

Keyboard

  • No keyboard interactions — this is a passive element

Props

  • children: slot (required) -- data rows representing records in the table
  • ...restProps: Any additional HTML attributes passed to the <tbody> element