@alaarab/ogrid-mcp 2.8.1 → 2.11.0

package/bundled-docs/features/column-groups.mdx

@@ -14,7 +14,7 @@ Group related columns under shared parent headers. OGrid supports arbitrarily ne
 <ColumnGroupsDemo />
 
 :::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
@@ -75,143 +75,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: [
-      {
-        headerName: 'Personal Info',
-        children: [
-          { columnId: 'name', name: 'Name' },
-          { columnId: 'age', name: 'Age', type: 'numeric' },
-          { columnId: 'email', name: 'Email' },
-        ],
-      },
-      {
-        headerName: 'Employment',
-        children: [
-          { columnId: 'department', name: 'Department' },
-          {
-            columnId: 'salary', name: 'Salary', type: 'numeric',
-            valueFormatter: (v: unknown) => `$${Number(v).toLocaleString()}`,
-          },
-          { columnId: 'status', name: 'Status' },
-        ],
-      },
-    ],
-    data: people,
-    getRowId: (item: Person) => item.id,
-    defaultPageSize: 10,
-  };
-}
-```
-
-:::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 = [
-  {
-    headerName: 'Personal Info',
-    children: [
-      { columnId: 'name', name: 'Name' },
-      { columnId: 'age', name: 'Age', type: 'numeric' },
-      { columnId: 'email', name: 'Email' },
-    ],
-  },
-  {
-    headerName: 'Employment',
-    children: [
-      { columnId: 'department', name: 'Department' },
-      {
-        columnId: 'salary', name: 'Salary', type: 'numeric',
-        valueFormatter: (v) => `$${Number(v).toLocaleString()}`,
-      },
-      { columnId: 'status', name: 'Status' },
-    ],
-  },
-];
-
-const gridProps = {
-  columns,
-  data: people,
-  getRowId: (item) => item.id,
-  defaultPageSize: 10,
-};
-</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: [
-    {
-      headerName: 'Personal Info',
-      children: [
-        { columnId: 'name', name: 'Name' },
-        { columnId: 'age', name: 'Age', type: 'numeric' },
-        { columnId: 'email', name: 'Email' },
-      ],
-    },
-    {
-      headerName: 'Employment',
-      children: [
-        { columnId: 'department', name: 'Department' },
-        {
-          columnId: 'salary',
-          name: 'Salary',
-          type: 'numeric',
-          valueFormatter: (v) => `$${Number(v).toLocaleString()}`,
-        },
-        { columnId: 'status', name: 'Status' },
-      ],
-    },
-  ],
-  data: people,
-  getRowId: (p) => p.id,
-  pageSize: 10,
-});
-```
-
   </TabItem>
 </Tabs>
 

package/bundled-docs/features/column-pinning.mdx

@@ -14,7 +14,7 @@ Pin columns to the left edge of the grid so they remain visible while the user s
 <ColumnPinningDemo />
 
 :::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
@@ -68,115 +68,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', pinned: 'left', defaultWidth: 160 },
-      { columnId: 'email', name: 'Email', defaultWidth: 220 },
-      { columnId: 'department', name: 'Department', defaultWidth: 160 },
-      {
-        columnId: 'salary', name: 'Salary', type: 'numeric', defaultWidth: 120,
-        valueFormatter: (v: unknown) => `$${Number(v).toLocaleString()}`,
-      },
-      { columnId: 'status', name: 'Status', defaultWidth: 120 },
-      { columnId: 'age', name: 'Age', type: 'numeric', defaultWidth: 80 },
-      { columnId: 'startDate', name: 'Start Date', defaultWidth: 130 },
-    ] as IColumnDef<Person>[],
-    data: people,
-    getRowId: (item: Person) => item.id,
-  };
-}
-```
-
-:::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', pinned: 'left', defaultWidth: 160 },
-  { columnId: 'email', name: 'Email', defaultWidth: 220 },
-  { columnId: 'department', name: 'Department', defaultWidth: 160 },
-  {
-    columnId: 'salary', name: 'Salary', type: 'numeric', defaultWidth: 120,
-    valueFormatter: (v) => `$${Number(v).toLocaleString()}`,
-  },
-  { columnId: 'status', name: 'Status', defaultWidth: 120 },
-  { columnId: 'age', name: 'Age', type: 'numeric', defaultWidth: 80 },
-  { columnId: 'startDate', name: 'Start Date', defaultWidth: 130 },
-];
-
-const gridProps = {
-  columns,
-  data: people,
-  getRowId: (item) => item.id,
-};
-</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', pinned: 'left', defaultWidth: 160 },
-    { columnId: 'email', name: 'Email', defaultWidth: 220 },
-    { columnId: 'department', name: 'Department', defaultWidth: 160 },
-    {
-      columnId: 'salary',
-      name: 'Salary',
-      type: 'numeric',
-      defaultWidth: 120,
-      valueFormatter: (v) => `$${Number(v).toLocaleString()}`,
-    },
-    { columnId: 'status', name: 'Status', defaultWidth: 120 },
-    { columnId: 'age', name: 'Age', type: 'numeric', defaultWidth: 80 },
-    { columnId: 'startDate', name: 'Start Date', defaultWidth: 130 },
-  ],
-  data: people,
-  getRowId: (p) => p.id,
-  pageSize: 10,
-});
-```
-
   </TabItem>
 </Tabs>
 

