@alaarab/ogrid-mcp 2.8.1 → 2.11.0

package/bundled-docs/features/csv-export.mdx

@@ -14,7 +14,7 @@ Export grid data to a downloadable CSV file using the `exportToCsv` utility from
 <CsvExportDemo />
 
 :::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
@@ -48,111 +48,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,
-  template: `<button (click)="handleExport()">Export to CSV</button>`
-})
-export class ExportButtonComponent {
-  data: Row[] = [];
-  columns: IColumnDef<Row>[] = [];
-
-  handleExport() {
-    exportToCsv(
-      this.data,
-      this.columns.map((col) => ({ columnId: col.columnId, name: col.name })),
-      (item: Row, columnId: string) => {
-        const col = this.columns.find((c) => c.columnId === columnId);
-        if (!col) return '';
-        const value = col.valueGetter ? col.valueGetter(item) : (item as Record<string, unknown>)[columnId];
-        return col.valueFormatter ? col.valueFormatter(value as unknown, item) : String(value ?? '');
-      },
-      'my-data.csv'
-    );
-  }
-}
-```
-
-:::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 props = defineProps<{ data: Row[]; columns: IColumnDef<Row>[] }>();
-
-function handleExport() {
-  exportToCsv(
-    props.data,
-    props.columns.map((col) => ({ columnId: col.columnId, name: col.name })),
-    (item, columnId) => {
-      const col = props.columns.find((c) => c.columnId === columnId);
-      if (!col) return '';
-      const value = col.valueGetter ? col.valueGetter(item) : (item as Record<string, unknown>)[columnId];
-      return col.valueFormatter ? col.valueFormatter(value, item) : String(value ?? '');
-    },
-    'my-data.csv'
-  );
-}
-</script>
-
-<template>
-  <button @click="handleExport">Export to CSV</button>
-</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,
-});
-
-// Export to CSV
-document.getElementById('export-btn').addEventListener('click', () => {
-  exportToCsv(
-    data,
-    columns.map((col) => ({ columnId: col.columnId, name: col.name })),
-    (item, columnId) => {
-      const col = columns.find((c) => c.columnId === columnId);
-      if (!col) return '';
-      const value = item[columnId];
-      return col.valueFormatter ? col.valueFormatter(value, item) : String(value ?? '');
-    },
-    'my-data.csv'
-  );
-});
-```
-
   </TabItem>
 </Tabs>
 

package/bundled-docs/features/editing.mdx

