Lily Design System™

Calendar Table TH

CalendarTableTD is a headless component that renders a <th scope="col"> element — a column header cell — intended to live inside a CalendarTableRow within CalendarTableHead. Use it to label day-of-week or other column headers in a calendar grid.

Example

Day
Show demo markup 
<th class="calendar-table-th">Day</th>
Usage example 
<script lang="ts">
  import CalendarTable from '../CalendarTable/CalendarTable.svelte';
  import CalendarTableHead from '../CalendarTableHead/CalendarTableHead.svelte';
  import CalendarTableBody from '../CalendarTableBody/CalendarTableBody.svelte';
  import CalendarTableRow from '../CalendarTableRow/CalendarTableRow.svelte';
  import CalendarTableTD from './CalendarTableTD.svelte';
  import CalendarTableTD from '../CalendarTableTD/CalendarTableTD.svelte';
</script>

<CalendarTable label="January 2025">
  <CalendarTableHead>
    <CalendarTableRow>
      <CalendarTableTD>Sun</CalendarTableTD>
      <CalendarTableTD>Mon</CalendarTableTD>
      <CalendarTableTD>Tue</CalendarTableTD>
      <CalendarTableTD>Wed</CalendarTableTD>
      <CalendarTableTD>Thu</CalendarTableTD>
      <CalendarTableTD>Fri</CalendarTableTD>
      <CalendarTableTD>Sat</CalendarTableTD>
    </CalendarTableRow>
  </CalendarTableHead>
  <CalendarTableBody>
    <CalendarTableRow>
      {#each [1, 2, 3, 4, 5, 6, 7] as d}
        <CalendarTableTD>{d}</CalendarTableTD>
      {/each}
    </CalendarTableRow>
  </CalendarTableBody>
</CalendarTable>
Show Svelte source 
// In your Svelte component:
import CalendarTableTH from "lily-design-system-svelte-headless/components/CalendarTableTH/CalendarTableTH.svelte";

<CalendarTableTH>
  <!-- CalendarTableTH content -->
</CalendarTableTH>

Usage

<CalendarTable label="April 2026">
  <CalendarTableHead>
    <CalendarTableRow>
      <CalendarTableTD>Sun</CalendarTableTD>
      <CalendarTableTD>Mon</CalendarTableTD>
      <CalendarTableTD>Tue</CalendarTableTD>
      <CalendarTableTD>Wed</CalendarTableTD>
      <CalendarTableTD>Thu</CalendarTableTD>
      <CalendarTableTD>Fri</CalendarTableTD>
      <CalendarTableTD>Sat</CalendarTableTD>
    </CalendarTableRow>
  </CalendarTableHead>
  <CalendarTableBody>...</CalendarTableBody>
</CalendarTable>

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: unknown -- additional 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. "Weekdays" / "Weekend").

When to Use

  • For day-of-week labels and other column headers in a calendar grid
  • For grouped header cells via colspan / rowspan

When Not to Use

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

Headless

This headless component renders a <th> element. The consumer provides all visual styling.

Styles

The consumer provides all CSS styling. The component renders with a .calendar-table-th class for targeting.

Testing

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

Advice

  • Designers: Keep header labels short and consistent (e.g. three-letter day abbreviations).
  • Developers: Place CalendarTableTD elements inside a CalendarTableRow within CalendarTableHead.

Implementation Notes

  • Renders 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

Composition

CalendarTableTD is part of the CalendarTable composition pattern: CalendarTable > CalendarTableHead > CalendarTableRow > CalendarTableTD.

Related components

  • calendar-table — a calendar table interactive grid for managing dates, days, etc. <table>
  • calendar-table-body — a calendar table interactive grid tbody for managing dates, days, etc. <tbody>
  • calendar-table-foot — a calendar table interactive grid tfoot for managing dates, days, etc. <tfoot>
  • calendar-table-head — a calendar table interactive grid thead for managing dates, days, etc. <thead>
  • calendar-table-row — a calendar table interactive grid row for managing dates, days, etc. <tr>
  • calendar-table-td — a calendar table interactive grid data cell for managing dates, days, etc. <td>
  • table — a table with rows and columns <table>

References

  • 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: calendar-table-th
  • PascalCase: CalendarTableTH
  • Description: a calendar table interactive grid header cell for managing dates, days, etc. <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: .calendar-table-th
  • Interactive: no

ARIA

  • scope="col" associates the header with its column for assistive technologies

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: unknown -- additional attributes spread onto the <th> element