Lily Design System™

Gantt Table Row

A Gantt table row represents a single row within a Gantt chart grid, typically corresponding to one task or milestone. It wraps a task-name cell and time-period cells in a horizontal sequence. It is designed to be used inside a GanttTableHead, GanttTableBody, or GanttTableTfoot section.

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

Example

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

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

<GanttTableTr>
  <!-- GanttTableTr content -->
</GanttTableTr>

Usage

<GanttTableBody>
  <GanttTableTr>
    <GanttTableTH scope="row">Design phase</GanttTableTH>
    <GanttTableTD active>████</GanttTableTD>
    <GanttTableTD active>████</GanttTableTD>
    <GanttTableTD></GanttTableTD>
  </GanttTableTr>
  <GanttTableTr>
    <GanttTableTH scope="row">Development</GanttTableTH>
    <GanttTableTD></GanttTableTD>
    <GanttTableTD active>████</GanttTableTD>
    <GanttTableTD active>████</GanttTableTD>
  </GanttTableTr>
</GanttTableBody>

Props

  • children: slot (required) -- cells for this row, typically a task name and time-period indicators
  • ...restProps: Any additional HTML attributes passed to the <tr> element

Keyboard Interactions

None -- this component is a passive container. Keyboard navigation is handled by the parent GanttTable grid.

ARIA

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

When to Use

  • Use inside GanttTable to provide the <tr> row element for a task, header, or summary row.
  • Use inside GanttTableHead, GanttTableBody, or GanttTableTfoot to represent a single row in the Gantt chart.
  • Use to wrap a task-name cell followed by time-period data cells.

When Not to Use

  • Do not use outside of a GanttTable structure -- use TableRow or DataTableRow for general tables.
  • Do not use for standalone row content outside a table context.

Headless

This headless component provides a <tr> element with implicit row role for identifying a row within the Gantt chart grid. The consumer provides all visual styling including row height, hover states, and borders.

Styles

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

Testing

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

Advice

  • Designers: Ensure rows have enough height to display bar segments clearly. Add hover states to help users track across wide timelines.
  • Developers: Start each body row with a <th> for the task name, followed by GanttTableTD cells for the time period columns.

Implementation Notes

  • Renders as a <tr> element for one row in a Gantt chart grid
  • Children should be a task-name header cell (<th>) followed by time-period data cells (<td> or GanttTableTD)
  • Designed to be used inside GanttTableHead, GanttTableBody, or GanttTableTfoot
  • Spreads restProps onto the <tr> element for consumer customization
  • No internal state -- purely a structural wrapper

Related components

  • gantt-table — a Gantt chart table interactive grid for planning schedule visualization <table>
  • gantt-table-thead — see components.tsv
  • gantt-table-tbody — see components.tsv
  • gantt-table-tfoot — see components.tsv
  • gantt-table-th — a Gantt chart table interactive grid header cell for planning schedule visualization <th>
  • gantt-table-td — a Gantt chart table interactive grid data cell for planning schedule visualization <td>

References

  • WAI-ARIA Grid Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/grid/

Canonical contract

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

Metadata

  • Component: gantt-table-tr
  • PascalCase: GanttTableTr
  • Description: a Gantt chart table interactive grid row for planning schedule visualization <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: .gantt-table-tr
  • Interactive: no

ARIA

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

Keyboard

  • No keyboard interactions — this is a passive element

Props

  • children: slot (required) -- cells for this row, typically a task name and time-period indicators
  • ...restProps: Any additional HTML attributes passed to the <tr> element