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

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

Header font

Until v1.6.0 the row numbers and column letters were drawn at a fixed 12px sans-serif, so changing the body font left the headers behind. They now take a font of their own.

// For the whole workbook
const grid = createReogrid({
  workspace: '#grid',
  headerFont: { fontFamily: 'Meiryo', fontSize: 14 },
});

// At runtime — inherited by sheets added later
grid.setHeaderFont({ fontSize: 16 });

// Per sheet
grid.worksheet.setHeaderFont({ fontFamily: '"Segoe UI", Roboto, sans-serif' });

// Read it back
grid.getHeaderFont();      // { fontFamily, fontSize }

The patch is partial: { fontSize: 14 } changes the size and keeps the family. Pass null to restore the default. The family accepts a single name ('Meiryo') or a full CSS stack ('"Segoe UI", Roboto, sans-serif').

The header band widens to fit, so a larger font does not clip the numbers (a font smaller than the default keeps the default layout rather than shrinking).

This is a screen setting, independent of CellStyle. It is not stored in xlsx or JSON.

Auto-fit scan cap

Auto-fitting a column measures the text in its cells, which is the expensive part on a very large sheet. autoFitMaxScanRows (default 1000) bounds how many rows are measured.

const grid = createReogrid({ workspace: '#grid', autoFitMaxScanRows: 5000 });

// Or at runtime — values below 1 clamp to 1; a non-finite value restores the default
grid.worksheet.setAutoFitMaxScanRows(5000);
grid.worksheet.getAutoFitMaxScanRows();

The option was added to WorksheetOptions in v1.5.0 but was not reachable from createReogrid() until v1.6.0. It is now inherited by every sheet in the workbook — initial, added at runtime, or imported.

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.