Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Context Menu - Table Column Operations Menu
A React context menu for table column management with show/hide, move left/right, resize, and auto-fit operations with keyboard shortcuts
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Controlling table columns shouldn't require settings panels. This React context menu provides column visibility toggle, left/right movement, manual resize, and auto-fit width with shortcuts. Built with shadcn/ui and Radix UI with Lucide React icons—perfect for data tables, dashboards, or grid interfaces where users customize column layout.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Table Row Operations Menu
Row insert, duplicate, and delete operations
Table Sort Menu
Sort operations for column data
Table Filter Menu
Filter operations on columns
Layer Management Menu
Similar show/hide visibility pattern
Context Menu with Checkboxes
Multi-toggle visibility pattern
Dropdown Menu
Alternative menu for column settings
Questions you might have
React Context Menu - Table Row Operations Menu
A React context menu for table row operations with insert above/below, duplicate, delete row, and bulk delete with keyboard shortcuts for spreadsheets
React Context Menu - Text Editing Menu
A React context menu for text editing with cut, copy, paste, and select all operations plus standard keyboard shortcuts for text editors