Lily Design System™

Gantt Table TD

A Gantt table data cell represents a single time period cell within a task row of a Gantt chart. It renders as a <td> element and is designed to be placed inside a GanttTableTr within a GanttTableBody. Each cell corresponds to one time period (e.g., a day, week, or sprint) for a particular task, and the consumer provides the cell content, such as a bar segment, milestone marker, or empty space.

Example

Design phase
Show demo markup 
<td class="gantt-table-td">Design phase</td>
Usage example 
<script lang="ts">
    import GanttTableTr from "../GanttTableTr/GanttTableTr.svelte";
    import GanttTableTD from "./GanttTableTD.svelte";
</script>

<GanttTableTr>
    <th>Task A</th>
    <GanttTableTD active>---</GanttTableTD>
    <GanttTableTD />
    <GanttTableTD />
</GanttTableTr>
Show Svelte source 
// In your Svelte component:
import GanttTableTD from "lily-design-system-svelte-headless/components/GanttTableTD/GanttTableTD.svelte";

<GanttTableTD>
  <!-- GanttTableTD content -->
</GanttTableTD>

Usage

<GanttTableBody>
  <GanttTableTr>
    <GanttTableTH scope="row">Design phase</GanttTableTH>
    <GanttTableTD active aria-label="Design phase: Jan, in progress">████</GanttTableTD>
    <GanttTableTD active aria-label="Design phase: Feb, in progress">████</GanttTableTD>
    <GanttTableTD aria-label="Design phase: Mar, not scheduled"></GanttTableTD>
  </GanttTableTr>
  <GanttTableTr>
    <GanttTableTH scope="row">Development</GanttTableTH>
    <GanttTableTD aria-label="Development: Jan, not scheduled"></GanttTableTD>
    <GanttTableTD active aria-label="Development: Feb, in progress">████</GanttTableTD>
    <GanttTableTD active aria-label="Development: Mar, in progress">████</GanttTableTD>
  </GanttTableTr>
</GanttTableBody>

Props

  • children: slot (required) -- cell content such as bar segments, milestone markers, or text
  • ...restProps: any -- additional HTML attributes spread onto the <td> element

Keyboard Interactions

None built-in -- the consumer should implement grid keyboard navigation on cells as needed (arrow keys for cell-to-cell movement within the grid).

ARIA

  • Implicit gridcell role from the <td> element when inside a role="grid" table
  • Consumer may add aria-label or aria-describedby for cells with visual-only content (e.g., bar segments)

When to Use

  • Use inside GanttTable to provide the <td> data cell for a time period.
  • Use inside a GanttTableTr to represent a single time period cell containing a bar segment, milestone marker, or empty space.
  • Use to render visual bar segments, progress indicators, or milestone markers within the Gantt chart grid.

When Not to Use

  • Do not use outside of a GanttTable structure -- use TableTD or DataTableTD for general tables.
  • Do not use for header cells -- use GanttTableTH instead.

Headless

This headless component provides a <td> element with implicit gridcell role when inside a role="grid" table. The consumer provides all visual styling including bar rendering, milestone markers, progress indicators, and background colors.

Styles

The consumer provides all CSS styling. The component renders with a .gantt-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 gantt-table-td
  • Verify Implicit gridcell role from the <td> element when inside a role="grid" table
  • Verify Consumer may add aria-label or aria-describedby for cells with visual-only content (e.g., bar segments)
  • Verify pass-through attributes are applied

Advice

  • Designers: Use color-coded bar segments to represent task progress. Add milestone markers (e.g., diamonds) for key dates.
  • Developers: Add aria-label to cells with visual-only content (e.g., bar segments) so screen readers can announce the cell meaning.

Implementation Notes

  • Renders as a <td> element for use inside a GanttTableTr within a GanttTable grid
  • Content is provided through the children slot, typically bar segments, milestone markers, or progress indicators
  • Spreads ...restProps onto the <td> element for consumer customization
  • No internal state -- purely a structural wrapper for cell content

Related components

  • gantt-table — a Gantt chart table interactive grid for planning schedule visualization <table>
  • gantt-table-tbody — a Gantt chart table interactive grid tbody for planning schedule visualization <tbody>
  • gantt-table-tfoot — a Gantt chart table interactive grid tfoot for planning schedule visualization <tfoot>
  • gantt-table-thead — a Gantt chart table interactive grid thead for planning schedule visualization <thead>
  • gantt-table-tr — a Gantt chart table interactive grid row for planning schedule visualization <tr>
  • gantt-table-th — a Gantt chart table interactive grid header cell for planning schedule visualization <th>
  • table — a table with rows and columns <table>

References

  • WAI-ARIA Grid Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/grid/
  • WAI-ARIA gridcell role: https://www.w3.org/TR/wai-aria-1.2/#gridcell

Canonical contract

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

Metadata

  • Component: gantt-table-td
  • PascalCase: GanttTableTD
  • Description: a Gantt chart table interactive grid data cell for planning schedule visualization <td>
  • Status: beta — implemented and unit-tested in all seven frameworks with an axe-clean demo page; not yet exercised in composed flows
  • HTML tag: <td>
  • CSS class: .gantt-table-td
  • Interactive: no

ARIA

  • Implicit gridcell role from the <td> element when inside a role="grid" table
  • Consumer may add aria-label or aria-describedby for cells with visual-only content (e.g., bar segments)
  • 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 such as bar segments, milestone markers, or text
  • ...restProps: any -- additional HTML attributes spread onto the <td> element