React 17 + TypeScript + 클래스 컴포넌트 환경에서 ag-Grid를 사용하여 chkResult 컬럼에 따라 신호등 모양의 색상 원을 표시하는 예제

React 17 + TypeScript + 클래스 컴포넌트 환경에서 ag-Grid를 사용하여 chkResult 컬럼에 따라 신호등 모양의 색상 원을 표시하는 예제입니다.

요구사항:

• chkResult 값이:
  • N → 회색 원
  • W → 노란색 원
  • E → 빨간색 원
• 텍스트 앞에 원형(신호등 아이콘) 표시

 

import React, { Component } from 'react';
import { AgGridReact } from 'ag-grid-react';
import { ColDef } from 'ag-grid-community';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

interface RowData {
  id: number;
  name: string;
  chkResult: 'N' | 'W' | 'E';
}

interface State {
  columnDefs: ColDef[];
  rowData: RowData[];
}

export class SignalGrid extends Component<{}, State> {
  constructor(props: {}) {
    super(props);

    this.state = {
      columnDefs: [
        { field: 'id', headerName: 'ID', width: 80 },
        { field: 'name', headerName: 'Name', width: 150 },
        {
          field: 'chkResult',
          headerName: 'Result',
          cellRenderer: this.signalRenderer,
          width: 150,
        },
      ],
      rowData: [
        { id: 1, name: 'Item A', chkResult: 'N' },
        { id: 2, name: 'Item B', chkResult: 'W' },
        { id: 3, name: 'Item C', chkResult: 'E' },
      ],
    };
  }

  // 셀 렌더러 함수
  signalRenderer(params: any) {
    const value = params.value;
    let color = 'gray';

    if (value === 'W') color = 'gold';
    else if (value === 'E') color = 'red';

    return (
      `<span style="display: flex; align-items: center;">
        <span style="
          display: inline-block;
          width: 12px;
          height: 12px;
          border-radius: 50%;
          background-color: ${color};
          margin-right: 6px;
        "></span>
        ${value}
      </span>`
    );
  }

  render() {
    return (
      <div
        className="ag-theme-alpine"
        style={{ height: 300, width: 400 }}
      >
        <AgGridReact
          columnDefs={this.state.columnDefs}
          rowData={this.state.rowData}
        />
      </div>
    );
  }
}