Lily Design System™

Data Table TD

A data table data cell represents a single piece of data within a data table row. It holds the value for one field of a record. It is designed to be used inside a DataTableRow or <tr> within a DataTable structure.

The component renders a <td> element and passes through its children, which are the cell content.

Example

Cell data
Show demo markup 
<td class="data-table-td">Cell data</td>
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/DataTableRow.svelte";
    import DataTableTD from "./DataTableTD.svelte";
</script>

<DataTable label="Simple">
    <DataTableHead>
        <DataTableRow><th scope="col">A</th><th scope="col">B</th></DataTableRow>
    </DataTableHead>
    <DataTableBody>
        <DataTableRow>
            <DataTableTD>1</DataTableTD>
            <DataTableTD active>2</DataTableTD>
        </DataTableRow>
    </DataTableBody>
</DataTable>
Show Svelte source 
// In your Svelte component:
import DataTableTD from "lily-design-system-svelte-headless/components/DataTableTD/DataTableTD.svelte";

<DataTableTD>
  <!-- DataTableTD content -->
</DataTableTD>

Usage

<DataTableRow>
  <DataTableTD>Alice</DataTableTD>
  <DataTableTD>alice@example.com</DataTableTD>
  <DataTableTD>Admin</DataTableTD>
</DataTableRow>

Props

  • children: slot (required) -- cell content
  • ...restProps: Any additional HTML attributes passed to the <td> element

Keyboard Interactions

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

ARIA

  • Implicit cell role from the <td> element -- identifies the element as a cell within a table row

When to Use

  • Use inside DataTable to provide the <td> data cell within a DataTableRow.
  • Use for each field value in a record row.
  • Use when you need to spread additional attributes like colspan, rowspan, or headers onto a <td>.

When Not to Use

  • Do not use outside DataTable -- use TableTD, CalendarTableTD, GanttTableTD, or KanbanTableTD for their respective table types.
  • Do not use for header cells -- use a <th> element with scope instead.

Headless

This headless DataTableTD component provides a semantic <td> element with implicit cell role for assistive technology. The consumer provides all visual styling including text alignment, padding, borders, truncation, and responsive behavior.

Styles

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

Testing

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

Advice

  • Designers: Right-align numeric data and left-align text data for easy scanning. Use consistent padding and consider truncation with tooltips for long values.
  • Developers: Use colspan and rowspan via restProps for spanning cells. Link cells to their headers with the headers attribute for complex table structures.

Implementation Notes

  • Renders as a <td> element for a single data cell in a table row
  • Children are the cell content (text, numbers, or other elements)
  • Designed to be used inside DataTableRow or <tr> within a DataTable
  • Spreads restProps onto the <td> element for consumer customization (e.g., colspan, rowspan, headers)
  • No internal state -- purely a structural wrapper

Composition

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

ARIA

  • Implicit cell role from the <td> element -- identifies the element as a cell within a table row
  • active (Svelte, React and Vue) makes this cell the grid's single roving tab stop — tabindex="0", every other cell -1 — and **never sets aria-selected**: focus is not selection, and announcing every focused cell as "selected" misleads screen-reader users. A grid with real selection sets aria-selected itself, on the row or explicitly on the cell (rest props pass it through). Corrected 2026-10-10; before that active set aria-selected="true" too.

Keyboard

  • No keyboard interactions — this is a passive element

Props

  • active: boolean (optional, default false) -- the roving tab stop; sets tabindex only, never aria-selected
  • children: slot (required) -- cell content
  • ...restProps: Any additional HTML attributes passed to the <td> element