componente · @solu30/ui-kit/data-display

DateRangeColumnFilter

Filtro de columna por rango de fechas, con desde, hasta y chips de rangos prearmados.

Seguir leyendo — 2 párrafos más

Date range filter with from and to date inputs, and optional one-click preset chips.

Uses CSS variables for theming:

--ui-bg-surface for input background
--ui-border for input border

3 sitios de import en 1 de 15 verticales — un archivo que la importa cuenta una vez, monte una instancia o veinte.

gestorsalon

El componente, montado

Cargando el espécimen…

export function ColumnFilterPrimitivesMatrix() {
  const [text, setText] = useState('')
  const [select, setSelect] = useState<string[]>([])
  const [numberRange, setNumberRange] = useState<[number | null, number | null]>([null, null])
  const [dateRange, setDateRange] = useState<[string | null, string | null]>([null, null])
  const [dropdown, setDropdown] = useState<string[]>([])

  return (
    <Stage label="Filtros de columna · el vocabulario completo, lado a lado" tall wide>
      <div className="grid w-full grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
        <div className="flex flex-col gap-1.5">
          <span className="text-xs font-medium text-content/50">TextColumnFilter</span>
          <TextColumnFilter value={text} onChange={setText} onClear={() => setText('')} placeholder="Filtrar salón…" />
        </div>
        <div className="flex flex-col gap-1.5">
          <span className="text-xs font-medium text-content/50">SelectColumnFilter</span>
          <SelectColumnFilter value={select} onChange={setSelect} onClear={() => setSelect([])} options={ESTADO_OPTIONS} />
        </div>
        <div className="flex flex-col gap-1.5">
          <span className="text-xs font-medium text-content/50">NumberRangeColumnFilter</span>
          <NumberRangeColumnFilter
            value={numberRange}
            onChange={setNumberRange}
            onClear={() => setNumberRange([null, null])}
            minLabel="Mín. invitados"
            maxLabel="Máx. invitados"
          />
        </div>
        <div className="flex flex-col gap-1.5">
          <span className="text-xs font-medium text-content/50">DateRangeColumnFilter</span>
          <DateRangeColumnFilter
            value={dateRange}
            onChange={setDateRange}
            onClear={() => setDateRange([null, null])}
          />
        </div>
        <div className="flex flex-col gap-1.5">
          <span className="text-xs font-medium text-content/50">FilterDropdown</span>
          <FilterDropdown
            options={ESTADO_OPTIONS}
            value={dropdown}
            onChange={setDropdown}
            placeholder="Estado"
            labelPlural="estados"
          />
        </div>
      </div>
    </Stage>
  )
}

De specimens/data-display.tsx · ColumnFilterPrimitivesMatrix: el espécimen del Muestrario, no un ejemplo oficial del paquete. Muestra cómo se usa la pieza de verdad, montada contra los tipos instalados —eso es lo que vale— pero no es documentación del kit.

Cómo se usa

import { DateRangeColumnFilter } from '@solu30/ui-kit/data-display'

Props

El catálogo no extrajo props para este símbolo, y eso admite dos lecturas: que el tipo no declare ninguna propia —heredarlas de un elemento HTML es lo normal en las piezas de composición— o que su interfaz se llame distinto y el extractor no la siga. Los filtros de columna son el segundo caso: declaran cuatro props requeridas en SelectFilterProps.

Ejemplo del paquete

const [dates, setDates] = useState<[string|null, string|null]>([null, null])
<DateRangeColumnFilter
  value={dates}
  onChange={setDates}
  onClear={() => setDates([null, null])}
  presets={[
    { label: 'Este mes', value: [startOfMonth, endOfMonth] },
    { label: 'Últimos 7 días', value: [sevenDaysAgo, today] },
  ]}
  labels={{ from: 'Desde', to: 'Hasta', clear: 'Limpiar filtro' }}
/>

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.