DocsSupportPricing
Roadmap (has updates coming soon)XFigma3.7K
Sign inGet All-Access
Categories
Base8
AdvancedAdded 2 new Data Grid Advanced blocks, 5 in all8
Columns5
  • Access Permissions Matrix
  • Course Catalog
  • Work Queue
  • Member Display Columns
  • Company Attributes
Drag & Drop4
Editing6
Expansion3
Filtering4
Grouping7
Virtualization2

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Installs with a ReUI Pro or Ultimate license.

When to use

  • Wide records with more fields than fit, where viewers show, hide, add or swap columns
  • Table display settings a viewer changes, such as density, a sticky header or resizable and movable columns
  • Role and permission matrices whose scope columns change with the selected tab

When not to use

  • A table with a fixed set of columns that no viewer needs to change: use the Data Grid component
  • A long list whose main job is narrowing records through a multi field rule builder: use the Filtering blocks
  • Thousands of rows loaded as the reader scrolls, with no page controls: use the Virtualization blocks

Agent notes

  • Every page.tsx centers the grid in a min-h-svh main with max-w-7xl and padding; drop that main when the grid sits in an app shell
  • Search and filters run in the browser over the demo array handed to useTable; move them to your API for large tables
  • Column and display choices live in component useState and reset on reload; persist them per user when they should stick

Third-party API docs

  • TanStack Table v9: API reference, docs, used by 5 of 5 blocks
  • Sonner v2: API reference, docs, used by 5 of 5 blocks
Markdownhttps://web.dev.reui.io/blocks/data-grid/columns.md
MCPsearch({ query: "columns", type: "block", category: "columns" })
Full index for agents:llms.txtReUI MCP setup

Shadcn Data Grid Blocks for Column Visibility, Pinning and Resizing

Every serious grid needs the same four controls: which columns show, which stay pinned while the rest scroll, how wide each one is, and how dense the rows are. These blocks ship them as working toolbar chrome on the ReUI Data Grid rather than as a checklist of options to wire yourself.

Each block is a complete screen with fixture data, so the column menu, the pin affordance and the resize handle are already positioned against real headers, and the settings survive a re-render the way a user expects.

All Columns Blocks

Open any block on its own page for a live preview, the components it is built from, and the install command.

  • Access Permissions Matrix Workspace permissions data grid with tab-swapped scope columns and per-cell access toggles
  • Course Catalog Course Catalog Data Grid with Settings Popover for Density and Column Visibility
  • Work Queue Work queue data grid with table and card view toggle and column display controls
  • Member Display Columns Members directory data grid with toggleable display columns and view settings popover
  • Company Attributes CRM companies grid with a drill-down cascader that adds real columns on demand

What the Columns blocks cover

Data Grid screens, each a full block with fixture data:

  • Workspace permissions data grid with tab-swapped scope columns and per-cell access toggles
  • Course Catalog Data Grid with Settings Popover for Density and Column Visibility
  • Work queue data grid with table and card view toggle and column display controls
  • Members directory data grid with toggleable display columns and view settings popover
  • CRM companies grid with a drill-down cascader that adds real columns on demand

Built from

  • shadcn/ui components Avatar, Button, Dropdown Menu, Switch, Select, Separator, the same components your project already owns.
  • Both twins, every style Each block ships on Base UI and on Radix, in 8 design styles, and names every part it composes on its page.

All Shadcn Block Groups

Browse the full ReUI Shadcn blocks library by product surface. Each group bundles category-level blocks you can mix and match across your project.

  • Shadcn Application Blocks (303) Browse 303 Shadcn Application blocks across 23 categories.
  • Shadcn Data Grid Blocks (47) Browse 47 Shadcn Data Grid blocks across 9 categories.
  • Shadcn Charts Blocks (52) Browse 52 Shadcn Charts blocks across 10 categories.
  • Shadcn Solutions Blocks (76) Browse 76 Shadcn Solutions blocks across 11 categories.
  • Shadcn AI & Agents Blocks (22) Browse 22 Shadcn AI & Agents blocks across 3 categories.
  • Shadcn eCommerce Blocks (87) Browse 87 Shadcn eCommerce blocks across 13 categories.
  • Shadcn Marketing Blocks (67) Browse 67 Shadcn Marketing blocks across 8 categories.