package/bundled-docs/features/column-reordering.mdx

@@ -14,7 +14,7 @@ Let users rearrange columns by dragging a column header and dropping it at a new
 <ColumnReorderingDemo />
 
 :::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
@@ -60,111 +60,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()}`,
-      },
-      { columnId: 'status', name: 'Status' },
-    ] as IColumnDef<Person>[],
-    data: people,
-    getRowId: (item: Person) => item.id,
-    columnReorder: 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 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()}`,
-  },
-  { columnId: 'status', name: 'Status' },
-];
-
-const gridProps = {
-  columns,
-  data: people,
-  getRowId: (item) => item.id,
-  columnReorder: 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: [
-    { columnId: 'name', name: 'Name' },
-    { columnId: 'email', name: 'Email' },
-    { columnId: 'department', name: 'Department' },
-    {
-      columnId: 'salary',
-      name: 'Salary',
-      type: 'numeric',
-      valueFormatter: (v) => `$${Number(v).toLocaleString()}`,
-    },
-    { columnId: 'status', name: 'Status' },
-  ],
-  data: people,
-  getRowId: (p) => p.id,
-  columnReorder: true,
-  pageSize: 10,
-});
-```
-
   </TabItem>
 </Tabs>
 
@@ -207,70 +104,6 @@ function App() {
     />
   );
 }
-```
-
-  </TabItem>
-  <TabItem value="angular" label="Angular">
-
-```typescript
-
-@Component({
-  standalone: true,
-  imports: [OGridComponent],
-  template: `<ogrid [props]="gridProps()" />`
-})
-export class GridComponent {
-  columnOrder = signal(['name', 'email', 'department', 'salary', 'status']);
-
-  gridProps = () => ({
-    columns,
-    data: people,
-    getRowId: (item: Person) => item.id,
-    columnReorder: true,
-    columnOrder: this.columnOrder(),
-    onColumnOrderChange: (order: string[]) => this.columnOrder.set(order),
-  });
-}
-```
-
-  </TabItem>
-  <TabItem value="vue" label="Vue">
-
-```vue
-<script setup lang="ts">
-
-const columnOrder = ref(['name', 'email', 'department', 'salary', 'status']);
-
-const gridProps = computed(() => ({
-  columns,
-  data: people,
-  getRowId: (item) => item.id,
-  columnReorder: true,
-  columnOrder: columnOrder.value,
-  onColumnOrderChange: (order: string[]) => { columnOrder.value = order; },
-}));
-</script>
-
-<template>
-  <OGrid :gridProps="gridProps" />
-</template>
-```
-
-  </TabItem>
-  <TabItem value="js" label="Vanilla JS">
-
-```js
-
-const grid = new OGrid(document.getElementById('grid'), {
-  columns,
-  data: people,
-  getRowId: (p) => p.id,
-  columnReorder: true,
-  columnOrder: ['name', 'email', 'department', 'salary', 'status'],
-  onColumnOrderChange: (order) => {
-    console.log('New column order:', order);
-  },
-});
 ```
 
   </TabItem>

package/bundled-docs/features/column-types.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: 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,
-});
-```
-
   </TabItem>
 </Tabs>
 

package/bundled-docs/features/context-menu.mdx

@@ -14,7 +14,7 @@ Right-click any cell to open a context menu with clipboard operations, undo/redo
 <ContextMenuDemo />
 
 :::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
@@ -51,100 +51,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', editable: true },
-      { columnId: 'department', name: 'Department' },
-      {
-        columnId: 'salary', name: 'Salary', type: 'numeric', editable: true,
-        valueFormatter: (v: unknown) => `$${Number(v).toLocaleString()}`,
-      },
-    ] as IColumnDef<Person>[],
-    data: people,
-    getRowId: (item: Person) => item.id,
-    editable: true,
-    contextMenu: 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 columns: IColumnDef<Person>[] = [
-  { columnId: 'name', name: 'Name', editable: true },
-  { columnId: 'department', name: 'Department' },
-  {
-    columnId: 'salary', name: 'Salary', type: 'numeric', editable: true,
-    valueFormatter: (v) => `$${Number(v).toLocaleString()}`,
-  },
-];
-
-const gridProps = {
-  columns,
-  data: people,
-  getRowId: (item) => item.id,
-  editable: true,
-  contextMenu: 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,
-});
-
-// Right-click any cell to see the context menu
-// Undo/redo is handled automatically by the JS package
-```
-
   </TabItem>
 </Tabs>