@alaarab/ogrid-mcp 2.8.1 → 2.11.0

package/bundled-docs/features/keyboard-navigation.mdx

@@ -14,7 +14,7 @@ OGrid supports comprehensive keyboard navigation for moving between cells, editi
 <KeyboardNavigationDemo />
 
 :::tip Try it in your framework
-The demo above uses Radix UI for styling. To see this feature with your framework's design system (Fluent UI, Material UI, Vuetify, PrimeNG, etc.), click **"Open in online demo"** below the demo.
+The demo above uses Radix UI for styling. To see this feature with the Fluent UI implementation, click **"Open in online demo"** below the demo.
 :::
 
 ## Quick Example
@@ -41,81 +41,8 @@ The `OGrid` component has the same props across all React UI packages. To switch
 
 - **Radix** (lightweight, default): `from '@alaarab/ogrid-react-radix'`
 - **Fluent UI** (Microsoft 365 / SPFx): `from '@alaarab/ogrid-react-fluent'`  -  wrap in `<FluentProvider>`
-- **Material UI** (MUI v7): `from '@alaarab/ogrid-react-material'`  -  wrap in `<ThemeProvider>`
 :::
 
-  </TabItem>
-  <TabItem value="angular" label="Angular">
-
-```typescript
-
-@Component({
-  standalone: true,
-  imports: [OGridComponent],
-  template: `<ogrid [props]="gridProps" />`
-})
-export class GridComponent {
-  gridProps = {
-    columns: columns,
-    data: data,
-    getRowId: (r: Row) => r.id,
-    editable: true,
-  };
-}
-```
-
-:::tip Switching UI libraries
-Same component API across Angular packages. To switch, just change the import:
-
-- **Radix (CDK)**: `from '@alaarab/ogrid-angular-radix'` *(default, lightweight)*
-- **Angular Material**: `from '@alaarab/ogrid-angular-material'`
-- **PrimeNG**: `from '@alaarab/ogrid-angular-primeng'`
-
-All components are standalone  -  no NgModule required.
-:::
-
-  </TabItem>
-  <TabItem value="vue" label="Vue">
-
-```vue
-<script setup lang="ts">
-
-const gridProps = {
-  columns,
-  data,
-  getRowId: (r) => r.id,
-  editable: true,
-};
-</script>
-
-<template>
-  <OGrid :gridProps="gridProps" />
-</template>
-```
-
-:::tip Switching UI libraries
-Same component API across Vue packages. To switch, just change the import:
-
-- **Radix (Headless UI)**: `from '@alaarab/ogrid-vue-radix'` *(default, lightweight)*
-- **Vuetify**: `from '@alaarab/ogrid-vue-vuetify'`  -  wrap in `<v-app>` for theming
-- **PrimeVue**: `from '@alaarab/ogrid-vue-primevue'`
-:::
-
-  </TabItem>
-  <TabItem value="js" label="Vanilla JS">
-
-```js
-
-const grid = new OGrid(document.getElementById('grid'), {
-  columns: columns,
-  data: data,
-  getRowId: (r) => r.id,
-  editable: true,
-});
-
-// Click any cell to make it active, then use keyboard to navigate
-```
-
   </TabItem>
 </Tabs>
 

package/bundled-docs/features/mobile-touch.mdx

@@ -63,79 +63,8 @@ The `OGrid` component has the same props across all React UI packages. To switch
 
 - **Radix** (lightweight, default): `from '@alaarab/ogrid-react-radix'`
 - **Fluent UI** (Microsoft 365 / SPFx): `from '@alaarab/ogrid-react-fluent'`  -  wrap in `<FluentProvider>`
-- **Material UI** (MUI v7): `from '@alaarab/ogrid-react-material'`  -  wrap in `<ThemeProvider>`
 :::
 
