SVAR React DataGrid

https://github.com/svar-widgets/react-grid
Admin
A high-performance React data table component with virtual scrolling, in-cell editing, sorting,...
Tokens:42,602
Snippets:296
Trust Score:8.5
License:MIT
Update:1 week ago
Show doc for...
Tokens:
Raw
### Install SVAR React DataGrid

Source: https://github.com/svar-widgets/react-grid/blob/main/README.md

Use npm to install the package in your project.

```bash
npm install @svar-ui/react-grid
```

--------------------------------

### Backend Integration Example

Source: https://github.com/svar-widgets/react-grid/blob/main/_autodocs/api-reference/api-object.md

Example of using the API to execute an 'add-row' action and setting up event handling with intercept and on methods.

```APIDOC
## Backend Integration Example

### Description
Demonstrates how to execute an 'add-row' action via the API and how to set up event handling with intercept and on methods.

### Code
```js
async function addRow() {
  const ev = await apiRef.current.exec("add-row", {
    row: {},
    done: (ev) => console.log("row added", ev.row.id),
  });
  console.log("server id:", ev.response.id);
}

function init(api) {
  api.setNext(new EventResolver("done")).setNext(provider);
  api.on("select-row", log("[select] on"));
  api.intercept("select-row", () => (blockSelect ? false : log("[select] intercept")()));
  apiRef.current = api;
}
```
```

--------------------------------

### Observing Reactive State Example

Source: https://github.com/svar-widgets/react-grid/blob/main/_autodocs/api-reference/api-object.md

Example of subscribing to the reactive state's history store to observe changes.

```APIDOC
## Observing Reactive State Example

### Description
Demonstrates how to subscribe to the reactive state's history store to observe changes.

### Code
```js
const historyStore = api ? api.getReactiveState()?.history : null;
useEffect(() => {
  if (!historyStore) return;
  const unsubscribe = historyStore.subscribe((v) => setHistoryValue(v));
  return () => unsubscribe();
}, [historyStore]);
```
```

--------------------------------

### on(name, handler) usage

Source: https://github.com/svar-widgets/react-grid/blob/main/_autodocs/api-reference/api-object.md

Examples of subscribing to actions to log events or synchronize external state.

```js
api.on('select-row', () => helpers.showNotice({ text: '[select] on' }));
api.on('move-item', (ev) => {
  const { id, target, mode } = ev;
  // reorder your own backing array, then re-slice the data window
});
```

--------------------------------

### Custom tooltip component

Source: https://github.com/svar-widgets/react-grid/blob/main/_autodocs/api-reference/tooltip.md

Example demonstrating how to provide a custom React component to render tooltip content.

```jsx
import { Grid, Tooltip } from '@svar-ui/react-grid';

function CustomTooltip({ data }) {
  const { row, column } = data;
  return <div>{row.firstName} {row.lastName} — {column.id.toUpperCase()}</div>;
}

function App() {
  const [api, setApi] = useState(null);
  return (
    <Tooltip content={CustomTooltip} api={api}>
      <Grid data={data} columns={columns} init={setApi} />
    </Tooltip>
  );
}
```

--------------------------------

### Basic HeaderMenu Usage

Source: https://github.com/svar-widgets/react-grid/blob/main/_autodocs/api-reference/header-menu.md

Example of wrapping a Grid component with HeaderMenu to enable column toggling.

```jsx
import { useState } from 'react';
import { Grid, HeaderMenu } from '@svar-ui/react-grid';

function App() {
  const [grid, setGrid] = useState(null);

  return (
    <HeaderMenu api={grid}>
      <Grid data={data} columns={columns} init={setGrid} />
    </HeaderMenu>
  );
}
```

--------------------------------

### Customized Toolbar Buttons

Source: https://github.com/svar-widgets/react-grid/blob/main/_autodocs/api-reference/toolbar.md

Example of filtering default buttons and adding a custom action button.

```jsx
import { Grid, Toolbar, defaultToolbarButtons } from '@svar-ui/react-grid';

// drop copy/cut/paste rows, then insert a custom button
const outButtons = ['copy-row', 'cut-row', 'paste-row'];
const items = defaultToolbarButtons.filter((b) => !outButtons.includes(b.id));
items.splice(1, 0, { id: 'my-action', comp: 'icon', icon: 'wxi-cat' });

function App() {
  const [grid, setGrid] = useState(null);

  const onClick = ({ item }) => {
    if (item.id === 'my-action') {
      const id = grid.getState().selectedRows[0];
      if (id) grid.exec('delete-row', { id });
    }
  };

  return (
    <>
      <Toolbar api={grid} items={items} onClick={onClick} />
      <Grid data={data} columns={columns} init={setGrid} undo reorder />
    </>
  );
}
```

--------------------------------

### intercept(name, handler) examples

Source: https://github.com/svar-widgets/react-grid/blob/main/_autodocs/api-reference/api-object.md

Examples of intercepting actions to block selection, replace built-in editors, or augment filter behavior.

```js
// block selection of row id 1
api.intercept("select-row", (ev) => {
  if (ev.id === 1) return false;
});

// replace the built-in inline editor with an external editor
gridApi.intercept("open-editor", ({ id }) => {
  setDataToEdit(gridApi.getRow(id)); // your external form
  return false; // cancel built-in behavior
});

// augment the default filter behavior with a custom predicate
api.intercept("filter-rows", (ev) => {
  const { filterValues } = api.getState();
  const { value, key } = ev;
  filterValues[key] = value;
  ev.filter = createFilter(filterValues); // custom per-row predicate
});
```

--------------------------------

### setNext(provider) usage

Source: https://github.com/svar-widgets/react-grid/blob/main/_autodocs/api-reference/api-object.md

Example of wiring a RestDataProvider to the grid API for backend integration.

