ResponsiveList

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

Import

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

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

Usage

<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 options 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
• With Actions
• Selectable
• Select On Focus
• Highlighted Row
• Phone
• Narrow Pane
• Earlier Breakpoint
• Hidden Card Labels

Source

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