-  </TabItem>
-  <TabItem value="angular" label="Angular">
-
-```typescript
-
-@Component({
-  standalone: true,
-  imports: [OGridComponent],
-  template: `<ogrid [props]="gridProps" />`
-})
-export class GridComponent {
-  gridProps = {
-    columns,
-    data: items,
-    getRowId: (item: any) => item.id,
-    cellSelection: true,
-  };
-}
-```
-
-:::tip Switching UI libraries
-Same component API across Angular packages. To switch, just change the import:
-
-- **Radix (CDK)**: `from '@alaarab/ogrid-angular-radix'` *(default, lightweight)*
-- **Angular Material**: `from '@alaarab/ogrid-angular-material'`
-- **PrimeNG**: `from '@alaarab/ogrid-angular-primeng'`
-
-All components are standalone  -  no NgModule required.
-:::
-
-  </TabItem>
-  <TabItem value="vue" label="Vue">
-
-```vue
-<script setup lang="ts">
-
-const gridProps = {
-  columns,
-  data: items,
-  getRowId: (item) => item.id,
-  cellSelection: true,
-};
-</script>
-
-<template>
-  <OGrid :gridProps="gridProps" />
-</template>
-```
-
-:::tip Switching UI libraries
-Same component API across Vue packages. To switch, just change the import:
-
-- **Radix (Headless UI)**: `from '@alaarab/ogrid-vue-radix'` *(default, lightweight)*
-- **Vuetify**: `from '@alaarab/ogrid-vue-vuetify'`  -  wrap in `<v-app>` for theming
-- **PrimeVue**: `from '@alaarab/ogrid-vue-primevue'`
-:::
-
-  </TabItem>
-  <TabItem value="js" label="Vanilla JS">
-
-```js
-
-const grid = new OGrid(document.getElementById('grid'), {
-  columns: columns,
-  data: items,
-  getRowId: (item) => item.id,
-  cellSelection: true,
-});
-```
-
   </TabItem>
 </Tabs>
 

package/bundled-docs/features/pagination.mdx

@@ -55,113 +55,8 @@ The `OGrid` component has the same props across all React UI packages. To switch
 
 - **Radix** (lightweight, default): `from '@alaarab/ogrid-react-radix'`
 - **Fluent UI** (Microsoft 365 / SPFx): `from '@alaarab/ogrid-react-fluent'`  -  wrap in `<FluentProvider>`
-- **Material UI** (MUI v7): `from '@alaarab/ogrid-react-material'`  -  wrap in `<ThemeProvider>`
 :::
 
-  </TabItem>
-  <TabItem value="angular" label="Angular">
-
-```typescript
-
-@Component({
-  standalone: true,
-  imports: [OGridComponent],
-  template: `<ogrid [props]="gridProps" />`
-})
-export class GridComponent {
-  gridProps = {
-    columns: [
-      { columnId: 'name', name: 'Name' },
-      { columnId: 'email', name: 'Email' },
-      { columnId: 'department', name: 'Department' },
-      {
-        columnId: 'salary', name: 'Salary', type: 'numeric',
-        valueFormatter: (v: unknown) => `$${Number(v).toLocaleString()}`,
-      },
-    ] as IColumnDef<Person>[],
-    data: people,
-    getRowId: (item: Person) => item.id,
-    defaultPageSize: 5,
-    pageSizeOptions: [5, 10, 25, 50],
-    entityLabelPlural: 'people',
-  };
-}
-```
-
-:::tip Switching UI libraries
-Same component API across Angular packages. To switch, just change the import:
-
-- **Radix (CDK)**: `from '@alaarab/ogrid-angular-radix'` *(default, lightweight)*
-- **Angular Material**: `from '@alaarab/ogrid-angular-material'`
-- **PrimeNG**: `from '@alaarab/ogrid-angular-primeng'`
-
-All components are standalone  -  no NgModule required.
-:::
-
-  </TabItem>
-  <TabItem value="vue" label="Vue">
-
-```vue
-<script setup lang="ts">
-
-const columns: IColumnDef<Person>[] = [
-  { columnId: 'name', name: 'Name' },
-  { columnId: 'email', name: 'Email' },
-  { columnId: 'department', name: 'Department' },
-  {
-    columnId: 'salary', name: 'Salary', type: 'numeric',
-    valueFormatter: (v) => `$${Number(v).toLocaleString()}`,
-  },
-];
-
-const gridProps = {
-  columns,
-  data: people,
-  getRowId: (item) => item.id,
-  defaultPageSize: 5,
-  pageSizeOptions: [5, 10, 25, 50],
-  entityLabelPlural: 'people',
-};
-</script>
-
-<template>
-  <OGrid :gridProps="gridProps" />
-</template>
-```
-
-:::tip Switching UI libraries
-Same component API across Vue packages. To switch, just change the import:
-
-- **Radix (Headless UI)**: `from '@alaarab/ogrid-vue-radix'` *(default, lightweight)*
-- **Vuetify**: `from '@alaarab/ogrid-vue-vuetify'`  -  wrap in `<v-app>` for theming
-- **PrimeVue**: `from '@alaarab/ogrid-vue-primevue'`
-:::
-
-  </TabItem>
-  <TabItem value="js" label="Vanilla JS">
-
-```js
-
-const grid = new OGrid(document.getElementById('grid'), {
-  columns: [
-    { columnId: 'name', name: 'Name' },
-    { columnId: 'email', name: 'Email' },
-    { columnId: 'department', name: 'Department' },
-    {
-      columnId: 'salary',
-      name: 'Salary',
-      type: 'numeric',
-      valueFormatter: (v) => `$${Number(v).toLocaleString()}`,
-    },
-  ],
-  data: people,
-  getRowId: (item) => item.id,
-  pageSize: 5,
-  pageSizeOptions: [5, 10, 25, 50],
-  entityLabelPlural: 'people',
-});
-```
-
   </TabItem>
 </Tabs>
 

