|
| 1 | +# OpenGridX — AI Context for Consumer Projects |
| 2 | + |
| 3 | +This file is intended to be fed to an AI coding assistant (Claude or similar) working on a project |
| 4 | +that uses the `@opencorestack/opengridx` library. Read it in full before writing any grid-related code. |
| 5 | + |
| 6 | +--- |
| 7 | + |
| 8 | +## What this library is |
| 9 | + |
| 10 | +`@opencorestack/opengridx` is a zero-dependency, high-performance React DataGrid component. |
| 11 | +Current version: **2.0.0**. It is a full custom implementation — not a wrapper around MUI or any |
| 12 | +other library. |
| 13 | + |
| 14 | +--- |
| 15 | + |
| 16 | +## Where to find documentation (REQUIRED — read these before answering questions) |
| 17 | + |
| 18 | +The package ships its full documentation inside `node_modules`. **Always read these files before |
| 19 | +answering questions about the grid API** — do not rely on training data, which may reflect an older |
| 20 | +version. |
| 21 | + |
| 22 | +``` |
| 23 | +node_modules/@opencorestack/opengridx/docs/API_REFERENCE.md ← complete prop + type reference |
| 24 | +node_modules/@opencorestack/opengridx/CHANGELOG.md ← what changed in each version |
| 25 | +node_modules/@opencorestack/opengridx/llms.txt ← AI-readable package summary |
| 26 | +node_modules/@opencorestack/opengridx/README.md ← quick-start overview |
| 27 | +``` |
| 28 | + |
| 29 | +Feature guides (each covers one area in depth): |
| 30 | +``` |
| 31 | +node_modules/@opencorestack/opengridx/docs/features/sorting-pagination.md |
| 32 | +node_modules/@opencorestack/opengridx/docs/features/tree-data-grouping.md |
| 33 | +node_modules/@opencorestack/opengridx/docs/features/selection.md |
| 34 | +node_modules/@opencorestack/opengridx/docs/features/filtering.md |
| 35 | +node_modules/@opencorestack/opengridx/docs/features/export-guide.md |
| 36 | +node_modules/@opencorestack/opengridx/docs/features/aggregation-pivot.md |
| 37 | +node_modules/@opencorestack/opengridx/docs/features/editing-reordering.md |
| 38 | +node_modules/@opencorestack/opengridx/docs/features/master-detail.md |
| 39 | +node_modules/@opencorestack/opengridx/docs/features/pinning.md |
| 40 | +node_modules/@opencorestack/opengridx/docs/features/toolbar-customization.md |
| 41 | +node_modules/@opencorestack/opengridx/docs/features/virtualization.md |
| 42 | +node_modules/@opencorestack/opengridx/docs/features/infinite-scroll.md |
| 43 | +node_modules/@opencorestack/opengridx/docs/features/pdf-export.md |
| 44 | +node_modules/@opencorestack/opengridx/docs/features/state-persistence.md |
| 45 | +node_modules/@opencorestack/opengridx/docs/features/loading-states.md |
| 46 | +``` |
| 47 | + |
| 48 | +Component docs (internal component API): |
| 49 | +``` |
| 50 | +node_modules/@opencorestack/opengridx/docs/components/datagrid.md |
| 51 | +node_modules/@opencorestack/opengridx/docs/components/header.md |
| 52 | +node_modules/@opencorestack/opengridx/docs/components/row.md |
| 53 | +node_modules/@opencorestack/opengridx/docs/components/cell.md |
| 54 | +node_modules/@opencorestack/opengridx/docs/components/toolbar.md |
| 55 | +node_modules/@opencorestack/opengridx/docs/components/pagination.md |
| 56 | +node_modules/@opencorestack/opengridx/docs/components/column-visibility.md |
| 57 | +node_modules/@opencorestack/opengridx/docs/components/aggregation-footer.md |
| 58 | +``` |
| 59 | + |
| 60 | +TypeScript types (authoritative source for all interfaces): |
| 61 | +``` |
| 62 | +node_modules/@opencorestack/opengridx/dist/index.d.ts ← compiled declarations |
| 63 | +node_modules/@opencorestack/opengridx/lib/types/index.ts ← source (more readable) |
| 64 | +``` |
| 65 | + |
| 66 | +--- |
| 67 | + |
| 68 | +## Minimal usage |
| 69 | + |
| 70 | +```tsx |
| 71 | +import { DataGrid } from '@opencorestack/opengridx'; |
| 72 | +import type { GridColDef } from '@opencorestack/opengridx'; |
| 73 | + |
| 74 | +const columns: GridColDef[] = [ |
| 75 | + { field: 'id', headerName: 'ID', width: 80 }, |
| 76 | + { field: 'name', headerName: 'Name', width: 160 }, |
| 77 | +]; |
| 78 | + |
| 79 | +const rows = [ |
| 80 | + { id: 1, name: 'Alice' }, |
| 81 | + { id: 2, name: 'Bob' }, |
| 82 | +]; |
| 83 | + |
| 84 | +export default function MyPage() { |
| 85 | + return <DataGrid rows={rows} columns={columns} />; |
| 86 | +} |
| 87 | +``` |
| 88 | + |
| 89 | +Styles load automatically — no manual CSS import needed in Vite/Webpack/CRA. If the grid appears |
| 90 | +unstyled (Next.js App Router, SSR), add once to your app root: |
| 91 | +```ts |
| 92 | +import '@opencorestack/opengridx/styles'; |
| 93 | +``` |
| 94 | + |
| 95 | +--- |
| 96 | + |
| 97 | +## Key patterns to know |
| 98 | + |
| 99 | +### Controlled vs uncontrolled state |
| 100 | + |
| 101 | +Props like `sortModel`, `paginationModel`, `rowSelectionModel`, `filterModel` can be either |
| 102 | +**controlled** (you pass the value + an `onChange` handler) or **uncontrolled** (you pass neither; |
| 103 | +the grid manages its own state, optionally seeded via `initialState`). |
| 104 | + |
| 105 | +```tsx |
| 106 | +// Uncontrolled pagination — grid handles its own page state: |
| 107 | +<DataGrid |
| 108 | + pagination |
| 109 | + pageSizeOptions={[10, 25]} |
| 110 | + initialState={{ pagination: { paginationModel: { pageSize: 10, page: 0 } } }} |
| 111 | +/> |
| 112 | + |
| 113 | +// Controlled pagination — you own the state: |
| 114 | +<DataGrid |
| 115 | + pagination |
| 116 | + paginationModel={model} |
| 117 | + onPaginationModelChange={setModel} |
| 118 | +/> |
| 119 | +``` |
| 120 | + |
| 121 | +**Important (v2.0.0 fix):** Uncontrolled pagination navigation was broken in v1 — it now works |
| 122 | +correctly. If you have uncontrolled grids and pagination wasn't responding, upgrading to v2 fixes it. |
| 123 | + |
| 124 | +### Row hierarchy metadata |
| 125 | + |
| 126 | +For tree-data and row-grouping, hierarchy metadata lives in `params.rowMeta` inside `renderCell`, |
| 127 | +not on `params.row`: |
| 128 | + |
| 129 | +```tsx |
| 130 | +renderCell: (params) => { |
| 131 | + const depth = params.rowMeta?.treeDepth ?? 0; |
| 132 | + const hasChildren = params.rowMeta?.hasChildren; |
| 133 | + return <span style={{ paddingLeft: depth * 16 }}>{params.value}</span>; |
| 134 | +} |
| 135 | +``` |
| 136 | + |
| 137 | +### Column definitions — useful v2 fields |
| 138 | + |
| 139 | +```tsx |
| 140 | +const columns: GridColDef[] = [ |
| 141 | + { |
| 142 | + field: 'department', |
| 143 | + headerName: 'Department', |
| 144 | + |
| 145 | + // Custom label for group-header rows when this field is the active grouping level: |
| 146 | + groupingValueFormatter: ({ value }) => `📁 ${String(value)}`, |
| 147 | + |
| 148 | + // Prevent this field from being used as a grouping dimension: |
| 149 | + groupable: false, |
| 150 | + |
| 151 | + // Restrict which aggregation functions are valid for this column. |
| 152 | + // Built-in names: 'sum' | 'avg' | 'count' | 'min' | 'max' | 'unique' |
| 153 | + // ('unique' = count of distinct non-null values, implemented via Set) |
| 154 | + availableAggregationFunctions: ['sum', 'avg'], |
| 155 | + |
| 156 | + // Browser tooltip on the column header: |
| 157 | + description: 'The employee\'s department', |
| 158 | + }, |
| 159 | +]; |
| 160 | +``` |
| 161 | + |
| 162 | +### Multi-column sorting |
| 163 | + |
| 164 | +```tsx |
| 165 | +// Option A — multiSort prop (single-click appends): |
| 166 | +<DataGrid multiSort sortModel={sortModel} onSortModelChange={setSortModel} /> |
| 167 | + |
| 168 | +// Option B — Shift+click always appends without any prop. |
| 169 | +``` |
| 170 | + |
| 171 | +--- |
| 172 | + |
| 173 | +## v1 → v2 migration (if this project was on v1) |
| 174 | + |
| 175 | +Read the full guide: |
| 176 | +``` |
| 177 | +node_modules/@opencorestack/opengridx/docs/migration/v1-to-v2.md ← if it ships |
| 178 | +``` |
| 179 | + |
| 180 | +### Quick summary |
| 181 | + |
| 182 | +**Hard breaking (TypeScript compile error):** |
| 183 | + |
| 184 | +| Removed prop | Fix | |
| 185 | +|---|---| |
| 186 | +| `onPinnedRowsChange` on `<DataGrid>` | Delete it — callback was never called | |
| 187 | +| `onRowGroupingModelChange` on `<DataGrid>` | Delete it — callback was never called | |
| 188 | + |
| 189 | +**Behavioral (silent, no TS error — audit these):** |
| 190 | + |
| 191 | +| Change | Risk | |
| 192 | +|---|---| |
| 193 | +| `groupable: false` now honored | If any column had `groupable: false` AND appeared in `rowGroupingModel`, it is now skipped. Previously it was grouped anyway. | |
| 194 | +| `availableAggregationFunctions` now enforced | If a column had this set, aggregation functions outside the list are now skipped. Check `aggregationModel` matches the allowed list. | |
| 195 | +| `groupingColDef` now creates a real column | If passed, a dedicated `__group__` column now appears at position 0, pinned left. Previously it was a no-op. Remove it if you don't want the column. | |
| 196 | + |
| 197 | +**Previously broken, now fixed (verify your UI still looks right):** |
| 198 | + |
| 199 | +| Fix | What to check | |
| 200 | +|---|---| |
| 201 | +| Uncontrolled pagination | Pagination controls now actually change pages. If you had workarounds for this, they may now conflict. | |
| 202 | +| `disableRowSelectionOnClick` | Now prevents click-to-select. If you passed it expecting it to be ignored, selection behavior changes. | |
| 203 | +| `disableMultipleRowSelection` | Now caps selection to one row. Same caveat. | |
| 204 | +| `density` | Now sets row height. If you passed `density` expecting it to be ignored, row heights will change. | |
| 205 | + |
| 206 | +**Removed runtime row shim:** |
| 207 | + |
| 208 | +```tsx |
| 209 | +// ❌ v1 shim — no longer injected on params.row in v2: |
| 210 | +const hasChildren = (params.row as Record<string, unknown>)._hasChildren; |
| 211 | + |
| 212 | +// ✅ v2: |
| 213 | +const hasChildren = params.rowMeta?.hasChildren; |
| 214 | +``` |
| 215 | + |
| 216 | +### Migration checklist |
| 217 | + |
| 218 | +- [ ] Search for `onPinnedRowsChange` → delete |
| 219 | +- [ ] Search for `onRowGroupingModelChange` → delete |
| 220 | +- [ ] Search for `groupable: false` → verify field is not in `rowGroupingModel` |
| 221 | +- [ ] Search for `availableAggregationFunctions` → verify list covers active `aggregationModel` |
| 222 | +- [ ] Search for `groupingColDef` → verify you want the `__group__` column it now creates |
| 223 | +- [ ] Search for `params.row._hasChildren` / `._treeDepth` etc. → migrate to `params.rowMeta` |
| 224 | +- [ ] Run `tsc --noEmit` — compiler will flag any remaining type errors |
| 225 | + |
| 226 | +--- |
| 227 | + |
| 228 | +## Common mistakes to avoid |
| 229 | + |
| 230 | +- **Don't use `any`** — the library exports full generics. Use `GridColDef<YourRowType>` and |
| 231 | + `DataGrid<YourRowType>`. |
| 232 | +- **Don't import from deep paths** — import only from the package root: |
| 233 | + `import { DataGrid, exportToCsv } from '@opencorestack/opengridx'` |
| 234 | +- **`initialState` is for seeding, not controlling** — if you pass `initialState.sorting.sortModel` |
| 235 | + AND `sortModel` prop, the prop wins (controlled mode). Use one or the other. |
| 236 | +- **`pageSizeOptions` must include the active `pageSize`** — if `pageSize` is 10 but |
| 237 | + `pageSizeOptions` is `[25, 50]`, the selector will show a mismatch. Always include the initial |
| 238 | + page size in the options array. |
| 239 | +- **`apiRef` methods are only available after mount** — call `apiRef.current.*` inside event |
| 240 | + handlers or `useEffect`, never during render. |
| 241 | + |
| 242 | +--- |
| 243 | + |
| 244 | +## Exports available at the package root |
| 245 | + |
| 246 | +```ts |
| 247 | +// Component |
| 248 | +import { DataGrid } from '@opencorestack/opengridx'; |
| 249 | + |
| 250 | +// Hooks |
| 251 | +import { useGridApiRef } from '@opencorestack/opengridx'; |
| 252 | + |
| 253 | +// Export utilities |
| 254 | +import { exportToCsv, exportToExcel, exportToExcelAdvanced, |
| 255 | + exportToJson, printGrid, exportToPdf } from '@opencorestack/opengridx'; |
| 256 | + |
| 257 | +// Types |
| 258 | +import type { |
| 259 | + GridColDef, GridRowModel, GridRowId, |
| 260 | + DataGridProps, GridSortItem, GridSortModel, |
| 261 | + GridFilterModel, GridFilterItem, |
| 262 | + GridPaginationModel, GridColumnPinning, |
| 263 | + GridRowMeta, GridRowParams, GridCellParams, |
| 264 | + GridApi, GridInitialState, |
| 265 | + GridAggregationModel, GridPivotModel, |
| 266 | + GridLocaleText, GridSlots, |
| 267 | + GridGroupedExportRow, |
| 268 | +} from '@opencorestack/opengridx'; |
| 269 | +``` |
| 270 | + |
| 271 | +--- |
| 272 | + |
| 273 | +## Getting help |
| 274 | + |
| 275 | +- Full API reference: `node_modules/@opencorestack/opengridx/docs/API_REFERENCE.md` |
| 276 | +- Migration guide: `node_modules/@opencorestack/opengridx/docs/migration/v1-to-v2.md` |
| 277 | +- Changelog: `node_modules/@opencorestack/opengridx/CHANGELOG.md` |
| 278 | +- GitHub: https://github.com/OpenCoreStack/OpenGridX |
0 commit comments