色付きステータスドロップダウン

ユーザーがドロップダウンから値を選ぶステータス列を追加し、条件付き書式で選択に応じて色が連動するようにします。イベントハンドラも手動の再スタイルも不要です。

Pro 限定。 セル型と条件付き書式は Pro の機能です。

完成例

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

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

const STATUSES = ['Draft', 'In Review', 'Approved', 'Rejected'] as const;

const STATUS_STYLES: Record<string, { backgroundColor: string; color: string }> = {
  'Draft':      { backgroundColor: '#f3f4f6', color: '#374151' },
  'In Review':  { backgroundColor: '#fef3c7', color: '#92400e' },
  'Approved':   { backgroundColor: '#d1fae5', color: '#065f46' },
  'Rejected':   { backgroundColor: '#fee2e2', color: '#991b1b' },
};

const tasks = [
  { id: 'T-001', title: 'Landing page copy' },
  { id: 'T-002', title: 'Onboarding video script' },
  { id: 'T-003', title: 'Pricing page redesign' },
  { id: 'T-004', title: 'Email template overhaul' },
];

// Header
['ID', 'Title', 'Status'].forEach((h, c) => {
  worksheet.cell(0, c).setValue(h).setStyle({ bold: true, backgroundColor: '#f8fafc' });
});

// Rows
tasks.forEach((task, i) => {
  const row = i + 1;
  worksheet.cell(row, 0).setValue(task.id);
  worksheet.cell(row, 1).setValue(task.title);
  worksheet.cell(row, 2)
    .setType({ type: 'dropdown', options: [...STATUSES] })
    .setValue('Draft');
});

// Conditional formatting: one rule per status value
const statusRange = `C2:C${tasks.length + 1}`;
for (const [status, style] of Object.entries(STATUS_STYLES)) {
  worksheet.range(statusRange).addConditionalFormat({
    type: 'cellIs',
    operator: 'equal',
    value1: status,
    style,
  });
}

// Column sizes
worksheet.column(0).width = 70;
worksheet.column(1).width = 260;
worksheet.column(2).width = 130;

行全体を再着色する

ステータスセルだけでなく行全体を色付けするには、代わりに expression ルールを使います。$ が列を固定するため、行内のすべてのセルが C 列に対して評価されます。

const taskRange = `A2:C${tasks.length + 1}`;

worksheet.range(taskRange).addConditionalFormat({
  type: 'expression',
  formula: '=$C2="Approved"',
  style: { backgroundColor: '#d1fae5' },
});

worksheet.range(taskRange).addConditionalFormat({
  type: 'expression',
  formula: '=$C2="Rejected"',
  style: { backgroundColor: '#fee2e2' },
});

選択された値を読む

const status = worksheet.cell('C2').value;   // e.g. "In Review"

ドロップダウンは選んだ文字列をセル値として保持するため、COUNTIF(C:C, "Approved") のような数式もそのまま動作します。

関連

• セル型
• 条件付き書式
• インタラクティブなチェックリスト