# Matrix

A heatmap table of counts with a single-hue fill, linked headers and linked cells.

- **Use it for**: Counts across two dimensions as a heatmap table with links.
- **Not for**: Continuous values over time. Try [Chart](https://unseenui.com/components/chart/).

## Installation

```bash
npm install @stackunseen/ui
```

## Usage

```tsx
import { Matrix } from '@stackunseen/ui';
import { Table } from '@stackunseen/ui';
import '@stackunseen/ui/styles.css';

<Matrix label="Coverage" rows={disciplines} columns={kinds} value={count} href={filterHref} />
```

## All props

| Prop | Type | Description |
| --- | --- | --- |
| `caption` | `ReactNode` |  |
| `cellLabel` | `((row: MatrixAxisItem, column: MatrixAxisItem, value: number \| null) => string)` | A hover title and accessible name for a cell, such as "AI & Models × Basics: 6 entries". |
| `cellLabels` | `Readonly<Record<string, Readonly<Record<string, string>>>>` | Cell names as plain data. |
| `columnHeader` | `"horizontal" \| "angled"` | Angled headers rotate the column labels so many narrow columns stay readable. |
| `columns` (required) | `readonly MatrixAxisItem[]` |  |
| `format` | `((value: number) => ReactNode)` |  |
| `href` | `((row: MatrixAxisItem, column: MatrixAxisItem) => string \| undefined)` | Makes a cell a link, for example to the filtered list behind the count. |
| `hrefs` | `Readonly<Record<string, Readonly<Record<string, string>>>>` | Cell links as plain data. |
| `label` (required) | `string` | Names the table. |
| `max` | `number` | The value that gets the full fill; defaults to the largest value present. |
| `rows` (required) | `readonly MatrixAxisItem[]` |  |
| `scrollLabel` | `string` | Names the keyboard-scrollable region. |
| `totals` | `"rows" \| "columns" \| "both"` | Row totals as a trailing column, column totals as a trailing row, or both. |
| `totalsLabel` | `ReactNode` | Heads the totals column and row. |
| `value` | `((row: MatrixAxisItem, column: MatrixAxisItem) => number \| null)` | A measured count or null for an empty cell. |
| `values` | `Readonly<Record<string, Readonly<Record<string, number \| null>>>>` | The counts as plain data; a missing entry is an empty cell. |
| `zero` | `ReactNode` | Printed in empty cells, for example a middle dot; empty cells are otherwise blank. |

## Keyboard

A real table with scoped headers inside a focusable, labeled scroll region; header and cell links are ordinary links.

## Works with

[Table](https://unseenui.com/components/table/), [DataGrid](https://unseenui.com/components/data-grid/), [Pagination](https://unseenui.com/components/pagination/), [StatusBadge](https://unseenui.com/components/status-badge/), [Card](https://unseenui.com/components/card/), [Tag](https://unseenui.com/components/tag/), [DiffStat](https://unseenui.com/components/diff-stat/), [ElapsedTime](https://unseenui.com/components/elapsed-time/), [Numeric](https://unseenui.com/components/numeric/), [Kbd](https://unseenui.com/components/kbd/), [DotRing](https://unseenui.com/components/dot-ring/), [DotBars](https://unseenui.com/components/dot-bars/)

Page: https://unseenui.com/components/matrix/