Gridular v3

A high-performance virtualized React data grid with comprehensive features


✨ 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

🚀 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: 'john@example.com', age: 28 },
{ id: '2', name: 'Jane Smith', email: 'jane@example.com', 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

---