Company Table with Column Visibility

Companies List 2Pro

A data table with TanStack Table featuring sortable columns, row selection, search filtering, column visibility toggle, and add company button.

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

PackageType
@tanstack/react-tableNPM
lucide-reactNPM
reactNPM
react-iconsNPM
badge
@shadcn
Registry
button
@shadcn
Registry
checkbox
@shadcn
Registry
input
@shadcn
Registry
label
@shadcn
Registry
popover
@shadcn
Registry
table
@shadcn
Registry