```js
const init = (api) => {
  api.setNext(provider);
};
```

--------------------------------

### Grid dynamic data mode

Source: https://github.com/svar-widgets/react-grid/blob/main/_autodocs/configuration.md

Example of using the dynamic prop to enable virtual loading and handling the onRequestData event to provide data slices.

```APIDOC
## Grid dynamic data mode

### Description
Activates virtual loading by specifying rowCount and columnCount. The grid requests data slices via the request-data event when the visible row window changes.

### Usage
Pass the dynamic prop to the Grid component and handle the onRequestData event to provide the requested data slice.

### Parameters
#### dynamic prop
- **rowCount** (number) - Required - Total number of rows to reserve space for.
- **columnCount** (number) - Required - Total number of columns.

#### onRequestData event
- **event** (object) - Contains the requested row range: { row: { start, end } }.

### Example
```jsx
function dataProvider(ev) {
  const { row } = ev;
  if (row) setData(rawDataRef.current.slice(row.start, row.end));
}

<Grid
  data={data}
  columns={columns}
  init={init}
  dynamic={{ rowCount: 1000, columnCount: 100 }}
  onRequestData={dataProvider}
/>
```

### Notes
- The action 'request-data' is camelized to 'onRequestData' event prop.
- api.on('request-data', handler) works the same way.
```

--------------------------------

### Implement two filters with custom predicate override

Source: https://github.com/svar-widgets/react-grid/blob/main/_autodocs/api-reference/inline-filters.md

This example demonstrates defining columns with text filters and using the init function to intercept the filter-rows event for custom predicate logic.

```jsx
import { useCallback } from 'react';
import { Grid } from '@svar-ui/react-grid';

const columns = [
  { id: 'id', width: 50 },
  { id: 'city', width: 100, header: { text: 'City', rowspan: 2 }, footer: 'City' },
  { id: 'firstName', header: ['First Name', { filter: 'text' }], footer: 'First Name' },
  { id: 'lastName', header: ['Last Name', { filter: 'text' }], footer: 'Last Name' },
  { id: 'email', header: { text: 'Email', rowspan: 2 }, footer: 'Email', width: 230 },
];

const init = (api) => {
  api.intercept('filter-rows', (ev) => {
    const { filterValues } = api.getState();
    const { value, key } = ev;
    filterValues[key] = value;
    ev.filter = (obj) => /* custom predicate over obj:
      typeof value === 'string'
        ? String(obj[key]).toLowerCase().includes(value.toLowerCase())
        : obj[key] === value */ true;
  });
};

export default function App() {
  return <Grid data={data} columns={columns} init={init} />;
}
```

--------------------------------

### Tooltip with overflow detection

Source: https://github.com/svar-widgets/react-grid/blob/main/_autodocs/api-reference/tooltip.md

Example showing how to enable tooltips only for overflowing cells using the overflow prop.

```jsx
import { useState } from 'react';
import { Grid, Tooltip } from '@svar-ui/react-grid';

const columns = [
  { id: 'id', width: 50, tooltip: false },
  { id: 'city', width: 100, header: 'City' },
  { id: 'email', header: 'Email' }, // tooltip enabled by default
  { id: 'date', tooltip: (obj) => obj.date?.toDateString() }, // function tooltip
];

function App() {
  const [api, setApi] = useState(null);

  return (
    <Tooltip overflow api={api}>
      <Grid data={data} columns={columns} init={setApi} />
    </Tooltip>
  );
}
```

--------------------------------

### Restricting Toggleable Columns

Source: https://github.com/svar-widgets/react-grid/blob/main/_autodocs/api-reference/header-menu.md

Example of using the columns prop to restrict which columns appear in the HeaderMenu.

```jsx
<HeaderMenu api={grid} columns={{ firstName: true, lastName: true }}>
  <Grid data={data} columns={columns} init={setGrid} />
</HeaderMenu>
```

--------------------------------

### Basic Grid Implementation

Source: https://github.com/svar-widgets/react-grid/blob/main/README.md

Import the Grid component and required styles, then define your data and columns to render the grid.

```jsx
import { Grid } from "@svar-ui/react-grid";
import "@svar-ui/react-grid/all.css"; // required styles

const data = [
  {
    id: 1,
    email: "Leora13@yahoo.com",
    firstName: "Ernest",
    lastName: "Schuppe",
  },
  {
    id: 2,
    email: "Mose_Gerhold51@yahoo.com",
    firstName: "Janis",
    lastName: "Vandervort",
  },
];

const columns = [
  {
    id: "id",
    width: 50,
  },
  {
    id: "firstName",
    header: "First Name",
    footer: "First Name",
    width: 150,
  },
  {
    id: "lastName",
    header: "Last Name",
    footer: "Last Name",
    width: 150,
  },
];

export default function App() {
  return <Grid data={data} columns={columns} />;
}
```

--------------------------------

### Importing the Grid component

Source: https://github.com/svar-widgets/react-grid/blob/main/_autodocs/api-reference/grid.md

The main entry point for the DataGrid component.

```js
import { Grid } from '@svar-ui/react-grid';
```

--------------------------------

### Import theme provider components

Source: https://github.com/svar-widgets/react-grid/blob/main/_autodocs/api-reference/themes.md

Imports the theme components directly from the package entry point.

```js
import { Material, Willow, WillowDark } from '@svar-ui/react-grid';
```

--------------------------------

### Backend Integration with Event Handling

Source: https://github.com/svar-widgets/react-grid/blob/main/_autodocs/api-reference/api-object.md

Demonstrates executing an add-row action with a callback and initializing the API with event resolvers and interceptors as seen in demos/cases/EventHandling.jsx.

