# 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.

Source: https://ui.jcsoftdev.com/docs/components/chart-data-table

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

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

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

## Usage

```tsx
<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](/storybook/?path=/story/charts-primitives-chartdatatable--default)
- [Missing Values](/storybook/?path=/story/charts-primitives-chartdatatable--missing-values)

## Source

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