@alaarab/ogrid-mcp 2.5.9 → 2.6.1

package/bundled-docs/api/README.md

@@ -4,28 +4,28 @@ Complete API documentation for OGrid components, types, and interfaces.
 
 ## Components
 
-- **[DataGridTable](./components-datagrid-table.mdx)**  -  Core data grid component that renders the table, headers, rows, and cells
-- **[ColumnHeaderFilter](./components-column-header-filter.mdx)**  -  Column header with sorting and filtering UI (text, multi-select, people, date)
-- **[ColumnChooser](./components-column-chooser.mdx)**  -  Dropdown for showing/hiding columns
-- **[PaginationControls](./components-pagination-controls.mdx)**  -  Pagination UI with page navigation and page size selector
-- **[StatusBar](./components-status-bar.mdx)**  -  Status bar with row counts and cell aggregations
-- **[SideBar](./components-sidebar.mdx)**  -  Collapsible sidebar with columns and filters panels
+- [DataGridTable](./components-datagrid-table.mdx): core data grid component that renders the table, headers, rows, and cells
+- [ColumnHeaderFilter](./components-column-header-filter.mdx): column header with sorting and filtering UI (text, multi-select, people, date)
+- [ColumnChooser](./components-column-chooser.mdx): dropdown for showing/hiding columns
+- [PaginationControls](./components-pagination-controls.mdx): pagination UI with page navigation and page size selector
+- [StatusBar](./components-status-bar.mdx): status bar with row counts and cell aggregations
+- [SideBar](./components-sidebar.mdx): collapsible sidebar with columns and filters panels
 
 ## Configuration
 
-- **[OGrid Props](./ogrid-props.mdx)**  -  Top-level OGrid component props (client-side and server-side modes)
-- **[Column Definition](./column-def.mdx)**  -  Complete column definition reference (IColumnDef, IColumnGroupDef, cell editors, filters)
-- **[Grid API](./grid-api.mdx)**  -  Imperative grid API (IOGridApi) for programmatic control
-- **[JS API](./js-api.mdx)**  -  Vanilla JS API reference (OGrid class, state classes, components)
+- [OGrid Props](./ogrid-props.mdx): top-level OGrid component props (client-side and server-side modes)
+- [Column Definition](./column-def.mdx): complete column definition reference (IColumnDef, IColumnGroupDef, cell editors, filters)
+- [Grid API](./grid-api.mdx): imperative grid API (IOGridApi) for programmatic control
+- [JS API](./js-api.mdx): vanilla JS API reference (OGrid class, state classes, components)
 
 ## Types
 
-- **[Types Reference](./types.mdx)**  -  All shared TypeScript types:
-  - **Data Types:** `RowId`, `FilterValue`, `IFilters`, `IDataSource`, `IFetchParams`, `IPageResult`
-  - **Selection:** `RowSelectionMode`, `IActiveCell`, `ISelectionRange`, `IRowSelectionChangeEvent`
-  - **Editing:** `ICellEditorProps`, `ICellValueChangedEvent`, `CellEditorParams`
-  - **UI:** `IStatusBarProps`, `ISideBarDef`, `UserLike`
-  - **State:** `IGridColumnState`, `IVirtualScrollConfig`
+- [Types Reference](./types.mdx): all shared TypeScript types
+  - Data types: `RowId`, `FilterValue`, `IFilters`, `IDataSource`, `IFetchParams`, `IPageResult`
+  - Selection: `RowSelectionMode`, `IActiveCell`, `ISelectionRange`, `IRowSelectionChangeEvent`
+  - Editing: `ICellEditorProps`, `ICellValueChangedEvent`, `CellEditorParams`
+  - UI: `IStatusBarProps`, `ISideBarDef`, `UserLike`
+  - State: `IGridColumnState`, `IVirtualScrollConfig`
 
 ## Quick Links
 
@@ -86,9 +86,9 @@ Each framework has idiomatic APIs:
 
 | Framework | Orchestration | State Hook/Service | Props Pattern |
 |-----------|---------------|-------------------|---------------|
