Lily Design System™

Table Row

TableRow is a headless component that renders a <tr> element within a table. It represents a single row of cells.

Use this component within TableHead, TableBody, or TableFoot to define rows of table data.

Example

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

<TableRow>
  <!-- TableRow content -->
</TableRow>

Usage

<TableBody>
  <TableRow>
    <TableTD>Alice</TableTD>
    <TableTD>alice@example.com</TableTD>
  </TableRow>
</TableBody>

Props

  • className: string (default: "") -- CSS class name for the row
  • children: slot (required) -- row cells, typically <th> or TableTD components
  • ...restProps: unknown -- additional attributes spread onto the <tr> element

Keyboard Interactions

Standard table row keyboard interactions.

ARIA

No additional ARIA attributes. Row semantics are provided by the <tr> element.

When to Use

  • Use inside TableHead, TableBody, or TableFoot to represent one row of data
  • Use to group TableTD (header) and TableTD (data) cells into a logical row
  • Use inside TableHead for column header rows and inside TableBody for data rows

When Not to Use

  • Do not use outside of a Table -- use DataTableRow for DataTable or CalendarTableRow for CalendarTable
  • Do not use as a standalone element -- it must be a child of TableHead, TableBody, or TableFoot

Headless

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

Styles

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

Testing

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

Composition

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

Related components

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

References

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

Implementation Notes

  • Renders a <tr> element for table row semantics
  • Accepts className for CSS class targeting
  • Spreads restProps onto the <tr> 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-row
  • PascalCase: TableRow
  • Description: a table interactive grid row <tr>
  • Status: beta — implemented and unit-tested in all seven frameworks with an axe-clean demo page; not yet exercised in composed flows
  • HTML tag: <tr>
  • CSS class: .table-row
  • Interactive: no

ARIA

  • Native <tr> semantics announce the row position within the surrounding <table>
  • Screen readers expose <tr> as a row in the data grid

Keyboard

Standard table row keyboard interactions.

Props

  • className: string (default: "") -- CSS class name for the row
  • children: slot (required) -- row cells, typically <th> or TableTD components
  • ...restProps: unknown -- additional attributes spread onto the <tr> element