@@ -83,157 +83,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
-
-const DEPTS = ['Engineering', 'Marketing', 'Sales', 'Finance', 'Operations'];
-const STATUSES = ['Active', 'Draft', 'Archived'];
-
-@Component({
-  standalone: true,
-  imports: [OGridComponent],
-  template: `<ogrid [props]="gridProps" />`
-})
-export class GridComponent {
-  gridProps = {
-    columns: [
-      { columnId: 'name', name: 'Name', editable: true },
-      {
-        columnId: 'department', name: 'Department', editable: true,
-        cellEditor: 'richSelect', cellEditorParams: { values: DEPTS },
-      },
-      {
-        columnId: 'status', name: 'Status', editable: true,
-        cellEditor: 'select', cellEditorParams: { values: STATUSES },
-      },
-      {
-        columnId: 'salary', name: 'Salary', editable: true, type: 'numeric',
-        valueParser: ({ newValue }: any) => {
-          const num = Number(newValue);
-          return isNaN(num) || num < 0 ? undefined : num;
-        },
-        valueFormatter: (v: unknown) => `$${Number(v).toLocaleString()}`,
-      },
-    ] as IColumnDef<Person>[],
-    data: initialData,
-    getRowId: (item: Person) => item.id,
-    editable: true,
-  };
-}
-```
-
-:::tip Switching UI libraries
-Same component 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 DEPTS = ['Engineering', 'Marketing', 'Sales', 'Finance', 'Operations'];
-const STATUSES = ['Active', 'Draft', 'Archived'];
-
-const columns: IColumnDef<Person>[] = [
-  { columnId: 'name', name: 'Name', editable: true },
-  {
-    columnId: 'department', name: 'Department', editable: true,
-    cellEditor: 'richSelect', cellEditorParams: { values: DEPTS },
-  },
-  {
-    columnId: 'status', name: 'Status', editable: true,
-    cellEditor: 'select', cellEditorParams: { values: STATUSES },
-  },
-  {
-    columnId: 'salary', name: 'Salary', editable: true, type: 'numeric',
-    valueParser: ({ newValue }) => {
-      const num = Number(newValue);
-      return isNaN(num) || num < 0 ? undefined : num;
-    },
-    valueFormatter: (v) => `$${Number(v).toLocaleString()}`,
-  },
-];
-
-const gridProps = {
-  columns,
-  data: initialData,
-  getRowId: (item) => item.id,
-  editable: 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 DEPTS = ['Engineering', 'Marketing', 'Sales', 'Finance', 'Operations'];
-const STATUSES = ['Active', 'Draft', 'Archived'];
-
-const grid = new OGrid(document.getElementById('grid'), {
-  columns: [
-    { columnId: 'name', name: 'Name', editable: true },
-    {
-      columnId: 'department',
-      name: 'Department',
-      editable: true,
-      cellEditor: 'richSelect',
-      cellEditorParams: { values: DEPTS },
-    },
-    {
-      columnId: 'status',
-      name: 'Status',
-      editable: true,
-      cellEditor: 'select',
-      cellEditorParams: { values: STATUSES },
-    },
-    {
-      columnId: 'salary',
-      name: 'Salary',
-      editable: true,
-      type: 'numeric',
-      valueParser: ({ newValue }) => {
-        const num = Number(newValue);
-        return isNaN(num) || num < 0 ? undefined : num;
-      },
-      valueFormatter: (v) => `$${Number(v).toLocaleString()}`,
-    },
-  ],
-  data: initialData,
-  getRowId: (item) => item.id,
-  editable: true,
-});
-
-grid.on('cellValueChanged', (event) => {
-  console.log(`${event.columnId} changed to ${event.newValue}`);
-});
-```
-
   </TabItem>
 </Tabs>
 

package/bundled-docs/features/filtering.mdx

