Cell Types

ReoGrid Web supports custom UI elements rendered directly inside cells — checkboxes, progress bars, sparklines, and more.

Note: Cell Types are available in the Pro edition.

Built-in cell types

Basic usage

const ws = grid.worksheet;

// Checkbox
ws.setCellType(0, 0, { type: 'checkbox' });
ws.setCellInput(0, 0, 'TRUE');

// Progress bar
ws.setCellType(1, 0, { type: 'progress', max: 100, color: '#3b82f6' });
ws.setCellInput(1, 0, '75');

// Rating
ws.setCellType(2, 0, { type: 'rating', maxStars: 5 });
ws.setCellInput(2, 0, '4');

CellHandle API

ws.cell('A1').setType({ type: 'checkbox' }).setValue('TRUE');
ws.cell('A2').setType({ type: 'progress', max: 100 }).setValue('75');

// Clear cell type
ws.cell('A1').clearType();

Checkbox

Checked when the cell value is TRUE, unchecked when FALSE. Toggles automatically on click.

ws.setCellType(row, col, { type: 'checkbox' });
ws.setCellInput(row, col, 'TRUE');

Dropdown

Displays a dropdown icon and allows you to receive click events.

ws.setCellType(row, col, {
  type: 'dropdown',
  options: ['Option A', 'Option B', 'Option C'],
  onclick: (context) => {
    console.log('Dropdown clicked at', context.row, context.column);
  },
});

Button

The entire cell is rendered as a button.

ws.setCellType(row, col, {
  type: 'button',
  label: 'Delete',
  onClick: () => {
    console.log('Button clicked');
  },
});

Progress bar

Visualizes numeric values as a bar.

// Basic (0 to 100)
ws.setCellType(row, col, { type: 'progress' });

// Custom max value and color
ws.setCellType(row, col, {
  type: 'progress',
  max: 120,
  color: '#10b981',
});

// Bidirectional (also displays negative values)
ws.setCellType(row, col, {
  type: 'progress',
  bidirectional: true,
});

Rating

Displays a star-based rating. The value changes on click.

ws.setCellType(row, col, { type: 'rating', maxStars: 5 });
ws.setCellInput(row, col, '3'); // three filled, two empty

Sparkline

Interprets the cell value as a comma-separated list of numbers and draws a mini chart.

// Line
ws.setCellType(row, col, {
  type: 'sparkline-line',
  color: '#3b82f6',
});
ws.setCellInput(row, col, '10,20,15,30,25,35');

// Area chart
ws.setCellType(row, col, {
  type: 'sparkline-area',
  color: '#3b82f6',
  fillColor: 'rgba(59,130,246,0.2)',
});
ws.setCellInput(row, col, '10,20,15,30,25,35');

Hyperlink

Set the cell value in the format display text|URL.

ws.setCellType(row, col, { type: 'hyperlink' });
ws.setCellInput(row, col, 'Google|https://google.com');

// URL only (display text = URL)
ws.setCellType(row, col, { type: 'hyperlink', url: 'https://google.com' });
ws.setCellInput(row, col, 'Google');

Creating custom cell types

You can register your own cell types by implementing the CellTypeHandler interface.

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

registerCellTypeHandler('traffic-light', {
  replacesText: true,

  render(ctx, config) {
    const { x, y, width, height, value, canvasCtx } = ctx;
    const colors = { red: '#ef4444', yellow: '#eab308', green: '#22c55e' };
    const color = colors[value as string] || '#d1d5db';

    const radius = Math.min(width, height) * 0.3;
    canvasCtx.beginPath();
    canvasCtx.arc(x + width / 2, y + height / 2, radius, 0, Math.PI * 2);
    canvasCtx.fillStyle = color;
    canvasCtx.fill();
  },

  onClick(ctx, config) {
    const states = ['green', 'yellow', 'red'];
    const current = states.indexOf(ctx.value as string);
    const next = states[(current + 1) % states.length];
    return { newValue: next };
  },
});

// Usage
ws.setCellType(row, col, { type: 'traffic-light' });
ws.setCellInput(row, col, 'green');

CellTypeHandler interface

interface CellTypeHandler {
  // Cell rendering (required)
  render(ctx: CellTypeRenderContext, config: Record<string, unknown>): void;

  // Click handling (optional)
  onClick?(ctx: CellTypeClickContext, config: Record<string, unknown>): CellTypeClickResult;

  // Rendering for HTML export (optional)
  renderHTML?(value: string | null, config: Record<string, unknown>, style: CellStyle): string;

  // When true, suppresses normal text rendering
  replacesText?: boolean;
}

Managing cell types

// Get cell type
const config = ws.getCellType(row, col);

// Clear cell type
ws.clearCellType(row, col);