Shadcn UI Crud Companies Block
CompaniesList2 is a data table with TanStack Table featuring column visibility controls. The toolbar includes a search input, filter button, column visibility toggle with eye icon, and an add company button. The table shows company name, email, status badge, and action columns with sortable headers and row selection checkboxes.
Light background with bordered table. The column visibility popover shows checkboxes to show/hide individual columns. Sort buttons display directional arrows. Status badges use colored variants. The toolbar has a clean layout with actions grouped on the right. Filter chips appear below the search when filters are active.
This variant adds column visibility management compared to CompaniesList1, useful for tables with many columns where users want to customize their view. The add button suggests integration with a create form. Higher complexity due to visibility state management and multiple interactive controls.
Dependencies
| Package | Type |
|---|---|
| @tanstack/react-table | NPM |
| lucide-react | NPM |
| react | NPM |
| react-icons | NPM |
badge @shadcn | Registry |
button @shadcn | Registry |
checkbox @shadcn | Registry |
input @shadcn | Registry |
label @shadcn | Registry |
popover @shadcn | Registry |
table @shadcn | Registry |