A table heading with sorting, pinning, ordering, and visibility actions.
Click a heading to cycle its sort direction.
| Website redesign | Active | Maya Chen | Aug 4, 2026 | $24,000 |
| Mobile application | Paused | Noah Williams | Jul 29, 2026 | $42,000 |
| Analytics dashboard | Active | Aarav Patel | Aug 2, 2026 | $18,000 |
| Customer portal | Completed | Sofia Garcia | Jul 18, 2026 | $31,000 |
| Design system | Active | Liam Brown | Aug 1, 2026 | $15,000 |
| Marketing website | Completed | Emma Wilson | Jul 22, 2026 | $12,000 |
Installation
Copy the Source Code
Copy and paste the following code into your project:
table/data-table-column-header/data-table-column-header.svelte
table/data-table-column-header/index.ts
Folder Structure
Folder Structure
Usage
Pass the header column directly to the component. The highlighted features enable pinning and ordering; sorting and visibility remain independently optional.
usage.svelte
Props
Data table column header props
| Name | Type | Default | Description |
|---|---|---|---|
column | TanStack column | required | A TanStack column. Menu actions appear for the sorting, visibility, pinning, and ordering features configured on its table. |
title | string | required | The visible and accessible column label. |
class | string | undefined | Optional classes for the root header controls. |