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

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

}
}