FreeGridv1.15.1English

행 색상과 클래스

rowClass와 rowStyle로 행 값에 따라 행 전체에 색을 줍니다: 배경, 글자색, 굵게, 기울임, 취소선. 선택 색은 유지되고 엑셀·인쇄·PDF에도 들어갑니다.

실행 예제행 색상

재고·상태에 따라 칠한 행. 값을 고치면 색이 따라갑니다.

이 데모의 코드
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;
}

두 그리드 옵션으로 행 값에 따라 데이터 행 전체에 색을 줍니다. rowStyle은 그리드가 직접 적용하는 색을 돌려주고(엑셀·인쇄·PDF에도 들어감), rowClass는 직접 만든 CSS의 클래스 이름을 돌려줍니다. 행을 그릴 때마다 다시 계산하므로 편집·실시간 업데이트·정렬 뒤에도 색이 맞습니다.

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
  },
});
이름타입설명
backgroundstring행 배경(아무 CSS 색). 선택된 행은 선택 색을 유지합니다.
colorstring글자색.
bold / italic / strikeboolean굵게, 기울임, 취소선.

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

우선순위

  1. 셀의 조건부 서식과 cellClass가 먼저입니다(그 셀에 대한 것이므로).
  2. 그다음 rowStyle이 행의 나머지를 칠합니다.
  3. 선택된 행은 선택 색이 유지되고, 마우스 오버와 포커스 셀은 평소대로 보입니다.

세부 동작

  • rowIndex는 화면상의 순서(정렬·필터 후)이고, 그룹·상세·로딩 행은 칠하지 않습니다.
  • 함수가 오류를 내면 그 행은 칠하지 않습니다(경고가 남음).
  • 엑셀에는 rowStyle의 배경·글자색·굵게가, 인쇄·PDF에는 기울임·취소선도 들어갑니다. rowClass는 화면에만 적용됩니다.
  • 스크롤할 때마다 그려지는 행마다 실행되므로 함수는 가볍게 유지하세요.

이 페이지에 대한 질문

데이터에 따라 행 전체 배경색을 바꾸려면?

rowStyle: ({ row }) => row.stock === 0 ? { background: '#fee2e2' } : null을 쓰세요. 행이 바뀔 때마다 다시 계산되고 엑셀·PDF에도 색이 들어갑니다. rowClass는 CSS 클래스를 돌려줍니다.