インタラクティブなチェックリスト

checkbox セル型でチェック可能なTODOリストを作り、チェック済みの行からライブの進捗カウンターを導出します。

Pro 限定。 セル型（チェックボックス、ドロップダウンなど）は Lite では無効です。

完成例

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

const { worksheet } = createReogrid('#grid');

const todos = [
  'Draft the proposal',
  'Review with design team',
  'Send to client',
  'Schedule kickoff meeting',
  'Archive previous version',
];

// Header
worksheet.cell('A1').setValue('✓').setStyle({ bold: true, horizontalAlignment: 'center' });
worksheet.cell('B1').setValue('Task').setStyle({ bold: true });
worksheet.cell('D1').setValue('Done:').setStyle({ bold: true, horizontalAlignment: 'right' });

// Rows: checkbox + task text
todos.forEach((task, i) => {
  const row = i + 1;
  worksheet.cell(row, 0).setType({ type: 'checkbox' }).setValue('false');
  worksheet.cell(row, 1).setValue(task);
});

// Live counter — COUNTIF of "true" values in the checkbox column
worksheet.setCellInput(0, 4, `=COUNTIF(A2:A${todos.length + 1}, "true")&"/${todos.length}"`);

// Column sizing
worksheet.column(0).width = 40;
worksheet.column(1).width = 260;
worksheet.column(3).width = 70;
worksheet.column(4).width = 60;

// Optional: strikethrough finished rows via conditional formatting
worksheet.range(`B2:B${todos.length + 1}`).addConditionalFormat({
  type: 'expression',
  formula: '=$A2="true"',
  style: { color: '#9ca3af', italic: true },
});

チェックボックスが状態をどう保持するか

チェックボックスセルは（真偽値ではなく）リテラル文字列の "true" / "false" を保持します。だからこそ数式ではクォート付きで COUNTIF(..., "true") を使います。

現在の状態をプログラムから読むには:

const isDone = worksheet.cell(1, 0).value === 'true';

変更に反応するには:

worksheet.on('cellValueChange', ({ row, column, newValue }) => {
  if (column === 0) {
    console.log(`Row ${row} checkbox is now`, newValue);
  }
});

補足

• チェックボックスセルはキャンバス上にネイティブ描画され、クリックはグリッドのポインターコントローラが処理します。DOMオーバーレイは使いません。
• 元に戻す/やり直しは自動で動作します。チェックを外す操作も通常のアクションマネージャを通ります。
• テキスト列への条件付き書式により、セル単位のスタイル管理なしで「完了時に取り消し線」効果が得られます。

関連

• セル型
• 条件付き書式
• 色付きステータスドロップダウン