A high-performance virtualized React data grid with grouping, sorting, filtering, and comprehensive customization
npm install gridular
A high-performance virtualized React data grid with comprehensive 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
\\\bashnpm
npm install gridular
\\\\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
}
\\\
See MIGRATION_GUIDE.md for upgrading from v2.
For complete examples, run Storybook:
\\\bash\
npm run storybook
\\
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.
- Storybook
- Run locally: \npm run storybook\
\\\bash\
npm test # Run tests
npm run test:ui # Tests with UI
npm run test:coverage # With coverage
\\
MIT ยฉ Michael Teagle
- @tanstack/react-virtual - Virtualization
- Radix UI - Accessible components
- Tailwind CSS - Styling
- TSS-React - CSS-in-JS
---