# ResponsiveList

> A table from `breakpoint` of its own width up and a stack of cards below it, from one column definition.

Source: https://ui.jcsoftdev.com/docs/components/responsive-list

A table from `breakpoint` of its own width up and a stack of cards below it, from one column definition.

## Import

```ts
import { ResponsiveList } from "@jcsoftdev/ui/containers";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/containers/responsive-list`.

## Usage

```tsx
<ResponsiveList caption="Pedidos de hoy" items={orders} columns={columns} />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `caption` * | `string` |  | Accessible name of the table and of the card list. |
| `items` * | `readonly T[]` |  |  |
| `columns` * | `readonly ResponsiveListColumn<T>[]` |  |  |
| `rowKey` * | `(item: T) => string` |  |  |
| `renderActions` | `((item: T) => ReactNode)` |  | Per-row actions: a last table column, and a footer row on each card. |
| `actionsHeader` | `string` |  | Header of the actions column. Defaults to the localized "Actions". |
| `rowClassName` | `((item: T) => string \| undefined)` |  |  |
| `layout` | `"auto" \| "cards"` | `"auto"` | `"auto"` (default) is a table from `breakpoint` of the list's own container width up and cards below it. `"cards"` always renders the cards, for a list that sits in a narrow pane (a master list next to its detail). |
| `breakpoint` | `480 \| 640 \| 960 \| 1280 \| 672 \| 768` | `672` | Container width (px) from which `layout="auto"` shows the table. Defaults to 672 (42rem). |
| `cardLabels` | `"hidden" \| "visible"` | `"visible"` | `"visible"` (default) shows each field label in the cards. `"hidden"` keeps them for screen readers only, for cards whose values explain themselves (a price, a status). |
| `selectedKey` | `string \| null` |  | Key of the selected row, or `null`/`undefined` for none. Only used together with `onSelect`. |
| `onSelect` | `((key: string, item: T) => void)` |  | Makes rows selectable (click, Enter or Space) and adds keyboard navigation (arrows, Home, End). Without `renderActions` the cards are a `listbox` of `option`s and the table a `grid` whose rows carry `aria-selected`; with it the rows keep plain list/table sema… |
| `selectOnFocus` | `boolean` | `false` | Arrow keys select the row they land on, not only move focus. Off by default. |
| `className` | `string` |  |  |
| `classNames` | `Partial<Record<ResponsiveListPart, string>>` |  | Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/containers-responsivelist--default)
- [With Actions](/storybook/?path=/story/containers-responsivelist--with-actions)
- [Selectable](/storybook/?path=/story/containers-responsivelist--selectable)
- [Select On Focus](/storybook/?path=/story/containers-responsivelist--select-on-focus)
- [Highlighted Row](/storybook/?path=/story/containers-responsivelist--highlighted-row)
- [Phone](/storybook/?path=/story/containers-responsivelist--phone)
- [Narrow Pane](/storybook/?path=/story/containers-responsivelist--narrow-pane)
- [Earlier Breakpoint](/storybook/?path=/story/containers-responsivelist--earlier-breakpoint)
- [Hidden Card Labels](/storybook/?path=/story/containers-responsivelist--hidden-card-labels)

## Source

`packages/ui/src/containers/responsive-list/responsive-list.tsx`