Column Management
Show or hide columns, and freeze them left or right so they stay visible while the rest of the table scrolls horizontally.
Installation
Column management ships with Data Table — no separate install.
Works with:Data Table
npx shadcn@latest add @kotsas-ui/data-tableUsage
Open the Columns menu in the toolbar to toggle visibility or freeze a column. Both are on by default per column via defineColumns.
Set up CI pipeline | High | Done | $2,400.00 | True |
Design onboarding flow | Medium | In progress | $3,200.00 | False |
Migrate auth to OAuth2 | Urgent | In progress | $5,600.00 | False |
Write API docs | Low | To do | $900.00 | False |
Freeze columns
This table is ~1300px wide — scroll it horizontally and the frozen Name column holds its ground. Pass initialColumnPinning to freeze declaratively, or let users do it from the Columns menu.
Elena Ruiz | Engineering | Staff Engineer | Barcelona, ES | $132,000.00 | Mar 15, 2021 | True | |
Marcus Webb | Design | Product Designer | London, UK | $98,000.00 | Sep 1, 2022 | True | |
Sofia Novak | Sales | Account Executive | Prague, CZ | $87,000.00 | Jan 10, 2023 | True | |
Liam Chen | Engineering | Frontend Engineer | Singapore, SG | $112,000.00 | Nov 23, 2020 | False | |
Amara Diallo | Operations | Ops Manager | Dakar, SN | $91,000.00 | May 6, 2024 | True |
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| enableHiding? | boolean | true | Per-column option on every col.* method. When false, the column has no visibility checkbox in the Columns menu. |
| enablePinning? | boolean | true | Per-column option. When false, the column has no freeze-left/right buttons in the Columns menu. |
| initialColumnPinning? | { left?: string[]; right?: string[] } | — | DataTable prop — columns frozen from the start, by column id. Applied once at mount; users can still change it afterwards. |