Component
ChartDataTable
A chart’s data as a table — the non-visual alternative every chart carries.
import { ChartDataTable } from '@loidolt/theme-charts';
Example
| Month | Birch ply | Cork | Acrylic |
|---|---|---|---|
| Jan | 42 | 18 | 12 |
| Feb | 48 | 22 | 10 |
| Mar | 51 | 20 | 14 |
Notes
- Each chart’s
…Table()helper in@loidolt/theme-charts/corebuilds the rows. First cells are row headers; numbers are right-aligned and formatted withvalueFormat. visuallyHiddenkeeps it for assistive tech only, as a plain table rather than a scroll region, so no invisible tab stop is left for keyboard users.
Props
Generated from the component source, so it cannot drift from the implementation.
| Prop | Type | Default | Notes |
|---|---|---|---|
caption required | string | — | Names the table, usually the chart's title. |
table required | ChartTable | — | The rows and columns, as the chart builders' …Table() helpers return them. |
class | string | — | |
emptyCell | string | '—' | Written in empty cells. |
ref bindable | HTMLDivElement | null | null | |
valueFormat | FormatOptions | — | How numbers are written. |
visuallyHidden | boolean | false | Present the table to assistive tech only. A chart's default: the picture is for the eye, the table for everyone else, and neither gets in the other's way. |
Plus the attributes of HTMLAttributes<HTMLDivElement>, forwarded to the root element.