그리드 최대값 + 1 씩 증가하여 ag-Grid 세팅하는 방법
react17, typescript, ag-grid 환경에서 this.apiSet.api.forEachNode((node) => { 하여 그리드의 항목 중 activityNo:string; 항목(숫자가 입력 또는 빈값) 중 가장 큰 값을 구하고 그리드 목록 중 activityNo 빈값이 있으면 가장 큰 값에서 +1씩 증가하며 세팅하는 예제 만들어 주세요
// ActivityGrid.tsx
import React, { useRef, useCallback } from 'react';
import { AgGridReact } from 'ag-grid-react';
import { AgGridReact as AgGridReactType } from 'ag-grid-react/lib/agGridReact';
import { ColDef } from 'ag-grid-community';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';
interface RowDataType {
id: number;
activityNo: string;
name: string;
}
const initialRowData: RowDataType[] = [
{ id: 1, activityNo: '3', name: 'Task A' },
{ id: 2, activityNo: '', name: 'Task B' },
{ id: 3, activityNo: '10', name: 'Task C' },
{ id: 4, activityNo: '', name: 'Task D' },
{ id: 5, activityNo: '2', name: 'Task E' },
];
const columnDefs: ColDef[] = [
{ field: 'id' },
{ field: 'activityNo' },
{ field: 'name' },
];
const ActivityGrid = () => {
const gridRef = useRef<AgGridReactType
const fillActivityNumbers = useCallback(() => {
const api = gridRef.current?.api;
if (!api) return;
const nodes: RowDataType[] = [];
api.forEachNode(node => {
if (node.data) {
nodes.push(node.data);
}
});
// 1. 최대 숫자 추출
const activityNumbers = nodes
.map(row => parseInt(row.activityNo))
.filter(num => !isNaN(num));
let max = activityNumbers.length > 0 ? Math.max(...activityNumbers) : 0;
// 2. 빈 값 채우기
nodes.forEach(row => {
if (!row.activityNo || row.activityNo.trim() === '') {
max += 1;
row.activityNo = String(max);
}
});
// 3. 변경 사항 적용
api.setRowData([...nodes]);
}, []);
return (
<div>
<button onClick={fillActivityNumbers}>Fill Empty Activity Numbers</button>
<div className="ag-theme-alpine" style={{ height: 300, width: 600 }}>
<AgGridReact
ref={gridRef}
rowData={initialRowData}
columnDefs={columnDefs}
domLayout="autoHeight"
/>
</div>
</div>
);
};
export default ActivityGrid;