Lily Design System™

Gantt Table TH

A Gantt table col is a column header cell in a GanttTable. It renders a <th scope="col"> element and is intended to live inside a GanttTableTr within GanttTableHead, where it labels a time-period column (day, week, month, milestone, etc.).

Example

Task
Show demo markup 
<th class="gantt-table-th">Task</th>
Usage example 
<script lang="ts">
    import GanttTable from "../GanttTable/GanttTable.svelte";
    import GanttTableHead from "../GanttTableHead/GanttTableHead.svelte";
    import GanttTableBody from "../GanttTableBody/GanttTableBody.svelte";
    import GanttTableTr from "../GanttTableTr/GanttTableTr.svelte";
    import GanttTableTH from "./GanttTableTH.svelte";
    import GanttTableTD from "../GanttTableTD/GanttTableTD.svelte";
</script>

<GanttTable label="Project schedule">
    <GanttTableHead>
        <GanttTableTr>
            <GanttTableTH>Task</GanttTableTH>
            <GanttTableTH>W1</GanttTableTH>
            <GanttTableTH>W2</GanttTableTH>
            <GanttTableTH>W3</GanttTableTH>
            <GanttTableTH>W4</GanttTableTH>
        </GanttTableTr>
    </GanttTableHead>
    <GanttTableBody>
        <GanttTableTr>
            <th scope="row">Design</th>
            <GanttTableTD />
            <GanttTableTD />
            <GanttTableTD />
            <GanttTableTD />
        </GanttTableTr>
    </GanttTableBody>
</GanttTable>
Show Svelte source 
// In your Svelte component:
import GanttTableTH from "lily-design-system-svelte-headless/components/GanttTableTH/GanttTableTH.svelte";

<GanttTableTH>
  <!-- GanttTableTH content -->
</GanttTableTH>

Usage

<GanttTable label="Q1 2026 schedule">
  <GanttTableHead>
    <GanttTableTr>
      <GanttTableTH>Task</GanttTableTH>
      <GanttTableTH>Jan</GanttTableTH>
      <GanttTableTH>Feb</GanttTableTH>
      <GanttTableTH>Mar</GanttTableTH>
    </GanttTableTr>
  </GanttTableHead>
  <GanttTableBody>
    <GanttTableTr>
      <th scope="row">Design phase</th>
      <GanttTableTD active>████</GanttTableTD>
      <GanttTableTD></GanttTableTD>
      <GanttTableTD></GanttTableTD>
    </GanttTableTr>
  </GanttTableBody>
</GanttTable>

Props

  • colspan: number (optional) -- number of columns this header cell spans
  • rowspan: number (optional) -- number of rows this header cell spans
  • scope: "col" | "row" | "colgroup" | "rowgroup" (default: "col") -- header scope
  • children: optional -- header cell content
  • ...restProps: any -- additional HTML attributes spread onto the <th> element

Keyboard Interactions

None -- header cells are not interactive.

ARIA

  • scope="col" associates the header with its column for assistive technologies
  • Use scope="colgroup" together with colspan for grouped column headers (e.g. quarter spanning three months)

When to Use

  • For time-period column headers (days, weeks, months, milestones)
  • For grouped headers (e.g. a quarter row above month columns) via colspan

When Not to Use

  • Do not use outside GanttTable -- use TableTD or DataTableTD for other table types
  • Do not use for task data cells -- use GanttTableTD
  • Do not use for column-wide styling hooks via <colgroup> / <col> -- write those directly inside GanttTable

Headless

This headless component provides a <th> element for time-period column headers in a Gantt chart grid. The consumer provides all visual styling.

Styles

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

Testing

  • Verify the component renders a <th> element with class gantt-table-th
  • Verify scope="col" is the default
  • Verify colspan / rowspan are applied when set
  • Verify pass-through attributes are applied

Advice

  • Designers: Use consistent column widths for time-period columns to create a uniform grid.
  • Developers: Place GanttTableTH elements inside a GanttTableTr within GanttTableHead.

Implementation Notes

  • Renders as a <th> element with scope="col" by default
  • Accepts optional colspan / rowspan for grouped header cells
  • Accepts an alternative scope (e.g. "colgroup" for grouped headers)
  • Renders header text via children
  • Spreads restProps onto the <th> element

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-td — a Gantt chart table interactive grid data cell for planning schedule visualization <td>
  • table — a table with rows and columns <table>

References

  • WAI-ARIA Grid Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/grid/
  • MDN th element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th

Canonical contract

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

Metadata

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

ARIA

  • scope="col" associates the header with its column for assistive technologies
  • Use scope="colgroup" together with colspan for grouped column headers (e.g. quarter spanning months)

Keyboard

  • No keyboard interactions — this is a passive element

Props

  • colspan: number (optional) -- number of columns this header cell spans
  • rowspan: number (optional) -- number of rows this header cell spans
  • scope: "col" | "row" | "colgroup" | "rowgroup" (default: "col") -- header scope
  • children: optional -- header cell content
  • ...restProps: any -- additional HTML attributes spread onto the <th> element