package/bundled-docs/features/performance.mdx

@@ -102,113 +102,8 @@ Same props across all React packages — just change the import:
 
 - **Radix** (lightweight, default): `from '@alaarab/ogrid-react-radix'`
 - **Fluent UI** (Microsoft 365 / SPFx): `from '@alaarab/ogrid-react-fluent'`  -  wrap in `<FluentProvider>`
-- **Material UI** (MUI v7): `from '@alaarab/ogrid-react-material'`  -  wrap in `<ThemeProvider>`
 :::
 
-  </TabItem>
-  <TabItem value="angular" label="Angular">
-
-```typescript
-
-interface Row {
-  id: number;
-  name: string;
-  revenue: number;
-  region: string;
-}
-
-@Component({
-  standalone: true,
-  imports: [OGridComponent],
-  template: `<ogrid [props]="gridProps" />`
-})
-export class GridComponent {
-  gridProps = {
-    columns: [
-      { columnId: 'id', name: 'ID', type: 'numeric' },
-      { columnId: 'name', name: 'Name', sortable: true },
-      { columnId: 'revenue', name: 'Revenue', type: 'numeric', sortable: true },
-      { columnId: 'region', name: 'Region', sortable: true },
-    ] as IColumnDef<Row>[],
-    data: largeDataset,   // e.g. 50,000 rows
-    getRowId: (item: Row) => item.id,
-    workerSort: true,
-    statusBar: true,
-  };
-}
-```
-
-:::tip Switching UI libraries
-Same API across Angular packages. Change the import:
-
-- **Radix (CDK)**: `from '@alaarab/ogrid-angular-radix'` *(default, lightweight)*
-- **Angular Material**: `from '@alaarab/ogrid-angular-material'`
-- **PrimeNG**: `from '@alaarab/ogrid-angular-primeng'`
-
-All components are standalone — no NgModule required.
-:::
-
-  </TabItem>
-  <TabItem value="vue" label="Vue">
-
-```vue
-<script setup lang="ts">
-
-interface Row {
-  id: number;
-  name: string;
-  revenue: number;
-  region: string;
-}
-
-const columns: IColumnDef<Row>[] = [
-  { columnId: 'id', name: 'ID', type: 'numeric' },
-  { columnId: 'name', name: 'Name', sortable: true },
-  { columnId: 'revenue', name: 'Revenue', type: 'numeric', sortable: true },
-  { columnId: 'region', name: 'Region', sortable: true },
-];
-
-const gridProps = {
-  columns,
-  data: largeDataset,   // e.g. 50,000 rows
-  getRowId: (item: Row) => item.id,
-  workerSort: true,
-  statusBar: true,
-};
-</script>
-
-<template>
-  <OGrid :gridProps="gridProps" />
-</template>
-```
-
-:::tip Switching UI libraries
-Same API across Vue packages. Change the import:
-
-- **Radix (Headless UI)**: `from '@alaarab/ogrid-vue-radix'` *(default, lightweight)*
-- **Vuetify**: `from '@alaarab/ogrid-vue-vuetify'`  -  wrap in `<v-app>` for theming
-- **PrimeVue**: `from '@alaarab/ogrid-vue-primevue'`
-:::
-
-  </TabItem>
-  <TabItem value="js" label="Vanilla JS">
-
-```js
-
-const grid = new OGrid(document.getElementById('grid'), {
-  columns: [
-    { columnId: 'id', name: 'ID', type: 'numeric' },
-    { columnId: 'name', name: 'Name', sortable: true },
-    { columnId: 'revenue', name: 'Revenue', type: 'numeric', sortable: true },
-    { columnId: 'region', name: 'Region', sortable: true },
-  ],
-  data: largeDataset,   // e.g. 50,000 rows
-  getRowId: (r) => r.id,
-  workerSort: true,
-  statusBar: true,
-});
-```
-
   </TabItem>
 </Tabs>
 