Frequently Asked Questions

Does column state persist?

Each block keeps visibility, pinning, order and sizing in grid state; persisting it to storage or a user profile is one callback away, and the Data Grid docs show the shape.

Can I pin columns on both sides?

Yes. The ReUI Data Grid pins to the left and the right, and the blocks show the shadow and separator treatment for each edge.

How do I install a Columns block?

Open the block on its page, copy the install command (the shadcn CLI with the @reui registry and your license key) or the AI prompt, and run it in your project. The block, its fixtures and every ReUI and shadcn dependency land in one command.

Is a license needed?

Columns blocks are part of ReUI Pro: one payment, lifetime updates, every block in every style. The ReUI primitives and the free examples they build on install with no license.

Start building with ReUI Pro today.

Every Pro block, every style, and every future addition, with one license for unlimited projects.

Get All-Access

From $249, once. Lifetime updates.

Application

  • App Shell
  • Auth
  • Card
  • Dashboard
  • Dialog
  • Empty State
  • Event Calendar
  • Flow
  • Form
  • Gantt
  • Kanban Board
  • List
  • Navbar
  • Onboarding
  • Profile
  • Rich Text Editor
  • Schedule
  • Settings
  • Sheet
  • Stats2 meter cards moved here from Charts, 17 in all
  • Timeline
  • Whiteboard
  • Wizard

Data Grid

  • Base
  • AdvancedAdded 2 new Data Grid Advanced blocks, 5 in all
  • Columns
  • Drag & Drop
  • Editing
  • Expansion
  • Filtering
  • Grouping
  • Virtualization

Charts

  • Area ChartAdded a new Inbound Leads area chart block
  • Bar Chart
  • Composed Chart
  • Line Chart
  • Pie Chart
  • Radial Chart
  • Sankey ChartNew Sankey Chart category with 3 flow chart blocks
  • Slope ChartNew Slope Chart category with 2 rank-shift chart blocks
  • Sparkline
  • Status Tracker

AI & Agents

  • AI Chat
  • Agent Activity
  • AI UsageNew AI Usage category with 2 spend blocks

Solutions

  • Dev Ops
  • AI Ops
  • CRM
  • Agents
  • Analytics
  • Billing
  • Bookings
  • Files
  • Inventory
  • Users
  • Digital TwinNew Digital Twin category with 2 interactive 3D blocks

Templates

  • All templates

eCommerce

  • Category Card
  • Checkout
  • Comparison
  • Coupon
  • Filter Sidebar
  • Product Card
  • Product Detail
  • Product Grid
  • Receipt
  • Review
  • Shopping Cart
  • Wishlist
  • Shop Hero

Marketing

  • Blog
  • Compare
  • Contact
  • CTA
  • FAQ
  • Hero
  • How It Works
  • Pricing

Resources

  • Components
  • Blocks
  • Icons
  • MCP for Agents
  • Docs
  • Support
  • Pricing
  • Tailwind Plus Alternative
  • Roadmap(has updates coming soon)
  • AffiliateSoon

Legal

  • Privacy Policy
  • Terms & Conditions
  • License
  • Refunds
  • Cookies

© 2026 ReUI. All rights reserved.

3.7K
  1. Blocks
  3. Data Grid
  5. Columns
DocsMarkdown

Shadcn Data Grid Blocks for Column Visibility, Pinning and Resizing

Column controls are where a data grid stops being a table: these 5 blocks show visibility, pinning, resizing and density as finished toolbars, not props.