DynamicFilter

Barra de filtros configurable por JSON. Soporta text, select, multiselect, date, daterange, boolean y number. Muestra conteo de filtros activos y permite limpiarlos todos de un clic.

pnpm dlx nuvo-ui add dynamic-filter

Demo interactivo

Todos los tipos de filtro conectados a una tabla de datos en tiempo real.

Filtros

Buscar

Rol

Estado

Fecha registro

—

Score mínimo

Sin mínimo (0–100)

Verificados

Nombre	Rol	Estado	Score	Fecha	Verificado
Ana García	admin	Activo	92	2024-03-15	✓
Luis Martínez	editor	Inactivo	74	2024-01-08	—
Sara López	viewer	Activo	88	2024-06-22	✓
Carlos Ruiz	admin	Activo	55	2023-11-30	—
Marta Díaz	editor	Inactivo	67	2024-09-04	✓
Jorge Pérez	viewer	Activo	91	2024-02-17	—

6 de 6 registros

Uso básico

import { DynamicFilter, type FilterConfig, type FilterValues } from "@/components/ui/dynamic-filter"
import { useState } from "react"

const filters: FilterConfig[] = [
  { key: "search",   label: "Buscar",   type: "text"        },
  { key: "status",   label: "Estado",   type: "select",
    options: [{ label: "Activo", value: "active" }, { label: "Inactivo", value: "inactive" }] },
  { key: "roles",    label: "Roles",    type: "multiselect",
    options: [{ label: "Admin", value: "admin" }, { label: "Editor", value: "editor" }] },
  { key: "date",     label: "Fecha",    type: "daterange"   },
  { key: "score",    label: "Score min",type: "number", min: 0, max: 100 },
  { key: "verified", label: "Verificados", type: "boolean"  },
]

export function MyPage() {
  const [values, setValues] = useState<FilterValues>({})

  // Leer valores:
  // values.search    → string | undefined
  // values.status    → string | undefined
  // values.roles     → string[] | undefined
  // values.date      → { from?: string; to?: string } | undefined
  // values.score     → string | undefined
  // values.verified  → true | undefined

  return (
    <DynamicFilter
      filters={filters}
      value={values}
      onChange={setValues}
    />
  )
}

Nota: El objeto values solo contiene las claves con valor. Un filtro sin seleccionar simplemente no aparece como propiedad (o es undefined).

Props — DynamicFilter

Prop	Tipo	Default	Descripción
filters	FilterConfig[]	—	Configuración declarativa de los filtros a mostrar
value	FilterValues	{}	Objeto controlado con los valores actuales de los filtros
onChange	(values: FilterValues) => void	—	Callback al cambiar cualquier filtro — recibe el objeto completo actualizado
title	string	"Filtros"	Título del header de la barra de filtros
defaultExpanded	boolean	true	Si los filtros se muestran expandidos al montar
className	string	—	Clases CSS adicionales en el contenedor raíz

Tipo FilterConfig

Prop	Tipo	Default	Descripción
key	string	—	Clave única del filtro — se usa como propiedad en el objeto values
label	string	—	Etiqueta visible encima del campo
type	"text" \| "select" \| "multiselect" \| "date" \| "daterange" \| "boolean" \| "number"	—	Tipo de campo a renderizar
placeholder	string	—	Texto de placeholder o label del toggle boolean
options	FilterOption[]	—	Opciones para select y multiselect: { label, value }[]
min	string \| number	—	Valor mínimo para date y number
max	string \| number	—	Valor máximo para date y number