@alaarab/ogrid-mcp 2.4.2 → 2.5.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.
Files changed (4) hide show
  1. package/bundled-docs/features/mobile-touch.mdx +174 -0
  2. package/bundled-docs/features/responsive-columns.mdx +170 -0
  3. package/bundled-docs/features/spreadsheet-selection.mdx +1 -1
  4. package/package.json +1 -1
package/bundled-docs/features/mobile-touch.mdx ADDED
@@ -0,0 +1,174 @@
1
+ ---
2
+ sidebar_position: 25
3
+ title: Mobile Touch Support
4
+ description: Touch-friendly interactions using the Pointer Events API for cell selection, fill handle, column resize, and column reorder on mobile and tablet devices.
5
+ ---
6
+
7
+
8
+ # Mobile Touch Support
9
+
10
+ OGrid uses the [Pointer Events API](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events) for all drag interactions, providing unified input handling across mouse, touch, and pen devices. All interactions — cell drag-selection, fill handle drag-to-fill, column resize, and column reorder — work on touch devices out of the box with no additional configuration.
11
+
12
+ ## How It Works
13
+
14
+ ### Pointer Events API
15
+
16
+ All drag-based interactions use `pointerdown`, `pointermove`, and `pointerup` instead of mouse-specific events. The Pointer Events API automatically handles mouse, touch, and stylus input through a single event model, so every interaction works identically regardless of input device.
17
+
18
+ ### Touch-Optimized Sizing
19
+
20
+ On touch devices (`@media (pointer: coarse)`), interactive handles are automatically enlarged for easier targeting:
21
+
22
+ | Element | Desktop Size | Touch Size |
23
+ |---------|-------------|------------|
24
+ | Fill handle | 7×7px | 14×14px |
25
+ | Column resize handle | 8px wide | 16px wide |
26
+
27
+ ### Gesture Prevention
28
+
29
+ Interactive drag surfaces apply `touch-action: none` to prevent the browser from interpreting drags as scroll or zoom gestures. This ensures that dragging a fill handle or resizing a column doesn't accidentally scroll the page.
30
+
31
+ ## Supported Touch Interactions
32
+
33
+ | Interaction | Gesture | Description |
34
+ |-------------|---------|-------------|
35
+ | **Cell selection** | Tap + drag | Tap a cell, then drag to select a range |
36
+ | **Fill handle** | Tap + drag the handle | Drag the green square at the bottom-right of the selection to fill cells |
37
+ | **Column resize** | Tap + drag the column border | Drag the right edge of a column header to resize |
38
+ | **Column reorder** | Tap + drag a column header | Drag a column header to reorder columns |
39
+
40
+ ## Quick Example
41
+
42
+ No special props are needed — touch support is built in. The same code works on desktop and mobile:
43
+
44
+ <Tabs groupId="framework">
45
+ <TabItem value="react" label="React" default>
46
+
47
+ ```tsx
48
+
49
+ function App() {
50
+ return (
51
+ <OGrid
52
+ columns={columns}
53
+ data={items}
54
+ getRowId={(item) => item.id}
55
+ cellSelection // drag-select works with touch
56
+ />
57
+ );
58
+ }
59
+ ```
60
+
61
+ :::tip Switching UI libraries
62
+ The `OGrid` component has the same props across all React UI packages. To switch, just change the import:
63
+
64
+ - **Radix** (lightweight, default): `from '@alaarab/ogrid-react-radix'`
65
+ - **Fluent UI** (Microsoft 365 / SPFx): `from '@alaarab/ogrid-react-fluent'` — wrap in `<FluentProvider>`
66
+ - **Material UI** (MUI v7): `from '@alaarab/ogrid-react-material'` — wrap in `<ThemeProvider>`
67
+ :::
68
+
69
+ </TabItem>
70
+ <TabItem value="angular" label="Angular">
71
+
72
+ ```typescript
73
+
74
+ @Component({
75
+ standalone: true,
76
+ imports: [OGridComponent],
77
+ template: `<ogrid [props]="gridProps" />`
78
+ })
79
+ export class GridComponent {
80
+ gridProps = {
81
+ columns,
82
+ data: items,
83
+ getRowId: (item: any) => item.id,
84
+ cellSelection: true,
85
+ };
86
+ }
87
+ ```
88
+
89
+ :::tip Switching UI libraries
90
+ Same component API across Angular packages. To switch, just change the import:
91
+
92
+ - **Radix (CDK)**: `from '@alaarab/ogrid-angular-radix'` *(default, lightweight)*
93
+ - **Angular Material**: `from '@alaarab/ogrid-angular-material'`
94
+ - **PrimeNG**: `from '@alaarab/ogrid-angular-primeng'`
95
+
96
+ All components are standalone — no NgModule required.
97
+ :::
98
+
99
+ </TabItem>
100
+ <TabItem value="vue" label="Vue">
101
+
102
+ ```vue
103
+ <script setup lang="ts">
104
+
105
+ const gridProps = {
106
+ columns,
107
+ data: items,
108
+ getRowId: (item) => item.id,
109
+ cellSelection: true,
110
+ };
111
+ </script>
112
+
113
+ <template>
114
+ <OGrid :gridProps="gridProps" />
115
+ </template>
116
+ ```
117
+
118
+ :::tip Switching UI libraries
119
+ Same component API across Vue packages. To switch, just change the import:
120
+
121
+ - **Radix (Headless UI)**: `from '@alaarab/ogrid-vue-radix'` *(default, lightweight)*
122
+ - **Vuetify**: `from '@alaarab/ogrid-vue-vuetify'` — wrap in `<v-app>` for theming
123
+ - **PrimeVue**: `from '@alaarab/ogrid-vue-primevue'`
124
+ :::
125
+
126
+ </TabItem>
127
+ <TabItem value="js" label="Vanilla JS">
128
+
129
+ ```js
130
+
131
+ const grid = new OGrid(document.getElementById('grid'), {
132
+ columns: columns,
133
+ data: items,
134
+ getRowId: (item) => item.id,
135
+ cellSelection: true,
136
+ });
137
+ ```
138
+
139
+ </TabItem>
140
+ </Tabs>
141
+
142
+ ## CSS Custom Properties
143
+
144
+ The touch target sizes can be customized with CSS if you need different sizing:
145
+
146
+ ```css
147
+ /* Example: make fill handle even larger on touch devices */
148
+ @media (pointer: coarse) {
149
+ .fillHandle,
150
+ .ogrid-fill-handle {
151
+ width: 18px;
152
+ height: 18px;
153
+ }
154
+ }
155
+ ```
156
+
157
+ ## Browser Support
158
+
159
+ The Pointer Events API is supported in all modern browsers:
160
+
161
+ | Browser | Version |
162
+ |---------|---------|
163
+ | Chrome | 55+ |
164
+ | Firefox | 59+ |
165
+ | Safari | 13+ |
166
+ | Edge | 79+ |
167
+ | iOS Safari | 13+ |
168
+ | Chrome Android | 55+ |
169
+
170
+ ## Related
171
+
172
+ - [Spreadsheet Selection](./spreadsheet-selection) — cell selection and drag-to-select
173
+ - [Editing & Clipboard](./editing) — fill handle drag-to-fill
174
+ - [Column Reordering](./column-reordering) — drag column headers to reorder
package/bundled-docs/features/responsive-columns.mdx ADDED
@@ -0,0 +1,170 @@
1
+ ---
2
+ sidebar_position: 26
3
+ title: Responsive Columns
4
+ description: Automatically hide columns based on container width using responsive priority levels and configurable breakpoints.
5
+ ---
6
+
7
+
8
+ # Responsive Columns
9
+
10
+ OGrid can automatically hide lower-priority columns when the grid container becomes narrow, keeping the most important data visible on smaller screens. Columns are progressively hidden based on `responsivePriority` values and configurable width breakpoints.
11
+
12
+ ## How It Works
13
+
14
+ 1. Assign `responsivePriority` to columns (0 = highest priority, always visible).
15
+ 2. Enable `responsiveColumns` on the grid.
16
+ 3. As the container width shrinks below breakpoint thresholds, columns with higher priority numbers are hidden first.
17
+
18
+ ### Default Breakpoints
19
+
20
+ | Container Width | Max Priority Shown |
21
+ |----------------|--------------------|
22
+ | < 576px | 0 only |
23
+ | 576–767px | 0–1 |
24
+ | 768–991px | 0–2 |
25
+ | 992–1199px | 0–3 |
26
+ | >= 1200px | All columns |
27
+
28
+ ### Rules
29
+
30
+ - Columns **without** `responsivePriority` are never auto-hidden.
31
+ - Columns with `required: true` are never auto-hidden regardless of priority.
32
+ - Responsive hiding works alongside the Column Chooser — columns hidden by the user stay hidden.
33
+
34
+ ## Quick Example
35
+
36
+ <Tabs groupId="framework">
37
+ <TabItem value="react" label="React" default>
38
+
39
+ ```tsx
40
+
41
+ const columns = [
42
+ { columnId: 'name', name: 'Name', responsivePriority: 0 }, // always visible
43
+ { columnId: 'email', name: 'Email', responsivePriority: 1 }, // hidden < 576px
44
+ { columnId: 'department', name: 'Dept', responsivePriority: 2 }, // hidden < 768px
45
+ { columnId: 'phone', name: 'Phone', responsivePriority: 3 }, // hidden < 992px
46
+ { columnId: 'address', name: 'Address', responsivePriority: 4 }, // hidden < 1200px
47
+ ];
48
+
49
+ function App() {
50
+ return (
51
+ <OGrid
52
+ columns={columns}
53
+ data={items}
54
+ getRowId={(item) => item.id}
55
+ responsiveColumns
56
+ />
57
+ );
58
+ }
59
+ ```
60
+
61
+ <Admonition type="tip">
62
+ Also available from `@alaarab/ogrid-react-fluent` and `@alaarab/ogrid-react-material`.
63
+ </Admonition>
64
+
65
+ </TabItem>
66
+ <TabItem value="angular" label="Angular">
67
+
68
+ ```typescript
69
+
70
+ @Component({
71
+ template: `
72
+ <ogrid-component
73
+ [columns]="columns"
74
+ [data]="items"
75
+ [getRowId]="getRowId"
76
+ [responsiveColumns]="true"
77
+ />
78
+ `,
79
+ })
80
+ export class AppComponent {
81
+ columns = [
82
+ { columnId: 'name', name: 'Name', responsivePriority: 0 },
83
+ { columnId: 'email', name: 'Email', responsivePriority: 1 },
84
+ { columnId: 'phone', name: 'Phone', responsivePriority: 3 },
85
+ ];
86
+ items = [...];
87
+ getRowId = (item: any) => item.id;
88
+ }
89
+ ```
90
+
91
+ <Admonition type="tip">
92
+ Also available from `@alaarab/ogrid-angular-primeng` and `@alaarab/ogrid-angular-radix`.
93
+ </Admonition>
94
+
95
+ </TabItem>
96
+ <TabItem value="vue" label="Vue">
97
+
98
+ ```vue
99
+ <template>
100
+ <OGrid
101
+ :columns="columns"
102
+ :data="items"
103
+ :getRowId="(item) => item.id"
104
+ :responsiveColumns="true"
105
+ />
106
+ </template>
107
+
108
+ <script setup>
109
+
110
+ const columns = [
111
+ { columnId: 'name', name: 'Name', responsivePriority: 0 },
112
+ { columnId: 'email', name: 'Email', responsivePriority: 1 },
113
+ { columnId: 'phone', name: 'Phone', responsivePriority: 3 },
114
+ ];
115
+ const items = [...];
116
+ </script>
117
+ ```
118
+
119
+ <Admonition type="tip">
120
+ Also available from `@alaarab/ogrid-vue-primevue` and `@alaarab/ogrid-vue-radix`.
121
+ </Admonition>
122
+
123
+ </TabItem>
124
+ <TabItem value="js" label="Vanilla JS">
125
+
126
+ ```typescript
127
+
128
+ const grid = new OGrid(document.getElementById('grid')!, {
129
+ columns: [
130
+ { columnId: 'name', name: 'Name', responsivePriority: 0 },
131
+ { columnId: 'email', name: 'Email', responsivePriority: 1 },
132
+ { columnId: 'phone', name: 'Phone', responsivePriority: 3 },
133
+ ],
134
+ data: items,
135
+ getRowId: (item) => item.id,
136
+ responsiveColumns: true,
137
+ });
138
+ ```
139
+
140
+ </TabItem>
141
+ </Tabs>
142
+
143
+ ## Custom Breakpoints
144
+
145
+ Override the default breakpoints by passing a config object instead of `true`:
146
+
147
+ ```tsx
148
+ <OGrid
149
+ columns={columns}
150
+ data={items}
151
+ getRowId={(item) => item.id}
152
+ responsiveColumns={{
153
+ breakpoints: [
154
+ { minWidth: 0, maxPriority: 0 }, // < 480px: only priority 0
155
+ { minWidth: 480, maxPriority: 2 }, // 480-799px: priority 0-2
156
+ { minWidth: 800, maxPriority: Infinity }, // >= 800px: all columns
157
+ ],
158
+ }}
159
+ />
160
+ ```
161
+
162
+ ## Core Utility
163
+
164
+ The responsive column logic is available as a standalone pure function for advanced use cases:
165
+
166
+ ```typescript
167
+
168
+ const hidden = getResponsiveHiddenColumns(containerWidth, columns);
169
+ // Returns Set<string> of column IDs to hide
170
+ ```
package/bundled-docs/features/spreadsheet-selection.mdx CHANGED
@@ -154,7 +154,7 @@ interface ISelectionRange {
154
154
 
155
155
  ### Performance
156
156
 
157
- Drag selection is optimized with `requestAnimationFrame` and DOM attribute toggling. During a drag, React state is not updated on every mouse move -- only on mouse up. This keeps the grid responsive even with thousands of cells.
157
+ Drag selection is optimized with `requestAnimationFrame` and DOM attribute toggling. During a drag, React state is not updated on every pointer move — only on pointer up. This keeps the grid responsive even with thousands of cells. All drag interactions use the [Pointer Events API](./mobile-touch), so cell selection works with mouse, touch, and stylus input.
158
158
 
159
159
  ### Disabling Cell Selection
160
160
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alaarab/ogrid-mcp",
3
- "version": "2.4.2",
3
+ "version": "2.5.0",
4
4
  "description": "MCP server for OGrid documentation",
5
5
  "type": "module",
6
6
  "bin": {