FilterBar

Barra encima de una tabla o lista: vista rápida, búsqueda, botón de filtros y filtros activos.

Cuándo usarlo

Props. segments + defaultSegment / segmentValue / onSegment (un ButtonGroup), search o onSearch(texto), searchPlaceholder, onOpenFilters, activeFilters [{label}], onRemoveFilter(i), onClear, extra (p. ej. un DatePicker).

Reglas. Los filtros aplicados se ven siempre, como Tag con su X, y hay un "Limpiar todo". El botón Filtros muestra cuántos hay activos. Los filtros avanzados se abren en un Slideout, no en un modal.

Accesibilidad. Con filtros activos el botón se anuncia como "Filtros 2". Cada X se llama "Quitar" seguido del filtro.

Textos. labels cambia "Vista", "Buscar", "Filtros" y "Limpiar todo"; el placeholder va en searchPlaceholder.

Ejemplos

Categoría: HogarImporte > 50 €

Props

Prop	Tipo	Por defecto	Descripción
`segments`	`ButtonGroupItem[]`	—	Vistas rápidas, en un `ButtonGroup`.
`segmentValue`	`string`	—	Vista elegida (controlado).
`defaultSegment`	`string`	—	Vista elegida al principio (no controlado).
`onSegment`	`((value: string) => void)`	—
`search`	`boolean`	—	Muestra el buscador (también aparece si pasas `onSearch`).
`onSearch`	`((query: string) => void)`	—	Recibe el texto del buscador en cada cambio.
`searchPlaceholder`	`string`	`"Buscar"`	Placeholder del buscador.
`onOpenFilters`	`(() => void)`	—	Abre los filtros avanzados, en un `Slideout` (no en un modal).
`activeFilters`	`(string \| { label: string; })[]`	`[]`	Filtros aplicados: se ven siempre, como `Tag` con su X. El botón Filtros muestra cuántos hay.
`onRemoveFilter`	`((index: number) => void)`	—
`onClear`	`(() => void)`	—	"Limpiar todo", junto a los filtros aplicados.
`extra`	`ReactNode`	—	Controles extra antes del botón Filtros, como un `DatePicker`.
`labels`	`Partial<FilterBarLabels>`	—	Textos que trae el componente, para sustituirlos.
`className`	`string`	—

Código

import { FilterBar } from "@jotis-me/react";

export default function Page() {
	return (
		<>
			<FilterBar
				segments={[
					{ value: "todo", label: "Todo" },
					{ value: "gastos", label: "Gastos" },
				]}
				defaultSegment="todo"
				onSearch={buscar}
				activeFilters={filtros}
				onRemoveFilter={quitarFiltro}
				onClear={limpiarFiltros}
				onOpenFilters={abrirFiltros}
			/>
		</>
	);
}

---
import { FilterBar } from "@jotis-me/react";
---

<FilterBar client:load
	segments={[
		{ value: "todo", label: "Todo" },
		{ value: "gastos", label: "Gastos" },
	]}
	defaultSegment="todo"
	onSearch={buscar}
	activeFilters={filtros}
	onRemoveFilter={quitarFiltro}
	onClear={limpiarFiltros}
	onOpenFilters={abrirFiltros}
/>

Sus avisos (onSearch, onRemoveFilter, onClear…) son funciones y la vista rápida necesita JavaScript: envuélvela en un .tsx y úsala con client:load.