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

ColumnHeader

Encabezado de columna con orden y filtro, donde el contenido del filtro se pasa como nodo.

Seguir leyendo — 2 párrafos más

Table column header with optional sorting and filtering.

Uses CSS variables for theming:

--ui-accent for active sort/filter state
--ui-content-secondary for inactive icons

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

dietaly
gestorsalon

El componente, montado

Cargando el componente del paquete instalado…

Cómo se usa

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

Props

10 props declaradas en los tipos de la versión instalada.
Prop	Requerida	Tipo	Qué hace
label	sí	`string`	Header label text
className	opcional	`string`	Additional CSS class
sortable	opcional	`boolean`	Whether column is sortable
sortActive	opcional	`boolean`	Whether sort is currently active
sortDir	opcional	`"asc" \| "desc"`	Current sort direction
onSort	opcional	`() => void`	Callback when sort is requested
filterable	opcional	`boolean`	Whether column is filterable
filterActive	opcional	`boolean`	Whether filter is currently active
filterContent	opcional	`React__default.ReactNode`	Content to display in filter popover
align	opcional	`"left" \| "right"`	Text alignment

Ejemplo del paquete

const [sort, setSort] = useState<'asc' | 'desc' | null>(null)
const [filterOpen, setFilterOpen] = useState(false)

<ColumnHeader
  label="Name"
  sortable
  sortActive={sort !== null}
  sortDir={sort}
  onSort={() => setSort(sort === 'asc' ? 'desc' : 'asc')}
  filterable
  filterActive={hasFilter}
  filterContent={<TextColumnFilter value={filter} onChange={setFilter} onClear={() => setFilter('')} />}
/>

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.