Todos los componentes (204)

Lista virtual

Datos · VirtualList

Qué es y cuándo usarlo

Una lista de miles de filas que no atasca el navegador: solo existen en el DOM las que se ven y el resto es espacio reservado. Medido con 5000 filas de 44 px: una docena de filas en el DOM.

Cuándo usarlo

Listas de miles de elementos de los que se elige uno o varios: pedidos del año, productos del catálogo, códigos postales.
Necesita un height fijo y que todas las filas midan lo mismo (rowHeight, 44 px por defecto): sin esas dos cosas no se sabe qué trozo pintar. Con description en las filas, sube rowHeight.
loading mientras llegan más filas: la lista se marca ocupada y debajo sale una fila con loadingText.

Cuándo no

Unos pocos cientos de filas: SelectableList, que no pide alto fijo ni filas iguales.
Datos en columnas que se ordenan y se filtran: Table.
Una lista que se va alargando al final: LoadMoreButton.

Teclado: Tab entra en la lista con el foco en la fila elegida (o en la primera). Las flechas recorren las filas saltándose las deshabilitadas, Inicio y Fin van a los extremos y escribir salta a la fila que empieza así; Intro o Espacio eligen la fila con el foco (con multiple, marcan y desmarcan). Si la fila a la que se va está fuera de la vista, la lista se desplaza hasta ella. Las filas deshabilitadas no se eligen.

Accesibilidad: es el mismo listbox que SelectableList, con nombre obligatorio (label) y cada fila como option con su aria-selected. Cada fila lleva aria-posinset y aria-setsize con el total real: si no, el lector contaría solo las filas pintadas y diría «1 de 12» con miles detrás. La marca de elegida va además del fondo.

Aspecto fino: sin variables propias: comparte las clases de SelectableList (amset-list-sel__option, amset-list-sel__detail) y añade amset-virtual.

Cómo se ve

2000 pedidos, y solo se pintan los que se ven.

<VirtualList
  label="Pedidos del año"
  rows={pedidos}
  height="18rem"
  rowHeight={60}
  value={elegido}
  onChange={setElegido}
/>

Props

Se importa con import { VirtualList } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`height`obligatoria	`string`	Alto de la ventana visible. Es obligatorio: sin alto no hay que virtualizar.
`label`obligatoria	`string`	Obligatoria: sin nombre es «lista» a secas.
`rows`obligatoria	`readonly VirtualRow[]`	—
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`empty`	`ReactNode`	—
`loading`	`boolean`	Las filas estan llegando (el scroll infinito pide mas). La lista se marca ocupada y debajo se enseña una fila `loadingText`.
`loadingText`	`string`	Lo que dice la fila de carga. Por defecto, «Cargando…».
`onChange`	`((key: string \| null) => void) \| ((keys: readonly string[]) => void)`	—
`renderOption`	`OptionRender<VirtualRow>`	Pinta el interior de cada fila: un avatar, dos lineas, un precio. Lo que LEE el lector de pantalla sigue siendo `label`; esto es solo lo que se ve. Se llama solo para las filas pintadas, no para las 5.000.
`rowHeight`	`number`	—
`selection`	`"multiple" \| "single"`	—
`value`	`string \| readonly string[] \| null`	—

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: