セルタイプ

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

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

組み込みセルタイプ

基本的な使い方

const ws = grid.worksheet;

// チェックボックス
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');

// URL のみ（表示テキスト = URL）
ws.setCellType(row, col, { type: 'hyperlink', url: 'https://google.com' });
ws.setCellInput(row, col, 'Google');

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

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

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 };
  },
});

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

CellTypeHandler インターフェース

interface CellTypeHandler {
  // セルの描画（必須）
  render(ctx: CellTypeRenderContext, config: Record<string, unknown>): void;

  // クリック時の処理（任意）
  onClick?(ctx: CellTypeClickContext, config: Record<string, unknown>): CellTypeClickResult;

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

  // true の場合、通常のテキスト描画を抑制
  replacesText?: boolean;
}

セルタイプの管理

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

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