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

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.rows);    // 500
console.log(ws.columns); // 50

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

Destroying the instance

grid.destroy();

destroy() performs the following:

• Removes DOM elements
• Unregisters event listeners
• Releases Canvas resources
• Stops timers