```js
async function addRow() {
  const ev = await apiRef.current.exec("add-row", {
    row: {},
    done: (ev) => console.log("row added", ev.row.id),
  });
  console.log("server id:", ev.response.id);
}

function init(api) {
  api.setNext(new EventResolver("done")).setNext(provider);
  api.on("select-row", log("[select] on"));
  api.intercept("select-row", () => (blockSelect ? false : log("[select] intercept")()));
  apiRef.current = api;
}
```

--------------------------------

### Default Toolbar Implementation

Source: https://github.com/svar-widgets/react-grid/blob/main/_autodocs/api-reference/toolbar.md

A basic implementation of the toolbar using the grid API.

```jsx
import { useState } from 'react';
import { Grid, Toolbar } from '@svar-ui/react-grid';

function App() {
  const [grid, setGrid] = useState(null);

  return (
    <>
      <Toolbar api={grid} />
      <Grid data={data} columns={columns} init={setGrid} undo reorder />
    </>
  );
}
```

--------------------------------

### Conditional tooltip suppression

Source: https://github.com/svar-widgets/react-grid/blob/main/_autodocs/api-reference/tooltip.md

Example of using a custom resolver to conditionally suppress tooltips based on the hovered element's attributes.

```jsx
<Tooltip
  api={api}
  resolver={(element) => {
    // element has data-row-id / data-col-id attributes
    return element.getAttribute('data-col-id') === 'stars' ? null : 'hovered';
  }}
>
  <Grid data={data} columns={columns} init={setApi} />
</Tooltip>
```

--------------------------------

### Customized Context Menu Options and Click Handling

Source: https://github.com/svar-widgets/react-grid/blob/main/_autodocs/api-reference/context-menu.md

Demonstrates filtering default menu options and adding custom items. Custom actions are handled via the onClick prop, while built-in actions are managed automatically by the grid.

```jsx
import { Grid, ContextMenu, defaultMenuOptions } from '@svar-ui/react-grid';

const options = [
  ...defaultMenuOptions.filter(
    (op) => !['copy-row', 'cut-row', 'paste-row'].includes(op.id),
  ),
  { comp: 'separator' },
  { id: 'info', text: 'Row info', icon: 'wxi-alert' },
  { id: 'view', text: 'View details', icon: 'wxi-external' },
];

function App() {
  const [grid, setGrid] = useState(null);

  const handleClicks = (ev) => {
    const option = ev.action;
    if (!option) return;
    if (option.id === 'info' || option.id === 'view') {
      const id = grid.getState().selectedRows[0];
      const row = id ? grid.getRow(id) : null;
      console.log(option.text, row);
    }
  };

  return (
    <ContextMenu api={grid} options={options} onClick={handleClicks}>
      <Grid ref={setGrid} data={data} columns={columns} multiselect reorder />
    </ContextMenu>
  );
}
```

--------------------------------

### getStores()

Source: https://github.com/svar-widgets/react-grid/blob/main/_autodocs/api-reference/api-object.md

Returns the internal stores; the data key holds the DataStore instance.

```APIDOC
## getStores()

### Description
Returns the internal stores; the data key holds the DataStore instance (from @svar-ui/grid-store, constructed with the writable factory from @svar-ui/lib-react).

### Returns
- **Object** - { data: DataStore }
```

--------------------------------

### editor property configuration

Source: https://github.com/svar-widgets/react-grid/blob/main/_autodocs/api-reference/inline-editors.md

The editor property on a column accepts a string, an IColumnEditorConfig object, or a TEditorHandlerConfig function. This snippet shows the TypeScript type definitions and usage examples.

```APIDOC
## editor property

### Description
The `editor` property on a column accepts a string, an `IColumnEditorConfig` object, or a `TEditorHandlerConfig` function. A plain string selects a built-in editor type. An object adds per-editor configuration. A function resolves the editor dynamically per row/column.

### Type Definitions
```ts
type TEditorHandlerConfig = (
  row?: IRow,
  column?: IColumn,
) => TEditorType | IColumnEditorConfig | null;

interface IColumnEditorConfig extends IColumnEditor {
  config?: IColumnEditor['config'] & {
    cell?: FC<{
      data: any;
      onaction: (ev: { action?: any; data?: { [key: string]: any } }) => void;
    }>;
  };
}
```

### Usage
- `editor: 'text'` selects a built-in type.
- `editor: { type, config, options?, ... }` adds per-editor config.
- `editor: (row, column) => editorConfig | null` resolves the editor dynamically per row/column. A `null` result renders no editor.

### Example
```jsx
editor: (row) => properties[row.id]
```
```

--------------------------------

### Import Toolbar

Source: https://github.com/svar-widgets/react-grid/blob/main/_autodocs/api-reference/toolbar.md

Import the Toolbar component from the package entry.

```js
import { Toolbar } from '@svar-ui/react-grid';
```

--------------------------------

### Configure multiselect editor

Source: https://github.com/svar-widgets/react-grid/blob/main/_autodocs/api-reference/inline-editors.md

Sets up a multiselect editor with the clear option enabled.

```jsx
{
  id: 'destinations',
  editor: { type: 'multiselect', config: { clear: true } },
  options: countries,
}
```

--------------------------------

### Import ContextMenu

Source: https://github.com/svar-widgets/react-grid/blob/main/_autodocs/api-reference/context-menu.md

Import the ContextMenu component from the @svar-ui/react-grid package.

```js
import { ContextMenu } from '@svar-ui/react-grid';
```

--------------------------------

### Configure combo editor

Source: https://github.com/svar-widgets/react-grid/blob/main/_autodocs/api-reference/inline-editors.md

Sets up a combo editor with a custom template function for rendering options.

```jsx
{
  id: 'country',
  editor: {
    type: 'combo',
    config: { template: (option) => `${option.id}. ${option.label}` },
  },
  options: countries,
}
```

--------------------------------

### getStores method implementation

