セルタイプ

ReoGrid Web は、セル内に直接描画されるカスタム UI 要素をサポートしています — チェックボックス、プログレスバー、スパークラインなど。

セルタイプはPro版で利用可能です。

組み込みセルタイプ

基本的な使い方

const ws = grid.worksheet;

// チェックボックス（値は小文字の 'true' / 'false'）
ws.setCellType(0, 0, { type: 'checkbox' });
ws.setCellInput(0, 0, 'true');

// プログレスバー
ws.setCellType(1, 0, { type: 'progress', max: 100, color: '#3b82f6' });
ws.setCellInput(1, 0, '75');

// レーティング
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');

// セルタイプのクリア
ws.cell('A1').clearType();

チェックボックス

セル値が true のときチェック、false のとき未チェック（小文字）。クリックで自動切替。

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

ドロップダウン

ドロップダウンアイコンが表示され、クリックイベントを受け取れます。

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

ボタン

セル全体がボタンとして描画されます。

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

プログレスバー

数値をバーで可視化します。

// 基本（0〜100）
ws.setCellType(row, col, { type: 'progress' });

// カスタム最大値と色
ws.setCellType(row, col, {
  type: 'progress',
  max: 120,
  color: '#10b981',
});

// 双方向（負の値も表示）
ws.setCellType(row, col, {
  type: 'progress',
  bidirectional: true,
});

レーティング

星マークによる評価表示。クリックで値が変更されます。

ws.setCellType(row, col, { type: 'rating', maxStars: 5 });
ws.setCellInput(row, col, '3'); // ★★★☆☆

スパークライン

セル値をカンマ区切りの数値列として解釈し、ミニグラフを描画します。

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

// 面グラフ
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');

ハイパーリンク

セル値を 表示テキスト|URL の形式で設定します。

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

// config の url を開く。セル値が表示テキスト
ws.setCellType(row, col, { type: 'hyperlink', url: 'https://google.com' });
ws.setCellInput(row, col, 'Google');

カスタムセルタイプの作成

CellTypeHandler インターフェースを実装して独自のセルタイプを登録できます。

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

registerCellTypeHandler('traffic-light', {
  render({ ctx, rect, value }, config) {
    const colors: Record<string, string> = { red: '#ef4444', yellow: '#eab308', green: '#22c55e' };
    const color = colors[value ?? ''] || '#d1d5db';

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

  onClick(ctx, config) {
    const states = ['green', 'yellow', 'red'];
    const current = states.indexOf(ctx.value ?? '');
    const next = states[(current + 1) % states.length];
    // handled: true でクリックを消費し、newValue がセルに書き込まれます
    return { handled: true, newValue: next };
  },
});

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

CellTypeHandler インターフェース

interface CellTypeHandler {
  // セルの描画（必須）。ctx.ctx が CanvasRenderingContext2D、
  // ctx.rect がセルの描画範囲 { x, y, width, height }
  render(ctx: CellTypeRenderContext, config: Record<string, unknown>): void;

  // クリック時の処理（任意）。{ handled, newValue?, openDropdown? } を返す
  onClick?(ctx: CellTypeClickContext, config: Record<string, unknown>): CellTypeClickResult;

  // HTML エクスポート・印刷用の描画（任意）
  renderHTML?(value: string | null, config: Record<string, unknown>, style: CellStyle): string;

  // false の場合、render() の後に通常のテキスト描画も行われる（既定: true）
  replacesText?: boolean;
}

セルタイプの管理

// セルタイプの取得
const config = ws.getCellType(row, col);

// セルタイプのクリア
ws.clearCellType(row, col);