Table header cell<mds-table-header-cell>Generato da @maggioli-design-system/magma@2.3.0dist/documentation.json. Incapsulamento: shadow.
Questa pagina è generata dai pacchetti Magma, documentati solo in inglese.
Il primo esempio della pagina Pattern, dal vivo. Cambia le sue proprietà qui sotto e l'anteprima le segue; Ripristina riporta l'esempio com'era.
Proprietà
directionenumSpecifies the current sort direction of the column. Set from outside, it sorts the rows like a click, or only shows the order when the table has sorting="external".
sortablesortablebooleanTells the component to make the cell able to sort the table columns items
labelstringSets a label for the cell
sortKeystringNames the column in the mdsTableHeaderCellSort event, for example the field the back end sorts by
Panoramica
The <mds-table-header-cell> web component is the column-header cell of a Magma data table. It is a compound child of <mds-table-header> and plays the role of a native <th> (columnheader), rendering the column label and, when enabled, acting as the interactive sort control for its column.
Semantic Behavior
Compound child only: Must be placed as a direct slot child of <mds-table-header>; it is not used standalone, and its sorting acts on the body rows within the enclosing mds-table.Header role and ARIA sort: Reflects its current sort state through aria-sort, mirroring the direction prop (none / ascending / descending).Position-based sorting: The cell sorts the matching mds-table-cell of every body row by column position; values come from each cell’s value (falling back to trimmed text), with numeric values compared numerically and others compared alphabetically. With sorting="external" on the table it moves no row: the application renders them in the order asked.Tri-state sort cycle: Each activation advances the column through none -> ascending -> descending and back to none; the none state restores the order the rows had before any column sorted them (rows removed in the meantime stay out, rows added go last).Sort event: Every click emits mdsTableHeaderCellSort, which bubbles to the table, with { direction, index, sortKey }: the new direction, the position of the column and its sort-key. A direction set by the application emits nothing, the application already knows it.Single active sort column: Sorting a column resets every sibling header cell to none, so only one column drives the order at a time.Conditional rendering: When sortable is set the cell renders a clickable sorter (with an up / down / unfold-more icon reflecting direction); otherwise it renders a plain label with no interaction.
Properties & Visual Configurations
sortable: Opt a column into interactive sorting. Leave it unset for purely descriptive columns (label only); set it when the column’s values should be reorderable by the user.direction: The reflected sort state of the column (none, ascending, descending), which drives the sort icon and aria-sort. Set from outside (or in the markup) it acts like the clicks that lead there: it sorts the rows, or only shows the order with sorting="external", resets the other columns to none, and the next click goes on from it.sortKey (sort-key): Names the column in mdsTableHeaderCellSort, typically the field the back end sorts by, so the application does not depend on the position of the column.