📚 OpenGridX Documentation

Welcome to the official documentation for OpenGridX, the high-performance React DataGrid library.

🚀 Live Interactive Documentation | 🔍 API Reference

---

🏗️ Base Components API

Detailed reference for the core structural components.

• DataGrid - The main component and props
• Header - Column headers and grouping
• Row - Row rendering and states
• Cell - Individual cell logic and rendering
• Toolbar - Global grid actions
• Pagination - Navigation and paging
• Filter Panel - Advanced filter UI
• Tooltip - Dynamic UI tooltips
• Column Visibility - Managing visible fields
• Column Grouping - Multi-level nested headers
• Column Resizing - Dynamic width controls
• Empty State - No-rows overlay and noRowsOverlay slot
• Error Overlay - Data source error display
• Aggregation Footer - Sticky totals row

---

🚀 Features

In-depth guides on the grid's functional capabilities.

• Virtualization - Handling massive datasets
• Filtering & Search - Column filters and Global Quick Search
• Header Filters - A filter row under the column headers, sharing the filter model
• Sorting & Pagination - Organizing and navigating data
• Editing & Reordering - Inline edits and Drag-and-Drop
• Loading & Performance - Skeletons, Lazy, and Infinite loading
• Row Selection - Multi & single choice selection
• Clipboard - Copy rows and ranges, paste from Excel / Sheets, clear a range with Delete
• Cell Range Selection - Spreadsheet-style cell ranges, copy and a sum / average status bar
• Undo & Redo - Ctrl+Z / Ctrl+Shift+Z for edits, pastes and range clears
• Fill Handle - Drag the range corner to continue a series or copy, Ctrl+D / Ctrl+R
• Pinning - Sticky columns and rows
• State Persistence - Save/Restore grid configuration
• Aggregation & Pivot - Data summarization and analytics
• Tree Data & Grouping - Hierarchical layout and Column grouping
• Cell Spanning - Row and Col span spanning
• Master-Detail - Expandable Detail Panels
• Keyboard & Accessibility - Keys, focus behaviour and ARIA structure
• Right-to-Left (RTL) - What works in dir="rtl", what was fixed, and the known limitations (pinned columns)
• List View - Card-based responsive layout
• Infinite Scroll - Advanced performance loading
• Data Source - Server-side fetching and SSR
• Next.js (App Router) - Client components, server-fetched rows, Route Handlers, the AI toolkit on server and client, common errors
• Export Guide - Excel, CSV, JSON, and Print
• AI Toolkit - JSON Schema of the grid state for your own model, a validator for its replies, the Ask AI panel (aiAssistant) and tools for AI agents (@opencorestack/opengridx/ai)

---

🎨 Customization

Make the grid your own.

• Theming Guide - CSS variables and branding
• Slots API - Replacing internal components

---

🏛️ Architecture — Internal Hooks

Reference for core hooks extracted from DataGrid.tsx. Intended for contributors.

• DataGrid orchestration - Every hook DataGrid.tsx calls, in call order, and why the order matters
• useGridControlledState - Controlled/uncontrolled state for all 7 state pairs
• useGridRowPipeline - Filter → pin → sort → paginate row pipeline
• useGridVirtualization - Render context and scroll-position math
• useGridColumns - Column management: effective, ordered, visible, reorder handlers
• useGridVisibleRows - Render window: pinned + virtual center merge
• useGridScrollSync - RAF-batched scroll tick, scrollPosRef, onRowsScrollEnd threshold
• useGridStateSnapshot - onStateChange callback delivery on sort/filter/pagination/column changes

🔀 Migration Guides

• v2 → v3 - Underscore row fields removed, params.row identity, grouped export labels
• v1 → v2 - Removed dead props, groupable / availableAggregationFunctions enforcement

🛠️ Project Meta

• Development Roadmap - What's built and what's next