@@ -65,127 +65,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', filterable: { type: 'text' } },
-      {
-        columnId: 'department', name: 'Department',
-        filterable: { type: 'multiSelect', filterField: 'department' },
-      },
-      {
-        columnId: 'status', name: 'Status',
-        filterable: { type: 'multiSelect', filterField: 'status' },
-      },
-      {
-        columnId: 'salary', name: 'Salary', 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', filterable: { type: 'text' } },
-  {
-    columnId: 'department', name: 'Department',
-    filterable: { type: 'multiSelect', filterField: 'department' },
-  },
-  {
-    columnId: 'status', name: 'Status',
-    filterable: { type: 'multiSelect', filterField: 'status' },
-  },
-  {
-    columnId: 'salary', name: 'Salary', 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', filterable: { type: 'text' } },
-    {
-      columnId: 'department',
-      name: 'Department',
-      filterable: { type: 'multiSelect', filterField: 'department' },
-    },
-    {
-      columnId: 'status',
-      name: 'Status',
-      filterable: { type: 'multiSelect', filterField: 'status' },
-    },
-    {
-      columnId: 'salary',
-      name: 'Salary',
-      type: 'numeric',
-      valueFormatter: (v) => `$${Number(v).toLocaleString()}`,
-    },
-  ],
-  data: people,
-  getRowId: (item) => item.id,
-  pageSize: 10,
-});
-```
-
   </TabItem>
 </Tabs>
 

package/bundled-docs/features/formulas.mdx

@@ -15,8 +15,8 @@ The engine adds ~12KB gzipped and is completely **tree-shakeable** — grids wit
 
 <FormulasDemo />
 
-:::tip Try it in your framework
-The demo uses Radix UI styling. The formula engine itself is framework-agnostic — same behavior in React, Angular, Vue, and Vanilla JS.
+:::tip Try it with Fluent UI
+The demo uses Radix UI styling. The formula engine itself is UI-agnostic — identical behavior in `@alaarab/ogrid-react-radix` and `@alaarab/ogrid-react-fluent`.
 :::
 
 ## Why bother with in-grid formulas?
@@ -67,108 +67,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],
-  providers: [FormulaEngineService],
-  template: `<ogrid [props]="gridProps" />`
-})
-export class FormulaGridComponent {
-  constructor(private formulaEngine: FormulaEngineService<Row>) {
-    this.formulaEngine.configure({ formulas: true });
-  }
-
-  gridProps = {
-    columns: [
-      { columnId: 'a', name: 'A', type: 'numeric', editable: true },
-      { columnId: 'b', name: 'B', type: 'numeric', editable: true },
-      { columnId: 'c', name: 'C', type: 'numeric', editable: true },
-    ] as IColumnDef<Row>[],
-    data: initialData,
-    getRowId: (r: Row) => r.id,
-    editable: 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 columns: IColumnDef<Row>[] = [
-  { columnId: 'a', name: 'A', type: 'numeric', editable: true },
-  { columnId: 'b', name: 'B', type: 'numeric', editable: true },
-  { columnId: 'c', name: 'C', type: 'numeric', editable: true },
-];
-
-const data = ref(initialData);
-const formulas = ref(true);
-const items = ref(data.value);
-const flatColumns = ref(columns);
-
-const formulaEngine = useFormulaEngine({
-  formulas,
-  items,
-  flatColumns,
-  initialFormulas: [
-    { col: 2, row: 0, formula: '=A1+B1' },
-  ],
-});
-</script>
-
-<template>
-  <OGrid :columns="columns" :data="data" :getRowId="(r) => r.id" editable />
-</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: 'a', name: 'A', type: 'numeric', editable: true },
-    { columnId: 'b', name: 'B', type: 'numeric', editable: true },
-    { columnId: 'c', name: 'C', type: 'numeric', editable: true },
-  ],
-  data: initialData,
-  getRowId: (r) => r.id,
-  editable: true,
-});
-
-const formulaState = new FormulaEngineState({ formulas: true });
-formulaState.setFormula(2, 0, '=A1+B1', grid.getApi().getDataAccessor());
-```
-
   </TabItem>
 </Tabs>
 

package/bundled-docs/features/grid-api.mdx

@@ -14,7 +14,7 @@ The `IOGridApi` ref gives you imperative control over the grid: set data, manage
 <GridApiDemo />
 
 :::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,115 +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
-
-interface Row {
-  id: number;
-  name: string;
-  department: string;
-  salary: number;
-}
-
-@Component({
-  standalone: true,
-  imports: [OGridComponent],
-  template: `
-    <button (click)="handleRefresh()">Refresh</button>
-    <ogrid [props]="gridProps" />
-  `
-})
-export class GridComponent {
-  gridProps = {
-    columns: columns,
-    data: initialData,
-    getRowId: (r: Row) => r.id,
-  };
-
-  async handleRefresh() {
-    // Use the grid API via ViewChild or service
-    const data = await fetchEmployees();
-    this.gridProps = { ...this.gridProps, data };
-  }
-}
-```
-
-:::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">
-
-interface Row {
-  id: number;
-  name: string;
-  department: string;
-  salary: number;
-}
-
-const data = ref<Row[]>(initialData);
-
-const gridProps = {
-  columns,
-  data: data.value,
-  getRowId: (r: Row) => r.id,
-};
-
-async function handleRefresh() {
-  const fresh = await fetchEmployees();
-  data.value = fresh;
-}
-</script>
-
-<template>
-  <button @click="handleRefresh">Refresh</button>
-  <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: initialData,
-  getRowId: (r) => r.id,
-});
-
-// Use the grid API directly
-async function handleRefresh() {
-  grid.api.setLoading(true);
-  const data = await fetchEmployees();
-  grid.api.setRowData(data);
-  grid.api.setLoading(false);
-}
-```
-
   </TabItem>
 </Tabs>