@alaarab/ogrid-mcp 2.4.0

package/bundled-docs/features/formulas.mdx

@@ -0,0 +1,381 @@
+---
+sidebar_position: 5
+title: Formulas
+description: Excel-like formula support with 93 built-in functions, live recalculation, and dependency tracking
+---
+
+
+# Formulas
+
+OGrid includes a lightweight, custom-built formula engine with 93 built-in functions, automatic dependency tracking, and live recalculation. Type `=SUM(A1:A5)` into any editable cell and watch it evaluate instantly.
+
+The engine is **tree-shakeable** — no formula code is loaded unless you enable it with the `formulas` prop. It is MIT-licensed with zero external dependencies.
+
+## Live Demo
+
+<FormulasDemo />
+
+:::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.
+:::
+
+## Quick Example
+
+<Tabs groupId="framework">
+  <TabItem value="react" label="React" default>
+
+```tsx
+
+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 },
+];
+
+function App() {
+  const [data, setData] = useState(initialData);
+
+  const handleChange = (e: ICellValueChangedEvent<Row>) => {
+    setData(prev => prev.map(row =>
+      row.id === e.item.id ? { ...row, [e.columnId]: e.newValue } : row
+    ));
+  };
+
+  return (
+    <OGrid
+      columns={columns}
+      data={data}
+      getRowId={(r) => r.id}
+      editable
+      formulas
+      onCellValueChanged={handleChange}
+      initialFormulas={[
+        { col: 2, row: 0, formula: '=A1+B1' },
+        { col: 2, row: 1, formula: '=SUM(A1:A2)' },
+      ]}
+    />
+  );
+}
+```
+
+:::tip Switching UI libraries
+The `OGrid` component has the same props across all React UI packages. To switch, 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 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<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 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: '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,
+});
+
+// Use FormulaEngineState for formula support
+
+const formulaState = new FormulaEngineState({ formulas: true });
+formulaState.setFormula(2, 0, '=A1+B1', grid.getApi().getDataAccessor());
+```
+
+  </TabItem>
+</Tabs>
+
+## How It Works
+
+### Enabling Formulas
+
+Set `formulas={true}` on the `<OGrid>` component. This opt-in prop lazily creates a `FormulaEngine` instance — grids without formulas pay zero cost.
+
+### Entering Formulas
+
+Type any value starting with `=` into an editable cell. The formula engine intercepts the edit, parses the expression, evaluates it, and displays the result. The formula string is stored separately from the data — your `data[]` array is never modified by formulas.
+
+### Dependency Tracking
+
+The engine builds a dependency graph. When cell A1 changes, all formulas that reference A1 are automatically recalculated in topological order. Circular references are detected and produce a `#CIRC!` error.
+
+### Initial Formulas
+
+Pass `initialFormulas` to pre-load formulas when the grid mounts:
+
+```tsx
+<OGrid
+  formulas
+  initialFormulas={[
+    { col: 0, row: 3, formula: '=SUM(A1:A3)' },
+    { col: 1, row: 3, formula: '=AVERAGE(B1:B3)' },
+  ]}
+/>
+```
+
+Coordinates use 0-based column index (position in flat columns array) and 0-based row index (position in data array).
+
+### Error Handling
+
+Formula errors display in red text automatically using the `--ogrid-formula-error-color` CSS variable:
+
+| Error | Meaning |
+|-------|---------|
+| `#REF!` | Invalid cell reference |
+| `#DIV/0!` | Division by zero |
+| `#VALUE!` | Wrong value type |
+| `#NAME?` | Unknown function name |
+| `#CIRC!` | Circular reference detected |
+| `#N/A` | No match found (VLOOKUP, MATCH) |
+| `#NUM!` | Invalid numeric value (e.g., LARGE with k out of range) |
+| `#ERROR!` | General formula error |
+
+### Formula-Aware Features
+
+When `formulas` is enabled, these features become formula-aware automatically:
+
+- **Clipboard** — Copy copies the formula string (e.g., `=SUM(A1:A5)`), not the computed value. Pasting a string starting with `=` creates a new formula.
+- **Fill Handle** — Dragging a formula cell adjusts relative references. `=A1+B1` dragged down becomes `=A2+B2`. Absolute references (`$A$1`) are preserved.
+- **CSV Export** — Pass `exportMode: 'formulas'` to export formula strings instead of computed values.
+
+## Built-in Functions (93)
+
+### Math (30)
+`SUM`, `AVERAGE`, `MIN`, `MAX`, `COUNT`, `COUNTA`, `ROUND`, `ROUNDUP`, `ROUNDDOWN`, `INT`, `TRUNC`, `ABS`, `CEILING`, `FLOOR`, `MOD`, `POWER`, `SQRT`, `PRODUCT`, `SUMPRODUCT`, `MEDIAN`, `LARGE`, `SMALL`, `RANK`, `SIGN`, `LOG`, `LN`, `EXP`, `PI`, `RAND`, `RANDBETWEEN`
+
+### Logical (10)
+`IF`, `AND`, `OR`, `NOT`, `XOR`, `IFERROR`, `IFNA`, `IFS`, `SWITCH`, `CHOOSE`
+
+### Text (22)
+`CONCATENATE`, `CONCAT`, `UPPER`, `LOWER`, `TRIM`, `LEFT`, `RIGHT`, `MID`, `LEN`, `SUBSTITUTE`, `FIND`, `SEARCH`, `REPLACE`, `REPT`, `EXACT`, `PROPER`, `CLEAN`, `CHAR`, `CODE`, `TEXT`, `VALUE`, `TEXTJOIN`
+
+### Lookup (5)
+`VLOOKUP`, `HLOOKUP`, `XLOOKUP`, `INDEX`, `MATCH`
+
+### Date (14)
+`TODAY`, `NOW`, `YEAR`, `MONTH`, `DAY`, `DATE`, `DATEDIF`, `EDATE`, `EOMONTH`, `WEEKDAY`, `HOUR`, `MINUTE`, `SECOND`, `NETWORKDAYS`
+
+### Statistics (6)
+`SUMIF`, `COUNTIF`, `AVERAGEIF`, `SUMIFS`, `COUNTIFS`, `AVERAGEIFS`
+
+### Information (6)
+`ISBLANK`, `ISNUMBER`, `ISTEXT`, `ISERROR`, `ISNA`, `TYPE`
+
+### Custom Functions
+
+Register custom functions at runtime:
+
+```tsx
+<OGrid
+  formulas
+  formulaFunctions={{
+    DOUBLE: {
+      name: 'DOUBLE',
+      minArgs: 1,
+      maxArgs: 1,
+      evaluate: (args) => Number(args[0]) * 2,
+    },
+  }}
+/>
+```
+
+Then use `=DOUBLE(A1)` in any cell.
+
+## Named Ranges
+
+Define human-readable names for cell references and ranges:
+
+```tsx
+<OGrid
+  formulas
+  namedRanges={{
+    Revenue: 'A1:A10',
+    TaxRate: 'B1',
+  }}
+/>
+```
+
+Then use them in formulas: `=SUM(Revenue)` or `=A1*TaxRate`.
+
+The `FormulaEngine` also supports runtime management:
+
+```tsx
+// Define at runtime via the grid API
+engine.defineNamedRange('Profit', 'C1:C10');
+
+// Remove a named range
+engine.removeNamedRange('Profit');
+
+// Get all named ranges
+const ranges = engine.getNamedRanges(); // Map<string, string>
+```
+
+Named ranges are **case-insensitive** — `Revenue`, `revenue`, and `REVENUE` all resolve to the same range.
+
+## Formula Auditing
+
+Trace formula dependencies for debugging and visualization:
+
+```tsx
+// Get all cells that a formula depends on (deep, transitive)
+const precedents = engine.getPrecedents(col, row);
+// → [{ cellKey, col, row, formula?, value }]
+
+// Get all cells that depend on a cell (deep, transitive)
+const dependents = engine.getDependents(col, row);
+
+// Get full audit trail (target + precedents + dependents)
+const trail = engine.getAuditTrail(col, row);
+// → { target: IAuditEntry, precedents: IAuditEntry[], dependents: IAuditEntry[] }
+```
+
+Each `IAuditEntry` includes: `cellKey`, `col`, `row`, `formula` (if the cell has one), and `value`.
+
+## Cross-Sheet References
+
+Reference cells in other sheets using Excel-style syntax:
+
+```tsx
+// Register sheet accessors for cross-sheet formulas
+<OGrid
+  formulas
+  sheets={{
+    Sheet2: sheet2Accessor,
+    'Sales Data': salesAccessor,
+  }}
+/>
+```
+
+Then use in formulas:
+- `=Sheet2!A1` — single cell from Sheet2
+- `=SUM(Sheet2!A1:A10)` — range from Sheet2
+- `='Sales Data'!B5` — quoted sheet name (for names with spaces)
+
+The `FormulaEngine` also supports runtime registration:
+
+```tsx
+engine.registerSheet('Sheet2', accessor);
+engine.unregisterSheet('Sheet2');
+```
+
+Referencing an unregistered sheet produces a `#REF!` error.
+
+## Props Reference
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `formulas` | `boolean` | `false` | Enable formula support (tree-shakeable) |
+| `initialFormulas` | `Array<{ col, row, formula }>` | -- | Pre-load formulas on mount |
+| `onFormulaRecalc` | `(result: IRecalcResult) => void` | -- | Called after each recalculation with updated cells |
+| `formulaFunctions` | `Record<string, IFormulaFunction>` | -- | Custom functions to register |
+| `namedRanges` | `Record<string, string>` | -- | Named ranges: name → cell/range ref string |
+| `sheets` | `Record<string, IGridDataAccessor>` | -- | Sheet accessors for cross-sheet references |
+
+## Cell Reference Syntax
+
+| Syntax | Example | Meaning |
+|--------|---------|---------|
+| Relative | `A1` | Column A, Row 1 — adjusts during fill |
+| Absolute column | `$A1` | Column A locked, row adjusts |
+| Absolute row | `A$1` | Column adjusts, row 1 locked |
+| Fully absolute | `$A$1` | Both locked — never adjusts |
+| Range | `A1:B5` | Rectangular range from A1 to B5 |
+| Named range | `Revenue` | Resolves to the defined cell/range |
+| Cross-sheet | `Sheet2!A1` | Cell A1 from Sheet2 |
+| Quoted sheet | `'Sales Data'!A1` | Cell from a sheet with spaces in name |
+
+## Related
+
+- [Editing & Clipboard](./editing) — cell editing, copy/paste, fill handle, undo/redo
+- [Cell References](./cell-references) — Excel-style column letters and name box
+- [CSV Export](./csv-export) — export grid data including formula strings
+- [Status Bar](./status-bar) — aggregations on selected cells
+
+## Community
+
+Have questions or want to discuss formulas? Join the [OGrid Community Discord](https://discord.gg/KMajyx9j4m).

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

@@ -0,0 +1,311 @@
+---
+sidebar_position: 18
+title: Grid API
+description: Imperative API ref for programmatic control of the grid
+---
+
+
+# Grid API
+
+The `IOGridApi` ref gives you imperative control over the grid: set data, manage loading state, save and restore column state, control filters, and manage row selection -- all from outside the grid component.
+
+## Live Demo
+
+<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.
+:::
+
+## Quick Example
+
+<Tabs groupId="framework">
+  <TabItem value="react" label="React" default>
+
+```tsx
+
+interface Row {
+  id: number;
+  name: string;
+  department: string;
+  salary: number;
+}
+
+function App() {
+  const gridRef = useRef<IOGridApi<Row>>(null);
+
+  const handleRefresh = async () => {
+    gridRef.current?.setLoading(true);
+    const data = await fetchEmployees();
+    gridRef.current?.setRowData(data);
+    gridRef.current?.setLoading(false);
+  };
+
+  return (
+    <>
+      <button onClick={handleRefresh}>Refresh</button>
+      <OGrid
+        ref={gridRef}
+        columns={columns}
+        data={initialData}
+        getRowId={(r) => r.id}
+      />
+    </>
+  );
+}
+```
+
+:::tip Switching UI libraries
+The `OGrid` component has the same props across all React UI packages. To switch, 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;
+  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>
+
+## How It Works
+
+Pass a `ref` to the `OGrid` component. The ref exposes the `IOGridApi<T>` interface with methods for programmatic grid control.
+
+### API Methods
+
+| Method | Signature | Description |
+|---|---|---|
+| `setRowData` | `(data: T[]) => void` | Replace all row data (client-side only; no-op with `dataSource`) |
+| `setLoading` | `(loading: boolean) => void` | Show or hide the loading overlay |
+| `getDisplayedRows` | `() => T[]` | Get the currently displayed (filtered, sorted, paginated) rows |
+| `refreshData` | `() => void` | Re-trigger a data fetch (server-side only; no-op for client-side) |
+| `getColumnState` | `() => IGridColumnState` | Get current column visibility, sort, order, widths, and filters |
+| `applyColumnState` | `(state: Partial<IGridColumnState>) => void` | Bulk-restore any combination of column state fields |
+| `getColumnOrder` | `() => string[]` | Get the current column display order (array of column IDs) |
+| `setColumnOrder` | `(order: string[]) => void` | Programmatically set the column display order |
+| `setFilterModel` | `(filters: IFilters) => void` | Set the active filter model |
+| `clearFilters` | `() => void` | Clear all active filters |
+| `clearSort` | `() => void` | Reset the sort to no active sort |
+| `resetGridState` | `(options?: { keepSelection?: boolean }) => void` | Reset all grid state (filters, sort, and optionally selection) |
+| `getSelectedRows` | `() => RowId[]` | Get the IDs of currently selected rows |
+| `setSelectedRows` | `(rowIds: RowId[]) => void` | Set which rows are selected |
+| `selectAll` | `() => void` | Select all rows |
+| `deselectAll` | `() => void` | Deselect all rows |
+| `scrollToRow` | `(index: number, options?: { align?: 'start' \| 'center' \| 'end' }) => void` | Scroll to a row by index (virtual scrolling only) |
+
+### Save and Restore Column State
+
+`getColumnState()` returns an `IGridColumnState` object that is fully JSON-serializable. Store it in `localStorage`, a database, or a URL parameter, and restore it later with `applyColumnState()`.
+
+```tsx
+// Save to localStorage
+const handleSave = () => {
+  const state = gridRef.current?.getColumnState();
+  if (state) {
+    localStorage.setItem('grid-state', JSON.stringify(state));
+  }
+};
+
+// Restore from localStorage
+const handleRestore = () => {
+  const saved = localStorage.getItem('grid-state');
+  if (saved) {
+    gridRef.current?.applyColumnState(JSON.parse(saved));
+  }
+};
+```
+
+### `IGridColumnState` Fields
+
+```tsx
+interface IGridColumnState {
+  visibleColumns: string[];
+  sort?: { field: string; direction: 'asc' | 'desc' };
+  columnOrder?: string[];
+  columnWidths?: Record<string, number>;
+  filters?: IFilters;
+  pinnedColumns?: Record<string, 'left' | 'right'>;
+}
+```
+
+| Field | Description |
+|---|---|
+| `visibleColumns` | Array of visible column IDs |
+| `sort` | Active sort column and direction |
+| `columnOrder` | Column display order (array of column IDs) |
+| `columnWidths` | Column width overrides in pixels |
+| `filters` | Active filter values by field |
+| `pinnedColumns` | Pinned column positions by column ID |
+
+All fields in `applyColumnState` are optional. Pass only what you want to restore.
+
+```tsx
+// Restore only sort and filters, leave visibility and widths unchanged
+gridRef.current?.applyColumnState({
+  sort: { field: 'salary', direction: 'desc' },
+  filters: { department: { type: 'multiSelect', value: ['Engineering'] } },
+});
+```
+
+### Programmatic Filtering
+
+Use `setFilterModel` to apply filters from outside the grid.
+
+```tsx
+gridRef.current?.setFilterModel({
+  department: { type: 'multiSelect', value: ['Engineering', 'Design'] },
+  name: { type: 'text', value: 'John' },
+});
+```
+
+Filter values use the `FilterValue` discriminated union type:
+- `{ type: 'text', value: string }` for text filters
+- `{ type: 'multiSelect', value: string[] }` for multi-select filters
+- `{ type: 'people', value: UserLike }` for people filters
+- `{ type: 'date', value: IDateFilterValue }` for date range filters
+
+### Row Selection Control
+
+```tsx
+// Select specific rows
+gridRef.current?.setSelectedRows([1, 5, 12]);
+
+// Get current selection
+const selected = gridRef.current?.getSelectedRows(); // [1, 5, 12]
+
+// Select all / deselect all
+gridRef.current?.selectAll();
+gridRef.current?.deselectAll();
+```
+
+### Updating Data
+
+For client-side grids, use `setRowData` to replace the data without re-mounting the component.
+
+```tsx
+const refreshData = async () => {
+  gridRef.current?.setLoading(true);
+  const fresh = await fetch('/api/employees').then((r) => r.json());
+  gridRef.current?.setRowData(fresh);
+  gridRef.current?.setLoading(false);
+};
+```
+
+## Props Reference
+
+| Type | Field | Description |
+|---|---|---|
+| `OGrid` | `ref` | `React.Ref<IOGridApi<T>>` |
+| `IOGridProps<T>` | `onColumnResized` | `(columnId: string, width: number) => void` -- notified on user column resize |
+
+## Related
+
+- [Column Chooser](./column-chooser) -- the Column Chooser modifies the same visibility state accessible via `getColumnState`
+- [Server-Side Data](./server-side-data) -- `setFilterModel` triggers a re-fetch in server-side mode
+- [Status Bar](./status-bar) -- reflects the state managed by the API
+- [CSV Export](./csv-export) -- combine with `getColumnState` to export only visible columns