Source: https://github.com/svar-widgets/react-grid/blob/main/_autodocs/api-reference/api-object.md

Returns the internal data store instance.

```js
getStores: () => ({ data: dataStore })
```

--------------------------------

### Grid

Source: https://github.com/svar-widgets/react-grid/blob/main/_autodocs/types.md

The main Grid component. It accepts configuration and actions, and exposes an API via ref.

```APIDOC
## Grid

### Description
The main Grid component. It accepts configuration and actions, and exposes an API via ref.

### Type Declaration
```ts
export declare const Grid: ForwardRefExoticComponent<
  { ... } & IConfig & GridActions<TMethodsConfig> & RefAttributes<IApi>
>;
```
```

--------------------------------

### on(action, fn)

Source: https://github.com/svar-widgets/react-grid/blob/main/_autodocs/api-reference/api-object.md

Adds an event handler for a specific action. Binds to the firstInRoute.

```APIDOC
## on(action, fn)

### Description
Adds an event handler for a specific action. Binds to the firstInRoute.

### Parameters
- **action** (string) - Required - Action name.
- **fn** (function) - Required - Handler function.

### Returns
- Unsubscribe function or similar (as per implementation).
```

--------------------------------

### Import Tooltip from @svar-ui/react-grid

Source: https://github.com/svar-widgets/react-grid/blob/main/_autodocs/api-reference/tooltip.md

Standard import statement for the Tooltip component.

```js
import { Tooltip } from '@svar-ui/react-grid';
```

--------------------------------

### Configure responsive breakpoints

Source: https://github.com/svar-widgets/react-grid/blob/main/_autodocs/configuration.md

Defines responsive behavior using a map of max-width keys to column and size configurations. The Grid component automatically selects the configuration level based on the container width.

```jsx
const responsive = {
  1000: {
    columns: [{ id: 'id', footer: { text: 'All users', colspan: 6 } }, /* ... */],
    sizes: { rowHeight: 40, columnWidth: 160, headerHeight: 40, footerHeight: 40 },
  },
  600: {
    columns: [ /* ... */ ],
    sizes: { rowHeight: 32, columnWidth: 140, headerHeight: 32, footerHeight: 32 },
  },
};

<Grid data={data} columns={columns} responsive={responsive} />
```

--------------------------------

### Using getReactiveState

Source: https://github.com/svar-widgets/react-grid/blob/main/_autodocs/api-reference/api-object.md

Accessing reactive state stores to track changes. Use optional chaining as the getter may return undefined before initialization.

```js
const historyStore = api.getReactiveState()?.history;
const unsub = historyStore.subscribe((v) => setHistory(v));
```

--------------------------------

### getState()

Source: https://github.com/svar-widgets/react-grid/blob/main/_autodocs/api-reference/api-object.md

Returns the current snapshot of the grid store state. All values are readable; mutations happen only through exec.

```APIDOC
## getState()

### Description
Returns the current snapshot of the grid store state. All values are readable; mutations happen only through exec.

### Returns
- **Object** - Current state snapshot with keys: data, flatData, _columns, _sizes, split, selectedRows, select, editor, focusCell, scrollLeft, scrollTop, dynamic, tree, sortMarks, filterValues, undo, reorder, history, search, _print, _rowHeightFromData.

### State Keys
- **data** - Original dataset
- **flatData** - Flattened dataset (tree rows expanded into visible order)
- **_columns** - Internal column objects with computed fields (left, right, fixed, _colindex, header, footer, ...)
- **_sizes** - Size config (rowHeight etc.)
- **split** - { left, right } frozen-column configuration
- **selectedRows** - Array of selected row ids
- **select** - Selection-enabled flag
- **editor** - Active inline editor state ({ id, column, value, ... })
- **focusCell** - Focused cell { row, column }
- **scrollLeft**, **scrollTop** - Current scroll offsets of the table body
- **dynamic** - Dynamic-data config { rowCount, columnCount }
- **tree** - Tree mode flag
- **sortMarks** - { [columnId]: { order: 'asc'|'desc', index? } }
- **filterValues** - { [columnId]: value }
- **undo** - Undo/redo enabled flag
- **reorder** - Row-reorder enabled flag
- **history** - { undo, redo } — presence of history entries (subscribable)
- **search** - Search highlight state ({ value, rows }) used by Cell.jsx
- **_print** - Print configuration; when truthy the print view renders
- **_rowHeightFromData** - Whether per-row rowHeight is used
```

--------------------------------

### Observing Reactive State

Source: https://github.com/svar-widgets/react-grid/blob/main/_autodocs/api-reference/api-object.md

Shows how to subscribe to the history store from the API to track state changes, as implemented in demos/cases/UndoRedo.jsx.

```js
const historyStore = api ? api.getReactiveState()?.history : null;
useEffect(() => {
  if (!historyStore) return;
  const unsubscribe = historyStore.subscribe((v) => setHistoryValue(v));
  return () => unsubscribe();
}, [historyStore]);
```

--------------------------------

### Default Context Menu Implementation

Source: https://github.com/svar-widgets/react-grid/blob/main/_autodocs/api-reference/context-menu.md

Wraps the Grid component with ContextMenu and HeaderMenu, passing the grid API via state to enable default menu functionality.

```jsx
import { useState } from 'react';
import { Grid, ContextMenu, HeaderMenu } from '@svar-ui/react-grid';
import { Locale } from '@svar-ui/react-core';
import { en } from '@svar-ui/grid-locales';

function App() {
  const [grid, setGrid] = useState(null);

  return (
    <Locale words={en} optional={true}>
      <ContextMenu api={grid}>
        <HeaderMenu api={grid}>
          <Grid data={data} columns={columns} init={setGrid} multiselect reorder />
        </HeaderMenu>
      </ContextMenu>
    </Locale>
  );
}
```

--------------------------------

