Row colours and classes

Colour whole rows from their values with rowClass and rowStyle: backgrounds, text colour, bold, italic and strikethrough, kept under the selection colour and written to Excel, print and PDF.

Live demoRow colours

Rows coloured by stock and status; edit a value and the colour follows.

Code for this demo

import { createGrid, type ColumnDef, type Row } from '@freegridjs/core';
import { makeRows } from '../data';
import { button, separator, text, tr, type DemoContext } from '../ui';

export default function mount(ctx: DemoContext) {
  const h = (en: string, ko: string) => tr(ctx.lang, { en, ko });
  const data = makeRows(400).map((r, i) => ({ ...r, stock: i % 9 === 0 ? 0 : (i * 13) % 80, cancelled: i % 17 === 0 }));
  const grid = createGrid(ctx.host, {
    columns: [
      { field: 'name', header: h('Name', '이름'), width: 170 },
      { field: 'stock', header: h('Stock', '재고'), type: 'number', width: 100, editable: true },
      { field: 'cancelled', header: h('Cancelled', '취소'), type: 'boolean', width: 100, editable: true },
      { field: 'status', header: h('Status', '상태'), width: 110 },
      { field: 'q1', header: h('Q1', '1분기'), type: 'number', format: '#,##0', width: 120 },
    ],
    data, locale: ctx.lang, rowSelection: 'multiple',
    rowStyle: ({ row }) => (row.cancelled ? { color: '#9ca3af', strike: true }
      : row.stock === 0 ? { background: 'rgba(220, 38, 38, .12)', color: '#b91c1c', bold: true }
      : row.q1 > 90000 ? { background: 'rgba(22, 163, 74, .10)' } : null),
  });
  text(ctx, h('Red = out of stock, grey = cancelled, green = Q1 over 90,000. Edit a stock to 0 or tick Cancelled: the row follows.',
    '빨강은 품절, 회색은 취소, 초록은 1분기 9만 초과입니다. 재고를 0으로 고치거나 취소를 체크하면 행 색이 따라갑니다.'));
  separator(ctx);
  button(ctx, h('Excel (with the colours)', '엑셀(색 포함)'), () => grid.exportXlsx('row-colours.xlsx'));
  return grid;
}

Two grid options colour whole data rows from their values. rowStyle returns colours the grid applies itself (and also writes into Excel, print and PDF); rowClass returns class names for your own CSS. Both run again whenever a row is drawn, so edits, live updates and sorting keep the colours right.

rowStyle

createGrid(el, {
  columns,
  data,
  rowStyle: ({ row, rowIndex }) => {
    if (row.status === 'cancelled') return { color: '#9ca3af', strike: true };
    if (row.stock === 0) return { background: '#fee2e2', color: '#991b1b', bold: true };
    if (row.vip) return { background: 'rgba(37, 99, 235, .08)' };
    return null;                                    // the normal look
  },
});

Name	Type	Description
`background`	`string`	Row background (any CSS colour). A selected row keeps the selection colour.
`color`	`string`	Text colour.
`bold / italic / strike`	`boolean`	Bold, italic and strikethrough text.

rowClass

createGrid(el, {
  columns,
  data,
  rowClass: ({ row }) => [row.overdue && 'is-overdue', row.locked && 'is-locked'].filter(Boolean).join(' '),
});

/* your CSS: target the cells of the row */
.fg-row.is-overdue .fg-cell { color: #b91c1c; }
.fg-row.is-locked .fg-cell { opacity: .6; }

What wins

Conditional formats and cellClass on a cell come first (they are about that cell).
Then rowStyle colours the rest of the row.
The selection colour stays on selected rows; hover and the focused cell show as usual.

Details

rowIndex is the row's place on screen (after sort and filter); group, detail and loading rows are not coloured.
A function that throws is ignored for that row (a warning is logged).
Excel gets the background, text colour and bold of rowStyle; print and PDF also italic and strikethrough. rowClass stays on screen only.
Keep the functions quick: they run for every row drawn on each scroll.

Questions about this page

How do I change the background colour of a whole row based on its data?

Use rowStyle: ({ row }) => row.stock === 0 ? { background: '#fee2e2' } : null. It runs again whenever the row changes, and the colour goes into Excel and PDF too. rowClass returns a CSS class instead.