-| **React** | `useOGrid()` hook | `useDataGridState()` | Individual props |
-| **Angular** | `OGridService` | `DataGridStateService` | Signal-based inputs |
-| **Vue** | `useOGrid()` composable | `useDataGridState()` | Individual props or `:grid-props` |
-| **Vanilla JS** | `OGrid` class | `GridState` class | Constructor options |
+| React | `useOGrid()` hook | `useDataGridState()` | Individual props |
+| Angular | `OGridService` | `DataGridStateService` | Signal-based inputs |
+| Vue | `useOGrid()` composable | `useDataGridState()` | Individual props or `:grid-props` |
+| Vanilla JS | `OGrid` class | `GridState` class | Constructor options |
 
 See the [Framework Showcase](/docs/guides/framework-showcase) for detailed comparisons and examples.

package/bundled-docs/api/components-column-chooser.mdx

@@ -226,7 +226,7 @@ The trigger button shows the current visibility count: `"Column Visibility (3 of
 
 ## Accessibility
 
-`ColumnChooser` meets WCAG 2.1 AA with full keyboard and screen reader support.
+`ColumnChooser` implements WCAG 2.1 AA standards with full keyboard and screen reader support.
 
 ### ARIA Attributes
 

package/bundled-docs/api/components-column-header-filter.mdx

@@ -258,7 +258,7 @@ const handleFilterChange = (values: string[]) => {
 
 ## Accessibility
 
-`ColumnHeaderFilter` meets WCAG 2.1 AA with full keyboard and screen reader support.
+`ColumnHeaderFilter` implements WCAG 2.1 AA standards with full keyboard and screen reader support.
 
 ### ARIA Attributes
 

package/bundled-docs/api/components-datagrid-table.mdx

@@ -183,7 +183,7 @@ In Vue Radix, `DataGridTable` uses individual props via `defineProps<IOGridProps
 
 ## Accessibility
 
-`DataGridTable` meets WCAG 2.1 AA with full keyboard navigation and screen reader support.
+`DataGridTable` implements WCAG 2.1 AA standards with comprehensive keyboard navigation and screen reader support.
 
 ### ARIA Attributes
 

package/bundled-docs/api/components-pagination-controls.mdx

@@ -249,7 +249,7 @@ Showing {startItem} to {endItem} of {totalCount} {entityLabelPlural}
 
 ## Accessibility
 
-`PaginationControls` meets WCAG 2.1 AA with full keyboard and screen reader support.
+`PaginationControls` implements WCAG 2.1 AA standards with full keyboard and screen reader support.
 
 ### ARIA Attributes
 

package/bundled-docs/api/components-sidebar.mdx

@@ -303,7 +303,7 @@ The panel content area has a fixed width (240px) and scrollable content. The pan
 
 ## Accessibility
 
-`SideBar` meets WCAG 2.1 AA with full keyboard and screen reader support.
+`SideBar` implements WCAG 2.1 AA standards with full keyboard and screen reader support.
 
 ### ARIA Attributes
 

package/bundled-docs/api/components-status-bar.mdx

@@ -237,7 +237,7 @@ When `statusBar` is `true`, the grid automatically computes the counts from the
 
 ## Accessibility
 
-`StatusBar` meets WCAG 2.1 AA with screen reader support for dynamic content announcements.
+`StatusBar` implements WCAG 2.1 AA standards with screen reader support for dynamic content announcements.
 
 ### ARIA Attributes
 

package/bundled-docs/api/js-api.mdx

@@ -149,7 +149,7 @@ Subscribe with `grid.on(eventName, handler)`.
 |-------|-------------|------------|
 | `cellValueChanged` | `ICellValueChangedEvent<T>` | A cell edit is committed |
 | `selectionChange` | `IRowSelectionChangeEvent<T>` | Row selection changes |
