Getting startedFoundationsUtilitiesComponentsReleasesSupportGetting startedFoundationsUtilitiesComponentsReleasesComponent StatusAccordion GroupAccordionCollapseBadgeButtonButton DropdownCardStatus CardContentData GridData Grid Table HeaderDate PickerDate Picker InputDate Range PickerDate Range Picker ButtonInputSelectText AreaCheckboxCheckbox GroupRadio ButtonRadio Button GroupComboboxIconIcon LibraryListList Parent ItemList ItemList HeaderHeaderMobile SubheaderFooterFooter ItemSidebarAlertToastToast GroupDialogModalPanelPopoverPaginationSpinnerTabsTab GroupTabTab Panel GroupTab PanelToggle

Component Data Grid Table Header

This component is used to show headers for data tables. It's used with the data grid component.

Example

IDAnimal nameAnimal type
<som-grid
id="sortable-grid"
labelled-by="sortable-grid-2"
striped
hoverable
>
<table class="table" id="exampleTable">
<thead>
<tr>
<th><som-grid-th name="id">ID</som-grid-th></th>
<th><som-grid-th name="name">Animal name</som-grid-th></th>
<th><som-grid-th name="type">Animal type</som-grid-th></th>
</tr>
</thead>
<tbody id="exampleTableBody"></tbody>
</table>
</som-grid>

Props

AttrTypeDefaultDocs

direction

"ascending" | "descending" | "none"

This property sets the sorting dirction of the data grid.

name

string

This property sets the name of the data grid column.

Events

EventDetailDocs

columnSortDirectionChange

any

This event will be triggered anytime sorting is changed

Healthy

Healthy content is accurate and represents our most up-to-date recommendations.

Get in touch

Do you have an idea, or want to help us improve this page? Reach out to us via email.

DTMB-DG-Support@michigan.gov

Need help? Visit our Support page to learn how to get assistance, troubleshoot issues, and connect with the team.

Get in touch

Do you have an idea, or want to help us improve this page? Reach out to us via email.

DTMB-DG-Support@michigan.gov

Need help? Visit our Support page to learn how to get assistance, troubleshoot issues, and connect with the team.

Open source