하단 그리드(BottomGrid.tsx)에서 hide 사용 예제

ag-Grid에서 하단 그리드의 컬럼을 조건(testType)에 따라 보이거나 숨기는 방법으로 columnDefs의 hide 속성을 사용하는 방식은 매우 일반적이고 효과적입니다.

아래는 React 17 + TypeScript에서 hide 속성을 동적으로 제어하는 예제입니다.

✅ 하단 그리드(BottomGrid.tsx)에서 hide 사용 예제

import React, { useMemo } 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 BottomRowData {
  id: number;
  startTime?: string;
  endTime?: string;
  etc?: string;
}

interface Props {
  testType?: string;
}

const rowData: BottomRowData[] = [
  { id: 1, startTime: '10:00', endTime: '11:00', etc: '비고 1' },
  { id: 2, startTime: '12:00', endTime: '13:00', etc: '비고 2' },
];

export const BottomGrid: React.FC<Props> = ({ testType }) => {
  const columnDefs: ColDef[] = useMemo(() => {
    const isNoti = testType === 'NOTI';
    return [
      { headerName: 'ID', field: 'id', hide: false },
      { headerName: 'Start Time', field: 'startTime', hide: !isNoti },
      { headerName: 'End Time', field: 'endTime', hide: !isNoti },
      { headerName: '기타 비고', field: 'etc', hide: isNoti },
    ];
  }, [testType]);

  return (
    <div className="ag-theme-alpine" style={{ height: 200 }}>
      <AgGridReact
        rowData={rowData}
        columnDefs={columnDefs}
        domLayout="autoHeight"
      />
    </div>
  );
};

✅ 주요 포인트 정리

속성 설명

hide: true	해당 컬럼을 숨깁니다.
useMemo()	testType이 바뀔 때만 columnDefs 재계산되도록 최적화
!isNoti	"NOTI" 타입일 때만 특정 컬럼을 보이게 합니다.

---

✅ 연동 예시 (상단 선택값에 따라 변경)

TopGrid에서 선택한 testType을 BottomGrid에 prop으로 넘겨주면 위 코드처럼 작동합니다.