Interactive Checklist

Use the checkbox cell type for a tickable todo list, and derive a live progress counter from the checked rows.

Pro only. Cell types (checkbox, dropdown, etc.) are disabled in Lite.

Full example

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

How the checkbox stores state

A checkbox cell stores the literal strings "true" / "false" (not booleans). That’s why the formula uses COUNTIF(..., "true") with quotes.

To read the current state programmatically:

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

To react to changes:

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

Notes

• The checkbox cell renders natively on canvas — clicks are handled by the grid’s pointer controller, no DOM overlay.
• Undo/redo works automatically: unchecking a box goes through the normal action manager.
• Conditional formatting on the text column provides the “struck through when done” effect without per-cell style management.

See also

• Cell Types
• Conditional Formatting
• Colored Status Dropdown