componente · @solu30/ui-kit/data-display
FilterableHeader
Encabezado de columna que ya trae su filtro adentro, de texto o de selección múltiple.
2 sitios de import en 2 de 15 verticales — un archivo que la importa cuenta una vez, monte una instancia o veinte.
- elliot
- gestorsalon
El componente, montado
Cargando el componente del paquete instalado…
Cómo se usa
import { FilterableHeader } from '@solu30/ui-kit/data-display'Props
| Prop | Requerida | Tipo | Qué hace |
|---|---|---|---|
| label | sí | string | — |
| columnKey | sí | string | — |
| sortDir | opcional | SortDir | null | — |
| onToggleSort | opcional | (key: string) => void | — |
| onSetSort | opcional | (key: string, dir: SortDir) => void | — |
| filterType | opcional | 'text' | 'multiselect' | — |
| filterValue | opcional | string | string[] | — |
| onFilterChange | opcional | (key: string, value: string | string[]) => void | — |
| options | opcional | Array<{ value: string; label: string; }> | — |
Ejemplo del paquete
// Encabezado que ordena y filtra. `columnKey` es lo que llega a los dos callbacks.
<TableHead>
<FilterableHeader label="Cliente" columnKey="cliente" sortDir={orden.cliente}
onToggleSort={alternarOrden} filterType="text"
filterValue={filtros.cliente} onFilterChange={setFiltro} />
</TableHead>Del @example del JSDoc de @solu30/ui-kit, sin editar: son 65 de los 541 símbolos. La sangría y los renglones en blanco son los del paquete.