-| `sortChange` | `{ field: string; direction: 'asc' \| 'desc' }` | Sort state changes |
+| `sortChange` | `{ sort: { field: string; direction: 'asc' \| 'desc' } \| undefined }` | Sort state changes |
 | `filterChange` | `{ filters: IFilters }` | Filter state changes |
 | `pageChange` | `{ page: number }` | Current page changes |
 
@@ -177,7 +177,7 @@ The JS package extends the core `IColumnDef<T>` with DOM-aware fields:
 | `cellStyle` | `Partial<CSSStyleDeclaration>` | Inline styles applied to each cell. |
 | `cellEditor` | `string \| (container: HTMLElement, params: object) => { getValue: () => unknown; destroy: () => void }` | Built-in editor name (`'text'`, `'select'`, `'richSelect'`, `'checkbox'`, `'date'`) or a factory function for custom editors. |
 
-All other `IColumnDef` fields (`columnId`, `name`, `sortable`, `filterable`, `type`, `editable`, `valueFormatter`, `valueGetter`, `valueParser`, `minWidth`, `defaultWidth`, `idealWidth`, `pinned`, `required`, `defaultVisible`) are identical to the React version  -  see [Column Definitions](./column-def).
+All other `IColumnDef` fields (`columnId`, `name`, `sortable`, `filterable`, `type`, `editable`, `valueFormatter`, `valueGetter`, `valueParser`, `minWidth`, `defaultWidth`, `idealWidth`, `pinned`, `required`, `defaultVisible`) follow the shared column-definition contract used across the framework packages. See [Column Definitions](./column-def).
 
 ---
 

package/bundled-docs/features/cell-references.mdx

