Grid Options

This page explains the options passed to createReogrid() and the runtime APIs for controlling grid behavior.

ReogridOptions

import { createReogrid } from '@reogrid/lite';

const grid = createReogrid({
  workspace: '#grid',
  undoCapacity: 50,
  animation: true,
  animationDuration: 300,
  animationEasing: 'easeOutCubic',
  injectStyles: true,
});

Option list

Option	Type	Default	Description
`workspace`	`string \| HTMLElement`	—	Selector or element to mount the grid on
`workspaceId`	`string`	—	Fallback DOM ID when `workspace` is not specified
`canvasId`	`string`	—	ID for the Canvas element
`injectStyles`	`boolean`	`true`	Whether to auto-inject CSS
`undoCapacity`	`number`	`30`	Maximum number of Undo / Redo steps
`autoFill`	`boolean`	`true`	Enables the drag-fill handle
`showFindBar`	`boolean`	`true`	v1.5.0 — enables the built-in find bar on Ctrl/Cmd+F / Ctrl/Cmd+H
`formula`	`FormulaEngineOptions`	—	Formula engine settings
`animation`	`boolean`	`false`	Whether to enable cell value animation
`animationDuration`	`number`	`300`	Animation duration (milliseconds)
`animationEasing`	`EasingName`	`'easeOutCubic'`	Animation easing function name

Note: The animation* options are available in the Pro edition. The formula option is not accepted by @reogrid/lite (core/Pro only).

Specifying the mount target

The mount target can be specified in three ways.

// 1. Selector string
const grid = createReogrid('#grid');

// 2. HTMLElement
const el = document.getElementById('grid')!;
const grid = createReogrid(el);

// 3. Options object
const grid = createReogrid({ workspace: '#grid' });

Options in React / Vue

In framework wrappers, options are passed via the options prop. The workspace does not need to be specified as the component’s DOM element is used automatically.

React

<Reogrid
  options={{
    undoCapacity: 50,
    animation: true,
    animationDuration: 500,
  }}
  style={{ flex: 1 }}
/>

Vue

<Reogrid
  :options="{
    undoCapacity: 50,
    animation: true,
    animationDuration: 500,
  }"
  style="flex: 1"
/>

Grid line visibility

Controls whether the grid lines between cells are rendered.

const ws = grid.worksheet;

// Hide grid lines
ws.setShowGridLines(false);

// Show grid lines
ws.setShowGridLines(true);

// Get current state
const visible = ws.getShowGridLines(); // boolean

// Property access
ws.showGridLines = false;

Grid size

// Change the number of rows and columns
ws.setGridSize(500, 50); // 500 rows × 50 columns

// Current size
console.log(ws.rowCount);    // 500
console.log(ws.columnCount); // 50

In the Lite edition, the grid size is clamped to 100 rows × 26 columns — after the call above, ws.rowCount logs 100.

Rendering control

// Suspend rendering (performance optimization for bulk updates)
ws.suspendRender();

// ... bulk cell operations ...

// Resume rendering (automatically triggers a redraw)
ws.resumeRender();

// Manually request a redraw
ws.render();

// Resize
ws.resize(800, 600); // Specified size
ws.resize();          // Auto-resize to fit container

Keyboard focus

Grid shortcuts (undo / redo, copy / cut / paste, arrow navigation) only reach the grid while it holds keyboard focus. A host toolbar or menu takes that focus away — clicking a <button> focuses the button — so call grid.focus() (v1.5.0) once the action is done.

boldButton.addEventListener('click', () => {
  grid.worksheet.selection.range?.setBold(true);
  grid.focus();   // v1.5.0 — hand keyboard focus back to the grid
});

Without it the next Ctrl/Cmd+Z falls through to the browser — on macOS that triggers the browser’s own Undo instead of the grid’s.

Destroying the instance

grid.destroy();

destroy() performs the following:

Unregisters event listeners
Removes overlays and the cell editor
Releases Canvas resources

Note that DOM elements created during initialization remain in place.