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

ColumnHeader

El componente, montado

Cargando el componente del paquete instalado…

Cargando el chunk del paquete instalado…

De dónde se importa

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. Cuatro de los 69 ejemplos del paquete traen pegada la firma cruda del .d.ts —el mismo defecto del extractor que se come las descripciones—, y por eso la caja tiene tope de alto: el ejemplo de verdad suele estar al final.