@@ -171,13 +171,13 @@ const grid = new OGrid(document.getElementById('grid'), {
   </TabItem>
 </Tabs>
 
-## How it works
+## How It Works
 
-`cellReferences` turns on three things at once:
+Setting `cellReferences` on the `OGrid` component enables three visual features together:
 
-### 1. Column letter headers
+### 1. Column Letter Headers
 
-A row of Excel-style column letters (A, B, C, ..., Z, AA, AB, ...) appears above the normal header row. They use base-26 encoding:
+A row of Excel-style column letters (A, B, C, ..., Z, AA, AB, ...) appears above the normal header row. These letters use base-26 encoding, matching the Excel convention:
 
 | Columns | Letters |
 |---------|---------|
@@ -186,9 +186,9 @@ A row of Excel-style column letters (A, B, C, ..., Z, AA, AB, ...) appears above
 | 53--78 | BA--BZ |
 | 703+ | AAA, AAB, ... |
 
-### 2. Row numbers
+### 2. Row Numbers
 
-A numbered gutter column on the left shows the absolute row number (1, 2, 3, ...). Numbers are consistent across pages -- page 2 with a page size of 25 starts at row 26, not row 1.
+A numbered gutter column appears on the left side of the grid showing the absolute row number (1, 2, 3, ...). Row numbers are consistent across pages -- page 2 with a page size of 25 starts at row 26, not row 1.
 
 :::info Row numbers without cell references
 You can show row numbers independently without the full cell references feature by using the `showRowNumbers` prop:
@@ -205,11 +205,11 @@ You can show row numbers independently without the full cell references feature
 This gives you the numbered gutter column without column letters or the name box.
 :::
 
-### 3. Name box
+### 3. Name Box
 
-A read-only field in the toolbar shows the active cell reference (e.g. "A1", "C15"). It updates on click or keyboard navigation.
+A small read-only text field appears in the toolbar showing the currently active cell reference (e.g. "A1", "C15", "G3"). It updates automatically when you click a cell or navigate with the keyboard.
 
-The name box uses the absolute row number, so clicking the third column on row 5 of page 2 (page size 10) shows "C15", not "C5".
+The name box uses the column letter and absolute row number, so clicking the third column on row 5 of page 2 (with a page size of 10) shows "C15", not "C5".
 
 ## Props
 

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

@@ -201,7 +201,10 @@ const grid = new OGrid(document.getElementById('grid'), {
   </TabItem>
 </Tabs>
 
-Name is always visible (`required: true` locks its checkbox). Age and Start Date are hidden by default but users can show them. Email, Department, and Salary are visible by default and can be toggled.
+In this example:
+- **Name** is always visible (cannot be unchecked because `required: true`).
+- **Age** and **Start Date** are hidden by default but the user can enable them.
+- **Email**, **Department**, and **Salary** are visible by default and can be toggled.
 
 ## How It Works
 

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

@@ -217,9 +217,9 @@ const grid = new OGrid(document.getElementById('grid'), {
 
 This renders a two-row header: the first row shows "Personal Info" spanning three columns and "Employment" spanning three columns, with the individual column names in the second row.
 
-## How it works
+## How It Works
 
-Column groups use the `IColumnGroupDef<T>` type. A group has a `headerName` and a `children` array that can contain `IColumnDef` items or nested `IColumnGroupDef` items.
+Column groups use the `IColumnGroupDef<T>` type. A group has a `headerName` (the text displayed in the group header cell) and a `children` array that can contain either `IColumnDef` items or nested `IColumnGroupDef` items.
 
 ```tsx
 // IColumnGroupDef<T>
@@ -267,7 +267,14 @@ Standalone `IColumnDef` items at the top level are valid alongside groups. They
 
 ## Group Header Behavior
 
-Group headers are display-only. Clicking them does nothing -- no sort, no filter icon, no resize handle. Labels are centered over their children by default. Sorting, filtering, and resizing all work normally on the leaf column headers below.
+Group headers are display-only:
+
+- **Not sortable.** Clicking a group header does nothing.
+- **Not filterable.** No filter icon or popover appears on group headers.
+- **Not resizable.** Group headers cannot be dragged to resize.
+- **Centered text.** Group header labels are centered over their children by default.
+
+Sorting, filtering, and resizing remain available on the leaf column headers beneath the groups.
 
 ## Props Reference
 

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

@@ -182,15 +182,19 @@ const grid = new OGrid(document.getElementById('grid'), {
 
 The "Name" column stays fixed on the left while all other columns scroll normally.
 
-## How it works
+## How It Works
 
-Set `pinned: 'left'` on any `IColumnDef`. The grid uses CSS `position: sticky` with a calculated `left` offset so multiple pinned columns stack correctly.
+Set `pinned: 'left'` on any `IColumnDef` to pin it. The grid renders pinned columns with CSS `position: sticky` and a calculated `left` offset so multiple pinned columns stack correctly.
 
 ```tsx
 { columnId: 'name', name: 'Name', pinned: 'left' }
 ```
 
-Pinned columns use sticky positioning, stack in the order they appear in the `columns` array, and work with all features: sorting, filtering, editing, cell selection, and context menu.
+Pinned columns:
+
+- Use **sticky positioning** so they stay visible during horizontal scroll.
+- Stack left-to-right in the order they appear in the `columns` array.
+- Work with all grid features: sorting, filtering, editing, cell selection, and context menu.
 
 ### With Row Selection
 

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

@@ -170,9 +170,9 @@ const grid = new OGrid(document.getElementById('grid'), {
 
 Drag any column header to rearrange it. A vertical indicator line shows where the column will be placed.
 
-## How it works
+## How It Works
 
-Set `columnReorder` to `true`. When a user drags a column header at least 5 pixels horizontally, the grid enters reorder mode:
+Set `columnReorder` to `true` on the grid to enable drag-and-drop column reordering. When a user presses and drags a column header at least 5 pixels horizontally, the grid enters reorder mode:
 
 1. A vertical drop indicator appears between columns as the user drags.
 2. On mouse-up, the column is moved to the target position.
@@ -300,9 +300,11 @@ const columns = [
 
 In this example, "ID" and "Name" can be swapped with each other but cannot be dragged into the unpinned section. The unpinned columns ("Email", "Department", "Salary") can be freely rearranged among themselves.
 
-### Edge cases
+### Edge Cases
 
-Group headers are not draggable -- only leaf columns with a `columnId` can be reordered. The rightmost 8 pixels of each header cell are reserved for column resizing, so dragging there starts a resize instead. The 5-pixel horizontal threshold prevents accidental reorders from ordinary clicks.
+- **Column groups:** Group headers are not draggable. Only leaf columns (with a `columnId`) participate in reordering.
+- **Resize handle zone:** The rightmost 8 pixels of each header cell are reserved for column resizing. Dragging in that zone starts a resize, not a reorder.
+- **Minimum drag distance:** A 5-pixel horizontal threshold prevents accidental reorders from clicks.
 
 ## Grid API
 

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

@@ -1,7 +1,7 @@
 ---
 sidebar_position: 12.5
 title: Column Types
-description: Built-in column types for common data patterns -- text, numeric, date, and boolean.
+description: Built-in column types for common data patterns  -  text, numeric, date, and boolean.
 ---
 
 

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

@@ -150,9 +150,9 @@ const grid = new OGrid(document.getElementById('grid'), {
 
 Right-click a cell to see the context menu with all available actions.
 
-## How it works
+## How It Works
 
-The context menu is built in. It appears on data cell right-clicks -- no configuration needed.
+The context menu is built in and requires no additional configuration. It appears when the user right-clicks on a data cell. Right-clicking on headers, empty space, or outside the grid does not open the menu.
 
 ### Built-in Menu Items
 
@@ -187,9 +187,13 @@ The Undo and Redo items reflect their availability through the `canUndo` and `ca
 
 If `onUndo` and `onRedo` are not provided, the undo/redo items still appear but do nothing.
 
-### Cell-only activation
+### Cell-Only Activation
 
-Right-clicking a header or empty space shows the browser's default context menu. The grid menu only appears on data cell right-clicks, with actions scoped to the current selection.
+The context menu only opens on cell right-clicks. This is intentional:
+
+- **Header right-click**: default browser context menu (no grid menu).
+- **Empty space right-click**: default browser context menu.
+- **Cell right-click**: grid context menu with actions scoped to the current selection.
 
 ### Copy/Cut Disabled State
 

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

@@ -156,9 +156,9 @@ document.getElementById('export-btn').addEventListener('click', () => {
   </TabItem>
 </Tabs>
 
-## How it works
+## How It Works
 
-### The `exportToCsv` function
+### The `exportToCsv` Function
 
 ```tsx
 exportToCsv<T>(
@@ -182,11 +182,11 @@ The function:
 3. Escapes values containing commas, quotes, or newlines.
 4. Triggers a browser download with the specified filename.
 
-### Context menu
+### Context Menu Integration
 
-The context menu doesn't include an "Export to CSV" item. Use `exportToCsv` from a toolbar button or any other UI you control.
+When `cellSelection` is enabled (the default), the context menu does not include a dedicated "Export to CSV" item. Use the `exportToCsv` utility directly from a toolbar button or custom UI element.
 
-### Exporting visible columns only
+### Exporting Visible Columns Only
 
 Filter the columns array to only include visible columns before passing to `exportToCsv`.
 
@@ -201,9 +201,9 @@ exportToCsv(
 );
 ```
 
-### Matching display formatting
+### Formatted Values
 
-Apply `valueFormatter` in your `getValue` so the export matches what users see -- a currency column showing "$1,234.56" will export that same string.
+Use `valueFormatter` in your `getValue` function so exported data matches the display. For example, a currency column that shows "$1,234.56" in the grid will export that same string.
 
 ```tsx
 const getValue = (item: Row, columnId: string) => {

package/bundled-docs/features/editing.mdx

@@ -7,17 +7,17 @@ description: Inline editing, clipboard operations, fill handle, and undo/redo
 
 # Editing & Clipboard
 
-Double-click a cell to edit it. Enter saves, Escape cancels. Clipboard paste, drag-to-fill, and full undo/redo are all included.
+Double-click a cell to edit it. Hit Enter to save, Escape to cancel. It feels like a spreadsheet because it's built to work like one — with clipboard paste, drag-to-fill, and full undo/redo out of the box.
 
 <CellEditingDemo />
 
 :::tip Try it in your framework
-The demo above uses Radix UI for styling. Each framework renders editors with its native components: dropdowns, date pickers, and inputs that match your design system.
+The demo above uses Radix UI for styling. Each framework renders editors with its native components — dropdowns, date pickers, and inputs that match your design system.
 :::
 
 ## Get started in 5 minutes
 
-Here's a realistic setup: an employee table with text, dropdown, and numeric columns, including validation that rejects bad salary values before they're saved.
+Here's a realistic setup: an employee table with text, dropdown, and numeric columns — including validation that rejects bad salary values before they're saved.
 
 <Tabs groupId="framework">
   <TabItem value="react" label="React" default>
@@ -79,7 +79,7 @@ function App() {
 ```
 
 :::tip Switching UI libraries
-Same props across all React packages -- just change the import:
+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>`
@@ -134,7 +134,7 @@ Same component API across Angular packages. Change the import:
 - **Angular Material**: `from '@alaarab/ogrid-angular-material'`
 - **PrimeNG**: `from '@alaarab/ogrid-angular-primeng'`
 
-All components are standalone, no NgModule required.
+All components are standalone — no NgModule required.
 :::
 
   </TabItem>
@@ -243,18 +243,18 @@ That single setup gives you inline editing, clipboard paste, fill handle, and fu
 
 Double-click or press **F2** to open the editor. When you're done:
 
-- **Enter** -- saves and moves focus down
-- **Tab** -- saves and moves focus right
-- **Escape** -- cancels, restores the original value
+- **Enter** — saves and moves focus down
+- **Tab** — saves and moves focus right
+- **Escape** — cancels, restores the original value
 
 ### Which editor should I use?
 
 | `cellEditor` | When to use it |
 |--------------|----------------|
-| `'text'` (default) | Freeform text -- names, notes, anything open-ended |
+| `'text'` (default) | Freeform text — names, notes, anything open-ended |
 | `'select'` | Small, fixed list where the user picks exactly one value |
-| `'richSelect'` | Longer list with keyboard search -- much nicer UX than a plain dropdown |
-| `'checkbox'` | Boolean toggle -- renders as a checkbox, commits on click |
+| `'richSelect'` | Longer list with keyboard search — much nicer UX than a plain dropdown |
+| `'checkbox'` | Boolean toggle — renders as a checkbox, commits on click |
 
 ### Searchable dropdown (richSelect)
 
@@ -280,7 +280,7 @@ Use a function for `editable` to make it conditional:
 { columnId: 'name', editable: (item) => item.status !== 'locked' }
 ```
 
-The cell still renders normally. It just won't open an editor when you click it.
+The cell still renders normally — it just won't open an editor when you click it.
 
 ### Custom editor (popup)
 
@@ -308,7 +308,7 @@ function DateEditor({ value, onValueChange, onCommit, onCancel }: ICellEditorPro
 
 ### Validating input with `valueParser`
 
-`valueParser` runs on every edit, paste, fill, and delete. Return `undefined` to silently reject the value. The cell snaps back to its previous state:
+`valueParser` runs on every edit, paste, fill, and delete. Return `undefined` to silently reject the value — the cell snaps back to its previous state:
 
 ```tsx
 {
@@ -323,14 +323,14 @@ function DateEditor({ value, onValueChange, onCommit, onCancel }: ICellEditorPro
 ```
 
 :::tip Pro tip
-`valueParser` is your single validation point -- it covers inline edits, clipboard paste, fill handle, and delete. You don't need separate logic for each.
+`valueParser` is your single source of truth for validation — it runs on inline edits, clipboard paste, fill handle, and delete. You don't need separate logic for each.
 :::
 
 ## Clipboard
 
 <ClipboardDemo />
 
-Standard shortcuts work on any selection with no configuration:
+Standard shortcuts work on any selection — no configuration needed:
 
 | Key | Action | Requires `editable` |
 |-----|--------|-------------------|
@@ -339,13 +339,13 @@ Standard shortcuts work on any selection with no configuration:
 | Ctrl+X / Cmd+X | Cut (copy then clear) | Yes |
 | Delete / Backspace | Clear selected cells | Yes |
 
-Copy respects `valueFormatter`, so what you see is what ends up in the clipboard. Paste calls `valueParser` on each value, so bad data is rejected before it lands in your rows.
+Copy respects `valueFormatter` — what you see is what you get in the clipboard. Paste calls `valueParser` on each value, so bad data is rejected before it lands in your rows.
 
 ## Fill handle
 
 <FillHandleDemo />
 
-The small square in the bottom-right corner of a selection. Drag it down to fill cells, just like Excel. Each filled cell goes through `valueParser`, so validation still applies.
+The small square in the bottom-right corner of a selection — drag it down to fill cells. Works exactly like Excel. Each filled cell goes through `valueParser`, so validation still applies.
 
 :::tip Pro tip
 Select a range of cells before dragging the fill handle to populate multiple columns at once. The fill handle uses `requestAnimationFrame` internally, so it stays smooth even on large selections.
@@ -363,7 +363,7 @@ const { handleCellValueChanged, undo, redo, canUndo, canRedo } = useUndoRedo({
 });
 ```
 
-Pass `handleCellValueChanged` as `onCellValueChanged`. It intercepts changes and pushes them onto the undo stack before updating your state. Undo/redo are also available in the right-click [context menu](./context-menu).
+Pass `handleCellValueChanged` as `onCellValueChanged` — it intercepts changes and pushes them onto the undo stack before updating your state. Undo/redo are also available in the right-click [context menu](./context-menu).
 
 ## Props reference
 
@@ -382,6 +382,6 @@ Pass `handleCellValueChanged` as `onCellValueChanged`. It intercepts changes and
 
 ## Next steps
 
-- [Spreadsheet Selection](./spreadsheet-selection) -- select ranges before editing or pasting
-- [Context Menu](./context-menu) -- right-click to undo, copy, and more
-- [Formulas](./formulas) -- formula-aware editing with `=SUM(A1:A5)` syntax
+- [Spreadsheet Selection](./spreadsheet-selection) — select ranges before editing or pasting
+- [Context Menu](./context-menu) — right-click to undo, copy, and more
+- [Formulas](./formulas) — formula-aware editing with `=SUM(A1:A5)` syntax

package/bundled-docs/features/filtering.mdx

@@ -7,12 +7,12 @@ description: Column-level filtering with text, multi-select, date, and people fi
 
 # Filtering
 
-You have 3,000 support tickets and need to find the ones assigned to Alice that were opened last week. Click the filter icon on "Assignee", pick Alice. Click the filter on "Created Date", set the range. Two clicks, no code.
+You have 3,000 support tickets and need to find the ones assigned to Alice that were opened last week. Click the filter icon on "Assignee", pick Alice. Click the filter on "Created Date", set the range. Done — two clicks, no code.
 
 <FilteringDemo />
 
 :::tip Framework-Specific Styling
-The demo uses React Radix styling. Each framework renders filter UI with its native components: dropdowns, date pickers, and inputs that match your design system.
+The demo uses React Radix styling. Each framework renders filter UI with its native components — dropdowns, date pickers, and inputs that match your design system.
 :::
 
 ## Add filters to any column
@@ -61,7 +61,7 @@ function App() {
 ```
 
 :::tip Switching UI libraries
-Same props across all React packages -- just change the import:
+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>`
@@ -109,7 +109,7 @@ Same API across Angular packages. Change the import:
 - **Angular Material**: `from '@alaarab/ogrid-angular-material'`
 - **PrimeNG**: `from '@alaarab/ogrid-angular-primeng'`
 
-All components are standalone, no NgModule required.
+All components are standalone — no NgModule required.
 :::
 
   </TabItem>
@@ -203,7 +203,7 @@ Type "john" and it matches "John Smith", "Johnny", and "Johnathan".
 
 ### Multi-select filter
 
-A checkbox list. Users pick one or more values and the grid shows only matching rows. Has built-in "Select All" and "Clear All" buttons.
+A checkbox list — users pick one or more values, the grid shows only matching rows. Has built-in "Select All" and "Clear All" buttons.
 
 ```tsx
 {
@@ -223,8 +223,8 @@ A checkbox list. Users pick one or more values and the grid shows only matching
 | `optionsSource` | How it works |
 |-----------------|----------|
 | _(omitted)_ | Client-side: unique values extracted from your data. Server-side: calls your API. |
-| `'static'` | Uses the `options` array you provide -- great for known enums. |
-| `'api'` | Calls `dataSource.fetchFilterOptions(field)` -- for dynamic option lists. |
+| `'static'` | Uses the `options` array you provide — great for known enums. |
+| `'api'` | Calls `dataSource.fetchFilterOptions(field)` — for dynamic option lists. |
 | `'years'` | Auto-generates a year list from the current year down. |
 
 ### Date filter
@@ -241,7 +241,7 @@ A date range picker with "From" and "To" inputs. Shows only rows where the colum
 ```
 
 :::tip
-A column with `type: 'date'` automatically gets date formatting, chronological sorting, and a native date input editor. You don't need to configure those separately.
+A column with `type: 'date'` automatically gets date formatting, chronological sorting, and a native date input editor — you don't need to configure those separately.
 :::
 
 ### People filter
@@ -262,7 +262,7 @@ The people filter requires a `dataSource` with a `searchPeople` method that retu
 
 ## Keeping filter state outside the grid
 
-By default the grid owns its filter state, and filters reset when the component unmounts. To persist them (URL sync, page reload survival), pass `filters` and `onFiltersChange`:
+By default the grid owns its filter state — filters reset when the component unmounts. To persist them (URL sync, page reload survival), pass `filters` and `onFiltersChange`:
 
 ```tsx
 function App() {
@@ -283,11 +283,11 @@ function App() {
 }
 ```
 
-Now you can serialize `filters` to the URL, localStorage, or a server. The grid will restore the exact filter state when the user comes back.
+Now you can serialize `filters` to the URL, localStorage, or a server — and the grid will restore the exact filter state when the user comes back.
 
 ## Server-side filtering
 
-When you're using a `dataSource`, the grid passes filter values to your `fetchPage()` function. You decide what to do with them -- query params, request body, whatever your API expects:
+When you're using a `dataSource`, the grid hands off filter values to your `fetchPage()` function. You decide what to do with them — query params, request body, whatever your API expects:
 
 ```tsx
 const dataSource: IDataSource<Task> = {
@@ -323,7 +323,7 @@ const dataSource: IDataSource<Task> = {
 ```
 
 :::tip Pro tip
-Server-side filtering pairs naturally with [pagination](./pagination). The `totalCount` in your `fetchPage` response tells the grid how many pages exist, so pagination stays accurate even when filters narrow the result set.
+Server-side filtering pairs naturally with [pagination](./pagination). The `totalCount` in your `fetchPage` response tells the grid how many pages there are — so pagination stays accurate even when filters narrow the result set.
 :::
 
 ## Props reference
@@ -341,6 +341,6 @@ Server-side filtering pairs naturally with [pagination](./pagination). The `tota
 
 ## Next steps
 
-- [Sorting](./sorting) -- sort filtered results by any column
-- [Pagination](./pagination) -- paginate filtered results server-side or client-side
-- [Server-Side Data](./server-side-data) -- move all filtering, sorting, and paging to the server
+- [Sorting](./sorting) — sort filtered results by any column
+- [Pagination](./pagination) — paginate filtered results server-side or client-side
+- [Server-Side Data](./server-side-data) — move all filtering, sorting, and paging to the server