# MapDataTable

> Visible, sortable table with the same numbers as a choropleth: the accessible alternative to the colors.

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

Visible, sortable table with the same numbers as a choropleth: the accessible alternative to
the colors. A bar next to each value repeats the magnitude without relying on hue. Rows
without data always sort last.

## Import

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

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

## Usage

```tsx
<MapDataTable
  caption="Citas por distrito"
  rows={rows}
  valueName="Citas"
  labels={labels}
  height={280}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `caption` * | `string` |  |  |
| `rows` * | `readonly MapDataRow[]` |  |  |
| `valueName` * | `string` |  |  |
| `labels` * | `MapLabels` |  |  |
| `height` * | `number` |  | Height in px of the scrolling area. |
| `onRowClick` | `((row: MapDataRow) => void)` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/charts-primitives-mapdatatable--default)
- [Narrow](/storybook/?path=/story/charts-primitives-mapdatatable--narrow)

## Source

`packages/ui/src/charts/maps/geo/map-data-table.tsx`