#What is Shadcn Data Table Resize Columns?

Shadcn Data Table Resize Columns is a free, open-source React component by danielagg, designed to extend shadcn-ui’s DataTable with basic column resizing functionality. It’s ideal for developers building data-heavy applications like admin dashboards, financial trackers, or inventory systems in Next.js or React projects, where users need to adjust column widths interactively.

Built with React, TypeScript, Tailwind CSS, shadcn-ui, and TanStack Table, it leverages TanStack Table’s column sizing APIs for functional resizing. The component integrates via shadcn CLI and is showcased in a live demo. It addresses community issues with shadcn-ui’s DataTable ignoring TanStack’s size property by providing a basic, functional solution.

#Features ⚡️

• Column Resizing: Drag column borders to adjust widths dynamically.

• TanStack Table Integration: Uses TanStack’s size, minSize, and maxSize for control.

• Accessible Design: Inherits shadcn-ui’s WAI-ARIA compliance.

• CLI Integration: Install via shadcn CLI for seamless setup.

• Responsive Styling: Tailwind CSS ensures adaptability across devices.

• TypeScript Support: Type-safe for robust development.

#Pros and Cons

#Pros ✅

• shadcn-ui Compatibility: Aligns with shadcn-ui’s aesthetic and accessibility.

• Free and Open-Source: MIT license allows unrestricted use and customization.

• Functional Resizing: Addresses TanStack Table’s size property issues in shadcn-ui.

• Easy Setup: CLI simplifies integration into shadcn-ui projects.

• Live Demo: Vercel-hosted demo aids implementation.

#Cons ⚠️

• React Dependency: Limited to React/shadcn-ui ecosystems.

• Basic Implementation: Described as “not complete, but functional,” lacking advanced features like auto-resize.

• Setup Requirements: Needs shadcn-ui, Tailwind CSS, and TanStack Table installed.

• Client-Side Focus: Resizing is client-side; persisting sizes requires custom logic.

• Limited Community Traction: Early-stage project with minimal stars or issues.

#Included Components

• DataTable: Extended shadcn-ui DataTable with resizable columns.

• ResizeHandle: Drag handle for adjusting column widths.

• Table Components: Inherits shadcn-ui’s Table, TableHeader, TableRow, etc.

#Pricing 💸

Shadcn Data Table Resize Columns is completely free under the MIT license, with no premium tiers.

#Integrations 🧰

• React: Core framework for the component.

• shadcn-ui: Provides accessible, styled table primitives.

• Tailwind CSS: Utility-first styling for responsive design.

• Next.js: Optimized for Next.js projects.

• TypeScript: Ensures type safety.

• TanStack Table: Powers table functionality and column resizing.