Lily Design System™

Data Table Row

A data table row represents a single row within a data table, typically corresponding to one record. It wraps data cells or header cells in a horizontal sequence. It is designed to be used inside a DataTableHead, DataTableBody, or DataTableFoot section.

The component renders a <tr> element and passes through its children, which are expected to be <td>, <th>, or DataTableTD elements.

Example

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

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

<DataTableRow>
  <!-- DataTableRow content -->
</DataTableRow>

Usage

<DataTableBody>
  <DataTableRow>
    <td>Alice</td><td>alice@example.com</td><td>Admin</td>
  </DataTableRow>
  <DataTableRow>
    <td>Bob</td><td>bob@example.com</td><td>Editor</td>
  </DataTableRow>
</DataTableBody>

Props

  • children: slot (required) -- cells for this row
  • ...restProps: Any additional HTML attributes passed to the <tr> element

Keyboard Interactions

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

ARIA

  • Implicit row role from the <tr> element -- identifies a row of cells within the table

When to Use

  • Use inside DataTable to provide the <tr> row element within DataTableHead, DataTableBody, or DataTableFoot.
  • Use for each record or header row in a data table.
  • Use when you need to spread additional attributes like event handlers or data attributes onto a <tr>.

When Not to Use

  • Do not use outside DataTable -- use TableRow, CalendarTableRow, GanttTableTr, or KanbanTableRow for their respective table types.
  • Do not use as a standalone element -- it requires a parent <thead>, <tbody>, or <tfoot> for valid HTML.

Headless

This headless DataTableRow component provides a semantic <tr> element with implicit row role for assistive technology. The consumer provides all visual styling including hover highlights, selected-row states, striped row backgrounds, and click interaction styles.

Styles

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

Testing

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

Advice

  • Designers: Use hover highlights to help users track which row they are reading. Consider a selected-row state for interactive tables.
  • Developers: Place <td>, <th>, or DataTableTD elements as children. Use restProps to add click handlers or data attributes for interactive row selection.

Implementation Notes

  • Renders as a <tr> element for one row in a data table
  • Children should be data cells (<td> or DataTableTD) or header cells (<th>)
  • Designed to be used inside DataTableHead, DataTableBody, or DataTableFoot
  • Spreads restProps onto the <tr> element for consumer customization
  • No internal state -- purely a structural wrapper

Composition

DataTableRow is part of the DataTable composition pattern. It sits inside DataTableHead, DataTableBody, or DataTableFoot and contains DataTableTD or <th> elements. 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-body — a data table interactive grid tbody for displaying and sorting tabular data <tbody>
  • 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-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-row
  • PascalCase: DataTableRow
  • Description: a data table interactive grid row for displaying and sorting tabular data <tr>
  • Status: stable — exercised in composed page flows under e2e and axe, beyond the per-component checks
  • HTML tag: <tr>
  • CSS class: .data-table-row
  • Interactive: no

ARIA

  • Implicit row role from the <tr> element -- identifies a row of cells within the table

Keyboard

  • No keyboard interactions — this is a passive element

Props

  • children: slot (required) -- cells for this row
  • ...restProps: Any additional HTML attributes passed to the <tr> element