apexgrid-skill 2.0.0 → 2.1.0

package/SKILL.md

@@ -12,8 +12,8 @@ description: >
   model, and the `dataPipelineConfiguration` hooks for server-side data.
 metadata:
   author: ApexCharts
-  version: "2.0.0"
-  library_version: "3.0.1"
+  version: "2.1.0"
+  library_version: "3.3.0"
   category: data-visualization
   tags: [grid, data-grid, table, web-component, lit, apex-grid]
   docs: https://github.com/apexcharts/apexgrid
@@ -165,9 +165,11 @@ interface ColumnConfiguration<T extends object, K extends keyof T = keyof T> {
   pinned?: 'start' | 'end' | null;         // freeze to a side during horizontal scroll
   reorderable?: boolean;                   // per-column opt-out of drag reorder
   exportable?: boolean;                    // default true; false omits from CSV export
+  group?: string;                          // id of a columnGroups spanning header (§5)
   sort?:   boolean | { caseSensitive?: boolean; comparer?: (a: T[K], b: T[K]) => number };
   filter?: boolean | { caseSensitive?: boolean };
   editable?: boolean;                      // requires grid `editing.enabled`
+  validators?: Validator<T, K>[];          // declarative edit-time validation (§5)
   headerTemplate?:  (ctx: ApexHeaderContext<T>) => TemplateResult | unknown;
   cellTemplate?:    (ctx: ApexCellContext<T, K>) => TemplateResult | unknown;
   editorTemplate?:  (ctx: ApexEditorContext<T, K>) => TemplateResult | unknown;
@@ -276,6 +278,16 @@ grid.sort({ key: 'name', direction: 'ascending' });       // programmatic (silen
 | `quickFilter` (attr `quick-filter`) | `string` | Global substring search across visible columns. |
 | `showQuickFilter` / `showExport` | `boolean` | Toolbar UI toggles for quick-filter input / export menu. |
 | `columnReordering` (attr `column-reordering`) | `boolean` | Drag-reorder headers; per-column opt-out via `reorderable`. |
+| `columnMenu` | `boolean` | Header kebab-menu button. Default `true`; set `false` to hide. |
+| `columnSeparator` (attr `column-separator`) | `boolean` | Persistent header dividers (also the resize handle). Default `true`; theme via `--ag-header-separator`. |
+| `columnGroups` | `ColumnGroupConfiguration[]` | Spanning headers over contiguous columns (join via `column.group`). See `references/state-and-features.md`. |
+| `localeText` | `GridLocaleText` | Partial locale-key → string overrides; ready-made `esLocale` export. Omitted keys fall back to English. |
+| `rowId` | `(row: T) => string \| number` | Stable row-identity resolver so `getState` selection/expansion survives a data reload. |
+| `displayColumns` *(getter)* | `readonly ColumnConfiguration<T>[]` | Columns in visual render order (start-pinned → unpinned → end-pinned). |
+| `hasColumnGroups` / `columnGroupDepth` *(getters)* | `boolean` / `number` | Whether a group header row renders / its depth (0–1). |
+| `pinnedRows` *(getter)* | `{ top: T[]; bottom: T[] }` | Currently pinned rows per band. |
+| `canUndo` / `canRedo` *(getters)* | `boolean` | Undo/redo availability (needs `editing.history.enabled`). |
+| `exportFormats` *(getter)* | `readonly { id, label }[]` | Export menu formats (CSV in the community grid). |
 | `sortExpressions` / `filterExpressions` | `…[]` (get/set) | Current state. To clear, use `clearSort()` / `clearFilter()`. |
 | `selectedRows` / `expandedRows` | `T[]` (get/set) | Snapshots; set to replace (goes through cancellable events). |
 | `rows` *(getter)* | `ApexGridRow<T>[]` | **Currently rendered only** (virtualized). |
@@ -288,18 +300,24 @@ grid.sort({ key: 'name', direction: 'ascending' });       // programmatic (silen
 
 | Property | Shape |
 |---|---|
-| `editing` | `{ enabled, mode?: 'cell' \| 'row', trigger?: 'click' \| 'doubleClick' }` — plus per-column `editable: true` |
+| `editing` | `{ enabled, mode?: 'cell' \| 'row', trigger?: 'click' \| 'doubleClick', history?: { enabled, stackSize? } }` — plus per-column `editable: true` |
 | `selection` | `{ enabled, mode?: 'single' \| 'multiple', showCheckboxColumn? }` |
 | `pagination` | `{ enabled, mode?: 'local' \| 'remote', page?, pageSize?, pageSizeOptions?, totalItems? }` |
 | `tree` | `{ enabled, getDataPath: (row) => string[], groupColumnKey?, defaultExpanded?, childIndent? }` — flat data, hierarchy derived |
 | `expansion` | `{ enabled, detailTemplate: (ctx) => TemplateResult, isExpandable?, showToggleColumn? }` — master-detail |
+| `rowPinning` | `{ enabled }` — sticky top/bottom bands via `pinRow()` / `unpinRow()` |
+| `rowReordering` | `{ enabled, applyToData?, handle? }` — drag/keyboard reorder + `moveRow()`; manual order is mutually exclusive with sort |
 
 ```ts
-grid.editing    = { enabled: true, mode: 'cell', trigger: 'doubleClick' };
+grid.editing    = { enabled: true, mode: 'cell', trigger: 'doubleClick', history: { enabled: true } };
 grid.selection  = { enabled: true, mode: 'multiple', showCheckboxColumn: true };
 grid.pagination = { enabled: true, pageSize: 25 };
+grid.rowPinning    = { enabled: true };
+grid.rowReordering = { enabled: true };
 ```
 
+Declarative validators (`column.validators`), column groups (`columnGroups`), undo/redo, and state persistence (`getState` / `setState` / `getSchema`) are covered in `references/state-and-features.md`.
+
 ### Methods
 
 | Method | Description |
@@ -309,11 +327,18 @@ grid.pagination = { enabled: true, pageSize: 25 };
 | `getColumn(keyOrIndex)` | Find a column. |
 | `updateColumns(col \| col[])` | Merge new fields into existing columns by `key`. Triggers a pipeline run. |
 | `moveColumn(fromKey, toKey, position?)` | Reorder a column (within its pinning group). |
-| `exportToCSV(options?)` / `exportAs(formatId, options?)` | Export the data. CSV is built in. |
+| `pinColumn(key, 'start' \| 'end' \| null)` / `unpinColumn(key)` | Programmatic column pinning → `Promise<boolean>`; emits `columnPinning`/`columnPinned`. |
+| `exportToCSV(options?)` / `exportAs(formatId, options?)` | Export the data. CSV is built in. `options.source`: `'view'`(def)/`'page'`/`'selected'`/`'all'`. |
+| pagination | `gotoPage(n)`, `setPageSize(n)`, `nextPage()`, `previousPage()`, `firstPage()`, `lastPage()` → `Promise<boolean>`; emit `pageChanging`/`pageChanged`. |
+| `setQuickFilter(value)` | Apply global search (`''` clears) → `Promise<boolean>`; emits `quickFilterChanging`/`quickFilterChanged`. |
 | selection | `selectRow`, `deselectRow`, `toggleRowSelection`, `selectAllRows`, `clearSelection`, `isRowSelected` |
 | expansion | `expandRow`, `collapseRow`, `toggleRowExpansion`, `expandAllRows`, `collapseAllRows`, `isRowExpanded` |
 | tree | `expandTreeRow`, `collapseTreeRow`, `toggleTreeRow`, `expandAllTreeRows`, `collapseAllTreeRows`, `isTreeRowExpanded` |
+| row pinning | `pinRow(row, 'top' \| 'bottom')`, `unpinRow(row)` (needs `rowPinning.enabled`) |
+| row reorder | `moveRow(from, to, position?)` (needs `rowReordering.enabled`) |
 | editing | `commitEdit()`, `cancelEdit()` (used with `mode: 'row'`) |
+| undo/redo | `undo()`, `redo()`, `clearHistory()` (needs `editing.history.enabled`) |
+| state | `getState(options?)` → `GridState`, `setState(partial, options?)` → `SetStateResult`, `getSchema()` → `GridSchema` |
 | `ApexGrid.register()` / `ApexGrid.tagName` | Static element registration / `'apex-grid'`. |
 
 ### Events — UI-initiated only
@@ -333,8 +358,20 @@ Every event fires only for operations driven through the grid's own UI; programm
 | `rowSelecting` / `rowSelected` | row selection |
 | `rowExpanding` / `rowExpanded` | master-detail expand |
 | `treeRowExpanding` / `treeRowExpanded` | tree-row expand |
+| `rowPinning` / `rowPinned` | row pin / unpin (also fires for `pinRow()`/`unpinRow()`) |
+| `rowMoving` / `rowMoved` | row reorder (also fires for `moveRow()`) |
+
+**Exceptions to "UI-only".** The dedicated programmatic methods added for pagination (`gotoPage`, `nextPage`, …), quick-filter (`setQuickFilter`), column pinning (`pinColumn` / `unpinColumn`), row pinning (`pinRow` / `unpinRow`), and row reorder (`moveRow`) **do** emit their `*-ing` / `*-ed` pairs (unlike `sort()` / `filter()`, which stay silent).
+
+Single-shot events (no `-ing` pair):
+
+| Event | `event.detail` | Fires when |
+|---|---|---|
+| `cellValidationFailed` | `{ key, rowIndex, data, value, errors: string[] }` | a candidate value is rejected by `column.validators` (keeps editor open) |
+| `historyChanged` | `{ canUndo, canRedo }` | undo/redo stacks change (record / undo / redo / clear) |
+| `stateChanged` | `{ state: GridState }` | restorable state changes (debounced; UI or programmatic incl. `setState`) |
 
-Operand reference, multi-column sort, and server-side hooks: `references/sort-and-filter.md` and `references/data-pipeline.md`.
+Operand reference, multi-column sort, and server-side hooks: `references/sort-and-filter.md` and `references/data-pipeline.md`. Row pinning/reorder, undo/redo, validators, column groups, state/schema, and localization: `references/state-and-features.md`.
 
 ---
 
@@ -389,5 +426,6 @@ Operand reference, multi-column sort, and server-side hooks: `references/sort-an
 | Column types, templates, auto-generation, per-column styling, header/editor templates | `references/columns-and-templates.md` |
 | Sort & filter — operands, expressions, multi-column, quick-filter, events | `references/sort-and-filter.md` |
 | Server-side data hooks (sort/filter/pagination/quickFilter), virtualization, `dataView` | `references/data-pipeline.md` |
+| Row pinning / reordering, undo-redo, validators, column groups, state & schema (`getState`/`setState`/`getSchema`), localization, export source | `references/state-and-features.md` |
 | End-to-end vanilla JS (no Lit `render`) | `references/vanilla-js.md` |
 | Lit, React, Vue, Angular integration | `references/framework-integration.md` |

package/index.js

@@ -17,6 +17,7 @@ export const referenceFiles = [
   'data-pipeline.md',
   'framework-integration.md',
   'sort-and-filter.md',
+  'state-and-features.md',
   'vanilla-js.md',
 ];
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "apexgrid-skill",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "AI coding skill for the apex-grid web component — structured reference docs that help AI assistants (Claude, Cursor, Copilot, etc.) generate correct apex-grid code.",
   "keywords": [
     "apex-grid",

package/references/columns-and-templates.md

@@ -21,7 +21,9 @@ interface BaseColumnConfiguration<T extends object, K extends keyof T = keyof T>
   pinned?: 'start' | 'end' | null;                 // freeze to a side during horizontal scroll
   reorderable?: boolean;                           // per-column opt-out of drag reorder
   exportable?: boolean;                            // default true; false omits from CSV export
+  group?: string;                                  // id of a columnGroups spanning header (state-and-features.md)
   editable?: boolean;                              // requires grid editing.enabled
+  validators?: Validator<T, K>[];                  // edit-time validation (see below)
   sort?: boolean | { caseSensitive?: boolean; comparer?: (a: T[K], b: T[K]) => number };
   filter?: boolean | { caseSensitive?: boolean };
   headerTemplate?: (ctx: ApexHeaderContext<T>) => TemplateResult | unknown;
@@ -156,6 +158,21 @@ interface ApexHeaderContext<T> {
 }
 ```
 
+## Column validators (`validators`) — 3.2+
+
+`column.validators` run before a candidate value is written (inline edit, row-mode, and bulk paste / fill). Each returns an error `string` (reject) or `null` (pass); all run and every message is collected. A failing commit keeps the editor open, marks the cell `aria-invalid`, and emits `cellValidationFailed`. Requires the column to be `editable` and grid `editing.enabled`.
+
+```ts
+import { required, min, max, pattern, custom } from 'apex-grid';
+
+{ key: 'age', type: 'number', editable: true, validators: [required(), min(0), max(120)] }
+{ key: 'email', editable: true, validators: [pattern(/^\S+@\S+$/, 'Invalid email')] }
+{ key: 'code', editable: true,
+  validators: [custom((value, ctx) => (value === ctx.data.id ? 'Cannot equal id' : null))] }
+```
+
+Built-in factories: `required(message?)`, `min(limit, message?)`, `max(limit, message?)`, `pattern(regex, message?)`, `custom(fn)`. `min`/`max`/`pattern` pass on empty / non-numeric values — compose with `required`. See `references/state-and-features.md` for the `Validator` / `ValidatorContext` shapes and the `cellValidationFailed` payload.
+
 ## Auto-generation — the fastest demo
 
 The shortest possible "just show me a table" example:

package/references/state-and-features.md

@@ -0,0 +1,204 @@
+# State, Localization & Interaction Features (3.1+)
+
+> Everything here landed in **apex-grid 3.1 – 3.3** on top of the 3.0 API. The setup rules from `SKILL.md` (register + bounded host height, no theme import) still apply. Row pinning / reordering, undo-redo, and validators are all **opt-in** via a config object — off by default.
+
+## Row pinning — sticky top / bottom bands
+
+Lift rows out of the scrolling body into sticky top / bottom bands. Identity is **by reference**, so pass the same object held in `grid.data`.
+
+```ts
+grid.rowPinning = { enabled: true };            // GridRowPinningConfiguration
+grid.pinRow(grid.data[0], 'top');               // 'top' | 'bottom' (default 'top')
+grid.pinRow(grid.data[1], 'bottom');
+grid.unpinRow(grid.data[0]);
+grid.pinnedRows;                                // getter → { top: T[]; bottom: T[] }
+```
+
+| Member | Signature | Notes |
+|---|---|---|
+| `rowPinning` | `{ enabled: boolean }` | Disabled when omitted. |
+| `pinRow(row, position?)` | `(T, 'top' \| 'bottom') => boolean` | Moves between bands if already pinned. `false` when disabled / cancelled. |
+| `unpinRow(row)` | `(T) => boolean` | No-op (returns `true`) when not pinned. |
+| `pinnedRows` *(getter)* | `{ top: T[]; bottom: T[] }` | In pin order. |
+
+Events: `rowPinning` (cancellable) → `rowPinned`, both `CustomEvent<{ row: T; position: 'top' | 'bottom' | null }>` (`null` when unpinning). Pins survive sort / filter / pagination as long as row identity is preserved; re-pin after a wholesale `data` swap.
+
+## Row reordering — drag / keyboard / API
+
+```ts
+grid.rowReordering = { enabled: true, applyToData: false, handle: true };
+grid.moveRow(2, 0, 'before');                   // (from, to, position?: 'before' | 'after')
+```
+
+| Field | Type | Default | Notes |
+|---|---|---|---|
+| `enabled` | `boolean` | — | Disabled when omitted. |
+| `applyToData` | `boolean` | `false` | `true` also splices `grid.data` in place; otherwise the order lives in the grid and you persist via `rowMoved`. |
+| `handle` | `boolean` | `true` | `true` renders a leading grip cell (drag only from it); `false` drags from anywhere on the row. |
+
+`moveRow(from, to, position?)` indices are into `grid.pageItems`; returns `boolean`. A manual order is **mutually exclusive with column sorting** — applying a sort clears it. Events: `rowMoving` (cancellable) → `rowMoved`, both `CustomEvent<{ from: number; to: number; data: T }>`.
+
+## Inline-edit undo / redo
+
+Opt in via `editing.history` (requires `editing.enabled`). Tracks every committed cell edit — single, row-mode, and bulk paste / fill.
+
+```ts
+grid.editing = { enabled: true, history: { enabled: true, stackSize: 100 } };
+grid.undo();                                    // Ctrl/Cmd+Z
+grid.redo();                                    // Ctrl/Cmd+Shift+Z or Ctrl+Y
+grid.clearHistory();
+grid.canUndo;  grid.canRedo;                    // getters (false unless history.enabled)
+```
+
+`stackSize` defaults to `100` (older commands evicted past the cap). Event: `historyChanged` — `CustomEvent<{ canUndo: boolean; canRedo: boolean }>`, fires after any record / undo / redo / clear (drive toolbar button enablement from it).
+
+## Declarative column validators
+
+`column.validators: Validator[]` run **before** a candidate value is written. Each returns an error `string` (reject) or `null` (pass). All run and every message is collected, so one commit can surface multiple errors. A failing commit keeps the editor open, marks the cell `aria-invalid`, and emits `cellValidationFailed`. Covers bulk edits (paste / fill) too.
+
+```ts
+import { required, min, max, pattern, custom } from 'apex-grid';
+
+const columns: ColumnConfiguration<User>[] = [
+  { key: 'name', editable: true, validators: [required('Name is required')] },
+  { key: 'age',  type: 'number', editable: true,
+    validators: [required(), min(0), max(120)] },
+  { key: 'email', editable: true,
+    validators: [pattern(/^\S+@\S+$/, 'Invalid email')] },
+  { key: 'code', editable: true,
+    validators: [custom((value, ctx) => value === ctx.data.id ? 'Cannot equal id' : null)] },
+];
+```
+
+| Factory | Signature | Fails when |
+|---|---|---|
+| `required(message?)` | `(msg?) => Validator` | value is `null` / `undefined` / empty-or-whitespace string |
+| `min(limit, message?)` | `(number, msg?) => Validator` | numeric value `< limit` (non-numeric / empty pass — compose with `required`) |
+| `max(limit, message?)` | `(number, msg?) => Validator` | numeric value `> limit` (non-numeric / empty pass) |
+| `pattern(regex, message?)` | `(RegExp, msg?) => Validator` | `String(value)` doesn't match `regex` (empty passes) |
+| `custom(fn)` | `(Validator) => Validator` | wraps a predicate; an inline arrow works identically |
+
+```ts
+// Validator signature
+type Validator<T, K> = (value: unknown, context: ValidatorContext<T, K>) => string | null;
+interface ValidatorContext<T, K> { column: ColumnConfiguration<T, K>; data: T; rowIndex: number; }
+```
+
+Event: `cellValidationFailed` — `CustomEvent<{ key; rowIndex; data: T; value: unknown; errors: readonly string[] }>`.
+
+## Column groups — spanning headers
+
+A presentational header layer above the column header row. `columns` stays flat; a column joins a group via its `group` id. Members must be **contiguous within one pin region** (the grid warns and skips the spanning cell otherwise). v1 ships static spanning headers only (`collapsible` is reserved / inert).
+
+```ts
+grid.columnGroups = [
+  { id: 'name', headerText: 'Name' },
+  { id: 'contact', headerText: 'Contact',
+    headerTemplate: ({ group, span }) => html`<em>${group.headerText} (${span})</em>` },
+];
+grid.columns = [
+  { key: 'first', group: 'name' },
+  { key: 'last',  group: 'name' },
+  { key: 'email', group: 'contact' },
+  { key: 'phone', group: 'contact' },
+];
+```
+
+| `ColumnGroupConfiguration` | Type | Notes |
+|---|---|---|
+| `id` | `string` | Referenced by a column's `group`. |
+| `headerText` | `string` | Text in the spanning cell. |
+| `headerTemplate?` | `(ctx: { group; span }) => TemplateResult` | Overrides `headerText`. |
+| `collapsible?` | `boolean` | Reserved for a future collapse affordance; inert in v1. |
+
+Getters: `hasColumnGroups` (a group has ≥1 visible member), `columnGroupDepth` (0 or 1 in v1), `displayColumns` (`readonly ColumnConfiguration<T>[]` in visual render order: start-pinned, unpinned, end-pinned).
+
+## State & schema — persist / restore / drive AI
+
+`getState()` returns a serializable, JSON-safe snapshot (functions / templates omitted); `setState()` applies a partial one. `getSchema()` returns a machine-readable descriptor of the grid (columns, per-column operations, capabilities, current state) — the contract an AI layer hands an LLM and validates a returned patch against.
+
+```ts
+const snapshot = grid.getState();               // GridState
+localStorage.setItem('grid', JSON.stringify(snapshot));
+// later …
+grid.setState(JSON.parse(localStorage.getItem('grid')!));   // → SetStateResult
+
+// Selection / expansion survive a wholesale data reload only with a stable id:
+grid.rowId = (row) => row.id;
+```
+
+`GridState` (`version: 1`) captures: `columns` (order/width/pinning/visibility), `sort`, `filter` (condition by operand name), `quickFilter`, `pagination` (`{ page, pageSize }`), `selection`, `expansion`, `treeExpanded` / `treeExpandedKeys`, `rowPinning`, `rowOrder`, and per-`modules` state. Rows are captured as `RowRef` — a stable `id` when `rowId` is set, else a positional `index` into `data` (round-trips within a session, not across a data swap).
+
+`setState(state, options?)` is **partial and defensive** — only present slices apply (omit a slice to leave it untouched; a present-but-empty `sort`/`filter` clears it). It never throws on malformed / stale / LLM input unless `options.strict` is set; unknown columns/operands, out-of-range pages, and unresolvable rows are dropped / clamped and reported. `rowOrder` is mutually exclusive with `sort` (a snapshot with both drops `rowOrder`).
+
+```ts
+interface SetStateResult { applied: string[]; skipped: string[]; warnings: string[]; }
+interface GetStateOptions<T> { rowId?: (row: T) => string | number; }
+interface SetStateOptions<T> { rowId?: (row: T) => string | number; strict?: boolean; }
+```
+
+Event: `stateChanged` — `CustomEvent<{ state: GridState }>`, debounced after the render pipeline settles. Fires for programmatic (including `setState`) and UI changes. The payload is only computed while a listener is attached (zero-cost otherwise); identical snapshots don't re-fire, so compare before persisting to avoid a save loop.
+
+## Programmatic pagination, quick-filter, and column pinning
+
+All emit the same cancellable-then-notify event pairs as their UI equivalents and return `Promise<boolean>`.
+
+```ts
+await grid.gotoPage(2);          // clamped into [0, pageCount - 1]
+await grid.nextPage();
+await grid.previousPage();
+await grid.firstPage();
+await grid.lastPage();
+await grid.setPageSize(50);      // returns to the first page
+await grid.setQuickFilter('john');   // '' to clear
+await grid.pinColumn('name', 'start');   // 'start' | 'end' | null
+await grid.unpinColumn('actions');       // = pinColumn(key, null)
+```
+
+`gotoPage` / `setPageSize` / `nextPage` / `previousPage` / `firstPage` / `lastPage` emit `pageChanging` → `pageChanged`. `setQuickFilter` emits `quickFilterChanging` → `quickFilterChanged`. `pinColumn` / `unpinColumn` emit `columnPinning` → `columnPinned` and only change the visual render order (the `columns` array isn't reordered).
+
+## Localization — `localeText`
+
+Every built-in UI string (pagination, filter operators, toolbar, row/selection labels) is localizable through a `GridLocaleText` map keyed by dot-namespaced `GridLocaleKey`s. Partial maps are valid — any omitted key falls back to the English default.
+
+```ts
+import { esLocale } from 'apex-grid';
+
+grid.localeText = esLocale;                                   // whole-UI Spanish
+grid.localeText = { 'toolbar.searchPlaceholder': 'Buscar…' };  // or override a few keys
+
+grid.localize('pagination.summary', { start: 1, end: 25, total: 100 });   // resolve a key
+```
+
+Exports: `EN_LOCALE` (the default dictionary / source of truth for keys), `esLocale` (ready-made Spanish), `interpolate` (`{token}` substitution), `localize`, and the types `GridLocaleKey` / `GridLocaleText` / `LocaleParams`. `grid.localize(key, params?, fallback?)` applies any `localeText` override over the English default and interpolates `{placeholder}` tokens; `fallback` covers keys outside the built-in set (e.g. a custom operand label).
+
+## Column menu & column separator
+
+| Property | Type | Default | Notes |
+|---|---|---|---|
+| `columnMenu` | `boolean` (JS property, no attr) | `true` | Kebab-menu button in each header, always visible. Set `false` to hide it. |
+| `columnSeparator` (attr `column-separator`) | `boolean` | `true` | Persistent trailing divider on every header. On resizable columns it doubles as the resize handle. Theme via `--ag-header-separator` / `--header-separator-color` and inset via `--apex-header-separator-inset`. |
+
+```ts
+grid.columnMenu = false;
+grid.columnSeparator = false;
+```
+
+## Export source & formats
+
+`exportToCSV` / `exportAs` accept a `source` selecting which rows to export:
+
+| `source` | Rows exported |
+|---|---|
+| `'view'` *(default)* | post-filter, post-sort rows across all pages |
+| `'page'` | current page slice only |
+| `'selected'` | current row selection (insertion order) |
+| `'all'` | the raw `data` array |
+
+```ts
+grid.exportToCSV();                                       // download data.csv (view)
+grid.exportToCSV({ filename: 'users', source: 'selected' });
+const text = grid.exportToCSV({ filename: '' });          // string only, no download
+```
+
+`exportFormats` *(getter)* → `readonly ExportFormat[]` (`{ id, label }`) — the community grid offers CSV only; it drives the toolbar export menu, one item per entry, dispatching to `exportAs(formatId, options?)`. Other `ExportOptions` fields: `columns?` (keys to include), `includeHeader?` (default `true`), `formatter?`; CSV adds `delimiter?` (`','`), `bom?` (`true`), `newline?` (`'\r\n'`).