### Advanced Grid with Ref API and Interception

Source: https://github.com/svar-widgets/react-grid/blob/main/_autodocs/api-reference/grid.md

Demonstrates using a ref to access the imperative API, intercepting events to block actions, and handling row selection events.

```jsx
import { useRef } from "react";
import { Grid } from "@svar-ui/react-grid";

export default function App() {
  const apiRef = useRef(null);

  function init(api) {
    api.intercept("select-row", (ev) => {
      if (ev.id === 1) return false; // block the action
    });
  }

  function addRow() {
    apiRef.current.exec("add-row", { row: {} });
  }

  return (
    <div>
      <button onClick={addRow}>Add row</button>
      <Grid
        data={data}
        columns={columns}
        init={init}
        ref={apiRef}
        onSelectRow={(ev) => console.log("selected", ev.id)}
      />
    </div>
  );
}
```

--------------------------------

### Basic Grid Usage

Source: https://github.com/svar-widgets/react-grid/blob/main/_autodocs/api-reference/grid.md

A standard implementation of the Grid component requiring data, column definitions, and the component's CSS.

```jsx
import { Grid } from "@svar-ui/react-grid";
import "@svar-ui/react-grid/all.css"; // required styles

const data = [
  { id: 1, email: "Leora13@yahoo.com", firstName: "Ernest", lastName: "Schuppe" },
  { id: 2, email: "Mose_Gerhold51@yahoo.com", firstName: "Janis", lastName: "Vandervort" },
];

const columns = [
  { id: "id", width: 50 },
  { id: "firstName", header: "First Name", footer: "First Name", width: 150 },
  { id: "lastName", header: "Last Name", footer: "Last Name", width: 150 },
];

export default function App() {
  return <Grid data={data} columns={columns} />;
}
```

--------------------------------

### Import HeaderMenu

Source: https://github.com/svar-widgets/react-grid/blob/main/_autodocs/api-reference/header-menu.md

Import the HeaderMenu component from the @svar-ui/react-grid package.

```js
import { HeaderMenu } from '@svar-ui/react-grid';
```

--------------------------------

### Customizing ContextMenu with defaultMenuOptions

Source: https://github.com/svar-widgets/react-grid/blob/main/_autodocs/api-reference/store-reexports.md

Create a custom context menu by filtering the default options and adding custom items.

```jsx
import { Grid, ContextMenu, defaultMenuOptions } from '@svar-ui/react-grid';

const options = [
  ...defaultMenuOptions.filter(
    (op) => !['copy-row', 'cut-row', 'paste-row'].includes(op.id),
  ),
  { comp: 'separator' },
  { id: 'info', text: 'Row info', icon: 'wxi-alert' },
];
```

--------------------------------

### ContextMenu

Source: https://github.com/svar-widgets/react-grid/blob/main/_autodocs/types.md

A context menu component that can be used with the Grid.

```APIDOC
## ContextMenu

### Description
A context menu component that can be used with the Grid.

### Type Declaration
```ts
export declare const ContextMenu: FC<ComponentProps<typeof BaseContextMenu> & { api?: IApi }>;
```
```

--------------------------------

### Material theme component implementation

Source: https://github.com/svar-widgets/react-grid/blob/main/_autodocs/api-reference/themes.md

Shows the internal structure of the Material theme component wrapping CoreMaterial and importing Material.css.

```jsx
import { Material as CoreMaterial } from '@svar-ui/react-core';
import './Material.css';

function Material({ fonts = true, children }) {
  if (children) {
    return <CoreMaterial fonts={fonts}>{children}</CoreMaterial>;
  } else {
    return <CoreMaterial fonts={fonts} />;
  }
}
```

--------------------------------

### Grid Component

Source: https://github.com/svar-widgets/react-grid/blob/main/_autodocs/api-reference/grid.md

The main DataGrid component. Imported from the package entry. It is a forwardRef component that accepts configuration props and an imperative API via ref or init callback.

```APIDOC
## Grid Component

### Description
The main DataGrid component. Imported from the package entry. It is a forwardRef component: the ref (or the init(api) callback) receives the imperative grid API.

### Import
```js
import { Grid } from '@svar-ui/react-grid';
```

### Props
- **data** (Array) - Optional - The data to display in the grid. Default: []
- **columns** (Array) - Optional - The column configuration. Default: []
- **rowStyle** (Function) - Optional - A function that returns a string style for each row.
- **columnStyle** (Function) - Optional - A function that returns a string style for each column.
- **cellStyle** (Function) - Optional - A function that returns a string style for each cell.
- **selectedRows** (Array) - Optional - The currently selected rows.
- **select** (Boolean) - Optional - Whether selection is enabled. Default: true
- **multiselect** (Boolean) - Optional - Whether multiple rows can be selected. Default: false
- **header** (Boolean) - Optional - Whether to show the header. Default: true
- **footer** (Boolean) - Optional - Whether to show the footer. Default: false
- **dynamic** (Object) - Optional - Dynamic configuration.
- **overlay** (String or Function) - Optional - Overlay content.
- **reorder** (Boolean) - Optional - Whether columns can be reordered. Default: false
- **draggableRows** (Boolean or Function) - Optional - Whether rows can be dragged. Default: false
- **onReorder** (Function) - Optional - Callback when rows are reordered.
- **autoRowHeight** (Boolean) - Optional - Whether to automatically adjust row height. Default: false
- **sizes** (Object) - Optional - Size configuration.
- **split** (Object) - Optional - Split configuration.
- **tree** (Boolean) - Optional - Whether to display tree data. Default: false
- **autoConfig** (Boolean or Object) - Optional - Whether to automatically configure columns. Default: false
- **init** (Function) - Optional - Callback that receives the imperative grid API.
- **responsive** (Object) - Optional - Responsive configuration.
- **sortMarks** (Object) - Optional - Sort marks.
- **undo** (Boolean) - Optional - Whether undo is enabled. Default: false
- **hotkeys** (Object or Boolean) - Optional - Hotkey configuration.
- **filterValues** (Object) - Optional - Filter values.
- **...restProps** - Additional props passed to the underlying component.

### Type Declaration
```ts
export declare const Grid: ForwardRefExoticComponent<
  {
    rowStyle?: (row: any) => string;
    columnStyle?: (column: IColumn) => string;
    cellStyle?: (row: any, column: IColumn) => string;
    multiselect?: boolean;
    autoConfig?: boolean | IColumnConfig;
    header?: boolean;
    footer?: boolean;
    reorder?: boolean;
    draggableRows?: boolean | ((row: IRow) => boolean);
    autoRowHeight?: boolean;
    responsive?: {
      [key: string]: {
        sizes?: ISizeConfig;
        columns?: IColumnConfig[];
      };
    };
    init?: (api: IApi) => void;
    overlay?: string | FC;
    columns: IColumnConfig[];
    hotkeys?:
      | false
      | { [key: string]: ((e?: KeyboardEvent) => void) | boolean };
  } & IConfig &
    GridActions<TMethodsConfig> &
    RefAttributes<IApi>
