Todos los componentes (244)

Barra de filtros

Gestión · SmartFilterBar

Qué es y cuándo usarlo

La barra de filtros de un listado: búsqueda libre, filtros rápidos de un clic, un panel con el constructor de consultas para lo que no cabe en un clic, el botón de quitarlo todo y el sitio para las vistas guardadas.

Cuándo usarlo

Encima de una tabla o una lista de registros.
fields son los campos (con su tipo); la búsqueda libre mira los de texto. quickFilters son los filtros de un clic, cada uno con la consulta que aplica.
Todo se suma: un registro tiene que cumplir el texto, los filtros rápidos encendidos y la consulta. Para aplicarlo en el cliente, smartFilter(registros, valor, campos, filtrosRapidos, leer); en el servidor se recorre el mismo valor.
Es controlada (value, onChange), así que el valor puede ir a la dirección de la página o a una vista guardada. views recibe un SavedViewsManager.

Cuándo no

Un único buscador: SearchField.
Filtrar dentro de una Table: ya trae sus filtros por columna y avanzados.

Teclado: la búsqueda, los filtros rápidos (botones que se pulsan), el botón de más filtros y el de quitar son controles normales; el panel avanzado es un Drawer.

Accesibilidad: la barra es una región de búsqueda con nombre; cada filtro rápido dice si está encendido (aria-pressed) y el recuento de resultados se anuncia.

Aspecto fino: todo en una fila que se parte cuando no cabe; las vistas se van al final.

Cómo se ve

Lucía Ferrer · pagado · 189 €
Marta Ruiz · pendiente · 42 €
Carla Gil · pagado · 95 €
Paco Soler · enviado · 310 €
Lucía Ferrer · enviado · 64 €

<SmartFilterBar
  label="Filtrar pedidos"
  fields={campos}
  quickFilters={filtrosRapidos}
  value={filtro}
  onChange={setFiltro}
  resultCount={visibles.length}
/>

Props

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

Prop	Tipo	Para qué sirve
`fields`obligatoria	`readonly QueryField[]`	Los campos por los que se busca y se filtra; los de tipo texto son los que mira la busqueda libre.
`label`obligatoria	`string`	Que se filtra («Filtrar facturas»). Obligatorio.
`onChange`obligatoria	`(value: SmartFilterValue) => void`	—
`value`obligatoria	`SmartFilterValue`	—
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`quickFilters`	`readonly QuickFilter[]`	Filtros de un clic: cada uno aplica su consulta mientras esta encendido.
`resultCount`	`number`	Cuantos registros quedan con el filtro: se dice junto a la barra.
`views`	`ReactNode`	Lo que va al final de la barra, normalmente un `SavedViewsManager`.

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: