Skip to content
KansoMakado design system 1.1
makado.app

Data

ScheduleTable

A production schedule read left to right: phases as columns, deliverables as rows, and a status light with the date in each cell.

Preview

Live, in this page’s themeOpen on its own

Props

PropTypeDescription
columnsRequired{ key: string; label: React.ReactNode }[]
rowsRequired{ label: React.ReactNode; sublabel?: React.ReactNode; cells: Record<string, ScheduleCell | undefined> }[]
captionReact.ReactNode
rowHeaderReact.ReactNode
legendboolean
classNamestring

Guidelines

A production schedule read left to right: phases as columns, deliverables as rows, and a status light with the date in each cell.

Provide: columns ({ key, label }), rows ({ label, sublabel, cells keyed by column with { date, status }), caption, rowHeader, and legend={false} to hide the key.

  • Statuses are done, current, upcoming and late; each has a dot and a spoken word.
  • A phase that does not apply shows a quiet dot. The table scrolls sideways on narrow screens.