A compact column visibility dropdown that lets users check or uncheck every hideable table column.
| Project | Status | Owner | Updated |
|---|---|---|---|
| Website redesign | In progress | Maya Chen | Aug 4, 2026 |
| Mobile application | Planning | Noah Williams | Jul 29, 2026 |
| Analytics dashboard | In progress | Aarav Patel | Aug 2, 2026 |
| Customer portal | Complete | Sofia Garcia | Jul 18, 2026 |
Installation
Copy the Source Code
Copy and paste the following code into your project:
table/data-table-view/data-table-view.svelte
table/data-table-view/index.ts
Folder Structure
Folder Structure
Usage
Enable column visibility on the table, then pass the table instance to the component. The important setup is highlighted below.
usage.svelte
Props
Data table view props
| Name | Type | Default | Description |
|---|---|---|---|
table | TanStack table | required | The table instance containing columns configured with the visibility feature. |
label | string | "View" | Text displayed in the dropdown trigger. |
class | string | undefined | Optional classes for the dropdown trigger. |