Colored Status Dropdown

Add a status column where users pick a value from a dropdown, and use conditional formatting so the color tracks the choice — no event handlers, no manual restyling.

Pro only. Cell types and conditional formatting are Pro features.

Full example

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;

Recoloring the entire row

To color the whole row (not just the status cell) based on status, use an expression rule instead. The $ anchors the column so every cell in the row evaluates against column 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' },
});

Reading the selected value

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

The dropdown stores the picked string as the cell value, so formulas like COUNTIF(C:C, "Approved") work out of the box.

See also

• Cell Types
• Conditional Formatting
• Interactive Checklist