@alaarab/ogrid-mcp 2.12.0 → 2.14.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -580,16 +580,24 @@ Configuration for virtual scrolling (rendering only visible rows for large datas
|
|
|
580
580
|
```typescript
|
|
581
581
|
interface IVirtualScrollConfig {
|
|
582
582
|
enabled?: boolean;
|
|
583
|
+
paginate?: boolean;
|
|
583
584
|
rowHeight?: number;
|
|
584
585
|
overscan?: number;
|
|
586
|
+
threshold?: number;
|
|
587
|
+
columns?: boolean;
|
|
588
|
+
columnOverscan?: number;
|
|
585
589
|
}
|
|
586
590
|
```
|
|
587
591
|
|
|
588
592
|
| Field | Type | Default | Description |
|
|
589
593
|
|-------|------|---------|-------------|
|
|
590
594
|
| `enabled` | `boolean` | `false` | Enable virtual scrolling. Must be `true` to activate. |
|
|
595
|
+
| `paginate` | `boolean` | `true` | When `false`, bypass pagination and virtual-scroll the entire dataset in one viewport. Pagination controls are hidden. Client-side grids only. |
|
|
591
596
|
| `rowHeight` | `number` | `36` | Fixed row height in pixels. All rows must have the same height. Required when enabled. |
|
|
592
597
|
| `overscan` | `number` | `5` | Number of extra rows to render above/below the visible area (for smoother scrolling). |
|
|
598
|
+
| `threshold` | `number` | `100` | Minimum row count before virtual scrolling activates. Below this, all rows render. |
|
|
599
|
+
| `columns` | `boolean` | `false` | Enable column virtualization -- render only columns visible in the horizontal viewport. |
|
|
600
|
+
| `columnOverscan` | `number` | `2` | Number of extra columns to render beyond the visible horizontal range on each side. |
|
|
593
601
|
|
|
594
602
|
### Usage Example
|
|
595
603
|
|
|
@@ -96,6 +96,32 @@ The grid replaces the standard row rendering with a virtualized strategy:
|
|
|
96
96
|
|
|
97
97
|
Virtual scrolling automatically becomes a no-op when the dataset has fewer than **100 rows**. Below that threshold, all rows render normally -- there is no performance benefit from virtualizing a small list, and the passthrough avoids unnecessary spacer elements.
|
|
98
98
|
|
|
99
|
+
### Full-Dataset Virtualization (No Pagination)
|
|
100
|
+
|
|
101
|
+
By default, virtual scrolling windows the rows of the **current page** -- the grid still paginates, and each page is a separate scroll region. For a large in-memory dataset where paging would be an arbitrary interruption, set `paginate: false` to virtual-scroll the **entire** dataset in one continuous viewport:
|
|
102
|
+
|
|
103
|
+
```tsx
|
|
104
|
+
<OGrid
|
|
105
|
+
columns={columns}
|
|
106
|
+
data={data} // e.g. 1,000,000 rows
|
|
107
|
+
getRowId={(r) => r.id}
|
|
108
|
+
virtualScroll={{ enabled: true, rowHeight: 36, paginate: false }}
|
|
109
|
+
statusBar
|
|
110
|
+
/>
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
With `paginate: false`:
|
|
114
|
+
|
|
115
|
+
- Every row is a candidate for rendering -- the grid scrolls through the whole dataset, not one page at a time.
|
|
116
|
+
- Pagination controls are **hidden** (there are no pages to navigate).
|
|
117
|
+
- Sorting and filtering still apply across the full dataset.
|
|
118
|
+
|
|
119
|
+
`paginate` only applies to **client-side** grids (`data`). Server-side grids (`dataSource`) always page through the data source -- see [Server-Side Data](./server-side-data) for the windowed/lazy mode that streams very large datasets on demand.
|
|
120
|
+
|
|
121
|
+
:::tip Standalone DataGridTable
|
|
122
|
+
When mounting the lower-level `DataGridTable` directly (without `OGrid`), give its parent a definite height so the virtual-scroll viewport can be measured. A virtual-scroll `DataGridTable` falls back to a `min-height` of `480px` (override with the `--ogrid-virtual-scroll-min-height` CSS variable) so it never collapses to the header height.
|
|
123
|
+
:::
|
|
124
|
+
|
|
99
125
|
### Custom Row Height
|
|
100
126
|
|
|
101
127
|
The `rowHeight` property sets the fixed pixel height for every row. Choose a value that matches your CSS row height:
|
|
@@ -297,8 +323,10 @@ Column virtualization requires that all columns have a defined width (via `defau
|
|
|
297
323
|
| Field | Type | Default | Description |
|
|
298
324
|
|-------|------|---------|-------------|
|
|
299
325
|
| `enabled` | `boolean` | `false` | Enable row virtual scrolling. Must be set to `true` to activate. |
|
|
326
|
+
| `paginate` | `boolean` | `true` | When `false`, bypass pagination and virtual-scroll the entire dataset in one viewport. Pagination controls are hidden. Client-side grids only. |
|
|
300
327
|
| `rowHeight` | `number` | `36` | Fixed height of each row in pixels. Required when row virtualization is enabled. |
|
|
301
328
|
| `overscan` | `number` | `5` | Extra rows rendered above and below the visible area. |
|
|
329
|
+
| `threshold` | `number` | `100` | Minimum row count before virtualization activates. Below this, all rows render. |
|
|
302
330
|
| `columns` | `boolean` | `false` | Enable column virtualization. Renders only columns visible in the horizontal viewport. |
|
|
303
331
|
| `columnOverscan` | `number` | `2` | Extra columns rendered beyond the visible horizontal range on each side. |
|
|
304
332
|
|