@@ -289,94 +184,8 @@ Same props across all React packages — just change the import:
 
 - **Radix** (lightweight, default): `from '@alaarab/ogrid-react-radix'`
 - **Fluent UI** (Microsoft 365 / SPFx): `from '@alaarab/ogrid-react-fluent'`  -  wrap in `<FluentProvider>`
-- **Material UI** (MUI v7): `from '@alaarab/ogrid-react-material'`  -  wrap in `<ThemeProvider>`
 :::
 
-  </TabItem>
-  <TabItem value="angular" label="Angular">
-
-```typescript
-gridProps = {
-  columns,           // 100 columns
-  data: largeData,   // 100,000 rows
-  getRowId: (item: Row) => item.id,
-  virtualScroll: {
-    enabled: true,
-    rowHeight: 36,
-    overscan: 5,
-    columns: true,
-    columnOverscan: 2,
-  },
-  workerSort: true,
-  statusBar: true,
-};
-```
-
-:::tip Switching UI libraries
-Same API across Angular packages. Change the import:
-
-- **Radix (CDK)**: `from '@alaarab/ogrid-angular-radix'` *(default, lightweight)*
-- **Angular Material**: `from '@alaarab/ogrid-angular-material'`
-- **PrimeNG**: `from '@alaarab/ogrid-angular-primeng'`
-
-All components are standalone — no NgModule required.
-:::
-
-  </TabItem>
-  <TabItem value="vue" label="Vue">
-
-```vue
-<script setup lang="ts">
-const gridProps = {
-  columns,          // 100 columns
-  data: largeData,  // 100,000 rows
-  getRowId: (item: Row) => item.id,
-  virtualScroll: {
-    enabled: true,
-    rowHeight: 36,
-    overscan: 5,
-    columns: true,
-    columnOverscan: 2,
-  },
-  workerSort: true,
-  statusBar: true,
-};
-</script>
-
-<template>
-  <OGrid :gridProps="gridProps" />
-</template>
-```
-
-:::tip Switching UI libraries
-Same API across Vue packages. Change the import:
-
-- **Radix (Headless UI)**: `from '@alaarab/ogrid-vue-radix'` *(default, lightweight)*
-- **Vuetify**: `from '@alaarab/ogrid-vue-vuetify'`  -  wrap in `<v-app>` for theming
-- **PrimeVue**: `from '@alaarab/ogrid-vue-primevue'`
-:::
-
-  </TabItem>
-  <TabItem value="js" label="Vanilla JS">
-
-```js
-
-const grid = new OGrid(document.getElementById('grid'), {
-  columns,           // 100 columns
-  data: largeData,   // 100,000 rows
-  getRowId: (r) => r.id,
-  virtualScroll: {
-    enabled: true,
-    rowHeight: 36,
-    overscan: 5,
-    columns: true,
-    columnOverscan: 2,
-  },
-  workerSort: true,
-  statusBar: true,
-});
-```
-
   </TabItem>
 </Tabs>