Gridular v3

✨ Features

• ⚡ True Virtualization - Handles 100,000+ rows smoothly using @tanstack/react-virtual
• 📊 Data Grouping - Multi-level hierarchical grouping with expand/collapse
• 🔍 Sorting & Filtering - Column-level sorting and filtering with custom functions
• 📄 Pagination - Client-side and server-side pagination support
• ✏️ Column Resizing - Drag to resize columns with persistence
• 🔄 Column Reordering - Drag-and-drop column reordering
• 👁️ Column Management - Show/hide columns with reset to defaults
• 📱 Expandable Rows - Custom expandable row content
• 🎯 Cell Selection - Individual cell selection with visual indicators
• 💾 State Persistence - localStorage persistence for grid preferences
• 🎨 Dual Styling - Support for both Tailwind CSS and TSS-React (CSS-in-JS)
• 🧪 Fully Tested - 43 comprehensive test cases
• 📘 TypeScript First - Complete type safety and IntelliSense support

📦 Installation

```bash

npm

npm install gridular

pnpm

pnpm add gridular

yarn

yarn add gridular ```

🚀 Quick Start

```tsx import { DataGrid } from 'gridular'; import type { ColumnDef } from 'gridular';

const columns: ColumnDef[] = [ { id: 'name', key: 'name', header: 'Name', enableSorting: true }, { id: 'email', key: 'email', header: 'Email', enableSorting: true }, { id: 'age', key: 'age', header: 'Age', enableSorting: true }, ];

const data = [ { id: '1', name: 'John Doe', email: '[email protected]', age: 28 }, { id: '2', name: 'Jane Smith', email: '[email protected]', age: 34 }, ];

function App() { return ; } ```

📖 Documentation

See MIGRATION_GUIDE.md for upgrading from v2.

For complete examples, run Storybook: ```bash npm run storybook ```

🔄 Migration from v2

Quick changes:

• ✅ Add `key` property to all columns
• ✅ Rename `cell` to `renderCell`
• ✅ Remove `ThemeProvider` wrapper
• ✅ Consolidate pagination props
• ✅ Remove group icon props

See PRODUCT_STATUS_GRID_MIGRATION.md for specific ProductStatusGrid migration example.

📚 More Examples

• Storybook
• Run locally: `npm run storybook`

🧪 Testing

```bash npm test # Run tests npm run test:ui # Tests with UI npm run test:coverage # With coverage ```

📝 License

MIT © Michael Teagle

🌟 Built With

• @tanstack/react-virtual - Virtualization
• Radix UI - Accessible components
• Tailwind CSS - Styling
• TSS-React - CSS-in-JS