ChartDataTable

Visually hidden table with the same numbers as the chart, so the data is reachable by screen readers (and by copy/paste) without relying on color.

Import

import { ChartDataTable } from "@jcsoftdev/ui/charts";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/charts/core.

Usage

<ChartDataTable
  caption="Ventas por servicio de la semana"
  categoryHeader="Día"
  categories={["Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"]}
  columns={[
      {
        id: "cortes",
        name: "Cortes",
        values: ["S/ 420", "S/ 380", "S/ 450", "S/ 510", "S/ 690", "S/ 840"],
      },
      {
        id: "barba",
        name: "Barba",
        values: ["S/ 150", "S/ 120", "S/ 180", "S/ 210", "S/ 260", "S/ 390"],
      },
    ]}
/>

Props

Prop	Type	Default	Description
caption *	string
categoryHeader *	string		Header of the first column.
categories *	readonly string[]		Row headers, already formatted.
columns *	readonly { id: string; name: string; values: ReadonlyArray<string>; }[]

* marks a required prop.

Storybook stories

• Default
• Missing Values

Source

packages/ui/src/charts/core/data-table.tsx