>;
```

### Notes
- The component is a forwardRef component; the ref receives the imperative grid API.
- Types such as IConfig, IApi, IColumn, IRow, ISizeConfig, TMethodsConfig, and GridActions are defined in @svar-ui/grid-store or inline.
```

--------------------------------

### api.exec(action, payload)

Source: https://github.com/svar-widgets/react-grid/blob/main/_autodocs/api-reference/api-object.md

Dispatches a grid action with the given payload. The action names and payloads are listed in the actions catalog. This is the primary method for programmatically controlling the grid.

```APIDOC
## api.exec(action, payload)

### Description
Dispatches a grid action with the given payload. The action names and payloads are listed in the actions catalog. This is the primary method for programmatically controlling the grid.

### Method
api.exec

### Parameters
- **action** (string) - Required - The action name to dispatch.
- **payload** (object) - Required - The payload object for the action. The structure depends on the action.

### Actions

#### request-data
- **Payload**: `{ row: { start, end } }`
- **Fired / used by**: Fired by `Layout.jsx` when `dynamic` is set and the visible window changes; the consumer feeds the returned range into `data`.

#### scroll-to
- **Payload**: `{ top, left }`
- **Fired / used by**: Fired on body scroll; also public — scroll programmatically.

#### open-editor
- **Payload**: `{ id, column }`
- **Fired / used by**: Double-click on a cell (`Layout.jsx` bodyClickHandlers). Interceptable to plug an external editor.

#### close-editor
- **Payload**: `{ ignore }`
- **Fired / used by**: Closes the inline editor.

#### editor
- **Payload**: `{ value }`
- **Fired / used by**: Applies a value into the active editor (`Editor.jsx` `updateValue`).

#### focus-cell
- **Payload**: `{ row, column, eventSource: 'click'|'focus'|'destroy'|... }`
- **Fired / used by**: Cell focus management (mouse, keyboard, and cleanup).

#### select-row
- **Payload**: `{ id, toggle, range }`
- **Fired / used by**: Row selection; `toggle`/`range` come from `multiselect` clicks. Evaluated only when `select` is not `false`.

#### open-row / close-row
- **Payload**: `{ id, nested }`
- **Fired / used by**: Tree mode; `nested` expands/collapses all descendants.

#### move-item
- **Payload**: `{ id, target, mode: 'before'|'after', inProgress }`
- **Fired / used by**: Drag-and-drop row reordering (`reorder` prop).

#### sort-rows
- **Payload**: `{ key, add, order: 'asc'|'desc'|undefined }`
- **Fired / used by**: Header click; `add` (`ctrl/meta`) toggles multi-column sort (`HeaderCell.jsx`).

#### filter-rows
- **Payload**: `{ value, key, filter }`
- **Fired / used by**: Header filters; `filter` is an optional predicate override. The `handler` param was renamed to `filter` in v2.1.

#### hide-column
- **Payload**: `{ id, mode }`
- **Fired / used by**: HeaderMenu toggle.

#### collapse-column
- **Payload**: `{ id, row }`
- **Fired / used by**: Collapsible column toggle (`HeaderCell.jsx`).

#### resize-column
- **Payload**: `{ id, width, inProgress }` or `{ id, auto: 'data'|'header'|true, maxRows }`
- **Fired / used by**: Grip drags (`HeaderCell.jsx`) or programmatic auto-sizing (*demos*).

#### hotkey
- **Payload**: `{ key, ... }`
- **Fired / used by**: Keyboard shortcuts routed by `Layout.jsx` `hotkeys` binding.

#### add-row
- **Payload**: `{ row, before?, after? }`
- **Fired / used by**: Toolbar / external buttons.

#### update-row
- **Payload**: `{ id, row }`
- **Fired / used by**: External editor save (*demo* `ExternalEditor.jsx`).

#### delete-row
- **Payload**: `{ id }`
- **Fired / used by**: Toolbar / context menu / external buttons.

#### undo / redo
- **Payload**: `{}`
- **Fired / used by**: History navigation.

#### export-data
- **Payload**: `{ format: 'csv', fileName, csv: { cols } }`
- **Fired / used by**: CSV export (*demo* `ExportCSV.jsx`); `cols` is the CSV column separator.

#### print
- **Payload**: `{ paper, mode }` (config consumed in `Print.jsx` as `config.paper`, `config.mode`)
- **Fired / used by**: Sets `_print`; when truthy the print view renders. Payload shape per grid-store.

### Additional Action IDs
- `copy-row`
- `cut-row`
- `paste-row`
- `move-item:up`
- `move-item:down`

### Notes
- Payload keys marked *observed via demos* are used in `demos/cases/*` and may include grid-store extensions.
- Implementation lives in `@svar-ui/grid-store`.
```

--------------------------------

### Dynamic data mode with onRequestData handler

Source: https://github.com/svar-widgets/react-grid/blob/main/_autodocs/configuration.md

Shows how to enable virtual loading by passing a `dynamic` object with `rowCount` and `columnCount` to the Grid, and how to provide data slices via the `onRequestData` event prop. The `dataProvider` function extracts the requested row range from `ev.row` and updates the `data` state. The same behavior can be achieved with `api.on('request-data', handler)`.

```jsx
function dataProvider(ev) {
  const { row } = ev;
  if (row) setData(rawDataRef.current.slice(row.start, row.end));
}

<Grid
  data={data}
  columns={columns}
  init={init}
  dynamic={{ rowCount: 1000, columnCount: 100 }}
  onRequestData={dataProvider}
/>
```

--------------------------------

### Configure text editor columns

Source: https://github.com/svar-widgets/react-grid/blob/main/_autodocs/api-reference/inline-editors.md

Defines columns using the 'text' editor, including a standard text input and a numeric input configuration.

```jsx
const columns = [
  { id: 'firstName', header: 'Name', editor: 'text', width: 180 },
  { id: 'stars', header: 'Stars', editor: { type: 'text', config: { type: 'number' } } },
];
```

--------------------------------

### GridActions<TMethodsConfig>

Source: https://github.com/svar-widgets/react-grid/blob/main/_autodocs/types.md

Maps every action name in TMethodsConfig to an on... event prop, plus an on${string} catch-all. Used in Grid props.

```APIDOC
## GridActions<TMethodsConfig>

### Description
Maps every action name in TMethodsConfig to an on... event prop, plus an on${string} catch-all. Used in Grid props.

### Type Definition
```ts
type RemoveHyphen<S extends string> = S extends `${infer Head}-${infer Tail}`
  ? `${Head}${RemoveHyphen<Tail>}`
  : S;

type EventName<K extends string> = `on${RemoveHyphen<K>}`;

export type GridActions<TMethodsConfig extends Record<string, any>> = {
  [K in keyof TMethodsConfig as EventName<K & string>]?: (
    ev: TMethodsConfig[K],
  ) => void;
} & {
  [key: `on${string}`]: (ev?: any) => void;
};
```

### Parameters
- **TMethodsConfig** (Record<string, any>) - Required - The configuration object whose keys are action names.

### Return Type
An object with optional event props for each action, plus a catch-all for any other on... prop.

### Notes
- For each action name K (e.g. 'select-row'), a prop on<CamelCased K> (e.g. onSelectRow) accepts (ev: TMethodsConfig[K]) => void.
- The catch-all on${string} allows any other handler.
- Applied to Grid's props: Grid extends ... & GridActions<TMethodsConfig>.
```

--------------------------------

### getReactiveState()

Source: https://github.com/svar-widgets/react-grid/blob/main/_autodocs/api-reference/api-object.md

Returns reactive (Svelte-store-based) equivalents of the state. Each property is a store with a subscribe(callback) method.

```APIDOC
## getReactiveState()

### Description
Returns the reactive (Svelte-store-based) equivalents of the state. Each property is a store with a subscribe(callback) method; the callback receives the new value. Used to track history and selectedRows from outside the grid.

### Returns
- **Object** - Reactive state object with store properties (e.g., history, selectedRows, scroll, scrollLeft, scrollTop).

### Notes
- If a property is not yet initialized the getter may return undefined; guard with ?. and subscribe only after grid initialization.

### Example
```js
const historyStore = api.getReactiveState()?.history;
const unsub = historyStore.subscribe((v) => setHistory(v));
```
```

--------------------------------

### HeaderMenu

Source: https://github.com/svar-widgets/react-grid/blob/main/_autodocs/types.md

A header menu component that can be used with the Grid.

```APIDOC
## HeaderMenu

### Description
A header menu component that can be used with the Grid.

### Type Declaration
```ts
export declare const HeaderMenu: FC<{ columns?; api?; children? }>;
```
```

--------------------------------

### Importing react-grid types

Source: https://github.com/svar-widgets/react-grid/blob/main/_autodocs/types.md

Import the core types from the @svar-ui/react-grid package.

```ts
import type {
  IColumnConfig, ICellProps, GridActions, IInnerApi,
  IColumn, IRow, IApi, ISizeConfig, TMethodsConfig, IConfig, TEditorType, IHeaderCell,
} from '@svar-ui/react-grid';
```

--------------------------------

### IColumnEditorConfig

Source: https://github.com/svar-widgets/react-grid/blob/main/_autodocs/types.md

Extends the grid-store IColumnEditor with a config.cell custom renderer for editor dropdown options.

```APIDOC
## IColumnEditorConfig

### Description
Extends the grid-store IColumnEditor with a config.cell custom renderer for editor dropdown options.

### Type Definition
```ts
export interface IColumnEditorConfig extends IColumnEditor {
  config?: IColumnEditor['config'] & {
    cell?: FC<{
      data: any;
      onaction: (ev: { action?: any; data?: { [key: string]: any } }) => void;
    }>;
  };
}
```

### Fields
- **config** (IColumnEditor['config'] & { cell?: FC<{ data: any; onaction: (ev: { action?, data? }) => void }> }) - Optional - Editor configuration with optional custom cell renderer.
```

--------------------------------

### Tooltip

Source: https://github.com/svar-widgets/react-grid/blob/main/_autodocs/types.md

A tooltip component that can be used with the Grid.

```APIDOC
## Tooltip

### Description
A tooltip component that can be used with the Grid.

### Type Declaration
```ts
export declare const Tooltip: FC<Omit<ComponentProps<typeof BaseTooltip>, 'content'> & { content?; api?: IApi }>;
```
```

--------------------------------

### Configure richselect editor

Source: https://github.com/svar-widgets/react-grid/blob/main/_autodocs/api-reference/inline-editors.md

Defines a column using the 'richselect' editor with a provided list of options.

```jsx
{ id: 'user', header: 'User', editor: 'richselect', options: users }
```

--------------------------------

### Material / Willow / WillowDark

Source: https://github.com/svar-widgets/react-grid/blob/main/_autodocs/types.md

Theme components for the Grid.

```APIDOC
## Material / Willow / WillowDark

### Description
Theme components for the Grid.

### Type Declaration
```ts
export declare const Material / Willow / WillowDark: FC<{ fonts?: boolean; children?: ReactNode }>;
```
```

--------------------------------

### Controlled Resizing and onUpdateCell

Source: https://github.com/svar-widgets/react-grid/blob/main/_autodocs/api-reference/grid.md

Configures column auto-sizing via the init API and triggers logic upon cell updates.

```jsx
<Grid
  data={data}
  columns={columns}
  init={(api) => api.exec("resize-column", { id: "email", auto: "data" })}
  onUpdateCell={() => console.log("cell updated; re-run auto-sizing")}
/>
```

--------------------------------

### IColumnEditorConfig interface

Source: https://github.com/svar-widgets/react-grid/blob/main/_autodocs/types.md

Extends the grid-store IColumnEditor to include a custom cell renderer for editor dropdown options.

```ts
export interface IColumnEditorConfig extends IColumnEditor {
  config?: IColumnEditor['config'] & {
    cell?: FC<{
      data: any;
      onaction: (ev: { action?: any; data?: { [key: string]: any } }) => void;
    }>;
  };
}
```

--------------------------------

### Theme provider TypeScript declarations

Source: https://github.com/svar-widgets/react-grid/blob/main/_autodocs/api-reference/themes.md

TypeScript declarations for Material, Willow, and WillowDark theme components from types/index.d.ts.

```ts
export declare const Material: FC<{
  fonts?: boolean;
  children?: ReactNode;
}>;

export declare const Willow: FC<{
  fonts?: boolean;
  children?: ReactNode;
}>;

export declare const WillowDark: FC<{
  fonts?: boolean;
  children?: ReactNode;
}>;
```

--------------------------------

### Component Declarations

Source: https://github.com/svar-widgets/react-grid/blob/main/_autodocs/types.md

TypeScript declarations for the main Grid components, menus, toolbars, tooltips, themes, and the inline editor registration function.

```ts
export declare const Grid: ForwardRefExoticComponent<
  { ... } & IConfig & GridActions<TMethodsConfig> & RefAttributes<IApi>
>;
export declare const HeaderMenu: FC<{ columns?; api?; children? }>;
export declare const ContextMenu: FC<ComponentProps<typeof BaseContextMenu> & { api?: IApi }>;
export declare const Toolbar: FC<ComponentProps<typeof BaseToolbar> & { api?: IApi }>;
export declare const Tooltip: FC<Omit<ComponentProps<typeof BaseTooltip>, 'content'> & { content?; api?: IApi }>;
export declare const Material / Willow / WillowDark: FC<{ fonts?: boolean; children?: ReactNode }>;
export declare function registerInlineEditor(type: string, component: FC<{...}>): void;
```

--------------------------------

### Wrap Grid with Willow theme

Source: https://github.com/svar-widgets/react-grid/blob/main/_autodocs/api-reference/themes.md

Applies the Willow theme to a Grid component and imports the grid stylesheet.

```jsx
import { Grid, Willow } from '@svar-ui/react-grid';
import '@svar-ui/react-grid/all.css';

function App() {
  return (
    <Willow>
      <Grid data={data} columns={columns} />
    </Willow>
  );
}
```

--------------------------------

### Toolbar

Source: https://github.com/svar-widgets/react-grid/blob/main/_autodocs/types.md

A toolbar component that can be used with the Grid.

```APIDOC
## Toolbar

### Description
A toolbar component that can be used with the Grid.

### Type Declaration
```ts
export declare const Toolbar: FC<ComponentProps<typeof BaseToolbar> & { api?: IApi }>;
```
```

--------------------------------

### exec(action, data)

Source: https://github.com/svar-widgets/react-grid/blob/main/_autodocs/api-reference/api-object.md

Dispatches an action into the event chain. Returns a promise when the chain is asynchronous. Triggers on<Action> props and handlers added via api.on.

```APIDOC
## exec(action, data)

### Description
Dispatches an action into the event chain (head of the EventBusRouter). Returns a promise when the chain is asynchronous. Every on<Action> prop fires as a side effect; handlers added with api.on(actionName, fn) fire too. Actions can be intercepted.

### Parameters
- **action** (string) - Required - Action name (see Actions catalog).
- **data** (any) - Required - Payload for the action.

### Returns
- Promise when the chain is asynchronous.

### Example
```js
await api.exec('add-row', { ... });
```
```

--------------------------------

### Configure autoConfig for Grid

Source: https://github.com/svar-widgets/react-grid/blob/main/_autodocs/configuration.md

Pass an object to autoConfig to merge properties into each automatically generated column, such as adding a text editor.

```jsx
<Grid data={allData} autoConfig={{ editor: 'text' }} />
```

--------------------------------

### Configure datepicker editor

Source: https://github.com/svar-widgets/react-grid/blob/main/_autodocs/api-reference/inline-editors.md

Configures a datepicker editor with a template function to format the displayed date value.

```jsx
{
  id: 'date',
  editor: 'datepicker',
  template: (v) => (v ? v.toLocaleDateString() : ''),
}
```
Tokens:
Raw