@alaarab/ogrid-mcp 2.8.1 → 2.11.0

package/bundled-docs/features/sidebar.mdx

@@ -14,7 +14,7 @@ The Side Bar adds a collapsible panel alongside the grid with two built-in panel
 <SideBarDemo />
 
 :::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.
 :::
 
 <Tabs groupId="framework">
@@ -37,85 +37,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: items,
-    getRowId: (item: Item) => item.id,
-    sideBar: true,
-    columnChooser: 'sidebar' as const,
-    pagination: 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,
-  sideBar: true,
-  columnChooser: 'sidebar' as const,
-  pagination: 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,
-  sideBar: true,
-  columnChooser: 'sidebar',
-  pagination: true,
-});
-```
-
   </TabItem>
 </Tabs>
 

package/bundled-docs/features/sorting.mdx

@@ -11,8 +11,8 @@ Click a column header to sort. Click again to reverse. Click a third time to cle
 
 <SortingDemo />
 
-:::tip Try it in your framework
-The demo uses Radix UI styling. Your framework's design system (Fluent, Material, Vuetify, PrimeNG) will render the sort indicator in its own style.
+:::tip Try it with Fluent UI
+The demo uses Radix UI styling. Switch the import to `@alaarab/ogrid-react-fluent` and the sort indicator renders in the Fluent UI v9 style — no other code changes.
 :::
 
 ## Make a column sortable
@@ -54,114 +54,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
-
-@Component({
-  standalone: true,
-  imports: [OGridComponent],
-  template: `<ogrid [props]="gridProps" />`
-})
-export class GridComponent {
-  gridProps = {
-    columns: [
-      { columnId: 'name', name: 'Name', sortable: true },
-      { columnId: 'age', name: 'Age', sortable: true, type: 'numeric' },
-      { columnId: 'department', name: 'Department', sortable: true },
-      {
-        columnId: 'salary',
-        name: 'Salary',
-        sortable: true,
-        type: 'numeric',
-        valueFormatter: (v: unknown) => `$${Number(v).toLocaleString()}`,
-      },
-    ] as IColumnDef<Person>[],
-    data: people,
-    getRowId: (item: Person) => item.id,
-    defaultPageSize: 10,
-  };
-}
-```
-
-:::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 columns: IColumnDef<Person>[] = [
-  { columnId: 'name', name: 'Name', sortable: true },
-  { columnId: 'age', name: 'Age', sortable: true, type: 'numeric' },
-  { columnId: 'department', name: 'Department', sortable: true },
-  {
-    columnId: 'salary',
-    name: 'Salary',
-    sortable: true,
-    type: 'numeric',
-    valueFormatter: (v) => `$${Number(v).toLocaleString()}`,
-  },
-];
-
-const gridProps = {
-  columns,
-  data: people,
-  getRowId: (item) => item.id,
-  defaultPageSize: 10,
-};
-</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: 'name', name: 'Name', sortable: true },
-    { columnId: 'age', name: 'Age', sortable: true, type: 'numeric' },
-    { columnId: 'department', name: 'Department', sortable: true },
-    {
-      columnId: 'salary',
-      name: 'Salary',
-      sortable: true,
-      type: 'numeric',
-      valueFormatter: (v) => `$${Number(v).toLocaleString()}`,
-    },
-  ],
-  data: people,
-  getRowId: (item) => item.id,
-  pageSize: 10,
-});
-```
-
   </TabItem>
 </Tabs>
 

package/bundled-docs/features/spreadsheet-selection.mdx

@@ -13,14 +13,8 @@ OGrid provides Excel-like cell selection out of the box. Click a cell to make it
 
 <SpreadsheetSelectionDemo />
 
-:::tip Framework-Specific Styling
-The live demo above shows **React Radix UI** styling (lightweight default). To see how this feature looks in your framework's design system, click the framework buttons above the demo to open online demo:
-- **React**  -  Radix UI styling
-- **Angular**  -  Angular Material styling
-- **Vue**  -  Vuetify styling
-- **JS**  -  Vanilla JS default theme
-
-Each framework renders OGrid with its native components, so the look and feel matches your design system.
+:::tip UI styling
+The live demo above shows **Radix UI** styling (lightweight default). The same feature renders through the Fluent UI package with its native components.
 :::
 
 ## Quick Example
@@ -47,79 +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,
-    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/status-bar.mdx

@@ -14,7 +14,7 @@ The status bar sits at the bottom of the grid and displays row counts, filter co
 <StatusBarDemo />
 
 :::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,79 +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,
-    statusBar: 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,
-  statusBar: 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,
-  statusBar: true,
-});
-```
-
   </TabItem>
 </Tabs>
 

package/bundled-docs/features/toolbar.mdx

@@ -22,7 +22,7 @@ With no extra props, OGrid renders a toolbar strip containing only the column ch
 <ToolbarDefaultDemo />
 
 :::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.
 :::
 
 <Tabs groupId="framework">
@@ -44,82 +44,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: items,
-    getRowId: (item: Item) => item.id,
-    columnChooser: 'toolbar' as const,
-    pagination: 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,
-  columnChooser: 'toolbar' as const,
-  pagination: 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,
-  columnChooser: true,
-  pagination: true,
-});
-```
-
   </TabItem>
 </Tabs>