페이지 2: 데이터 바인딩 및 컬럼 정의

2. 데이터 바인딩 및 컬럼 정의

AG Grid의 핵심은 데이터를 효율적으로 표시하고, 각 컬럼의 속성을 세밀하게 제어하는 것입니다.

2.1. 데이터 바인딩: rowData

rowData는 그리드에 표시할 데이터의 배열입니다. 각 배열 요소는 행을 나타내는 객체이며, 객체의 키는 컬럼 필드와 일치해야 합니다.

const [rowData] = useState([
  { id: 1, name: "Alice", age: 30 },
  { id: 2, name: "Bob", age: 24 },
  { id: 3, name: "Charlie", age: 35 }
]);

2.2. 컬럼 정의: columnDefs

columnDefs 배열은 각 컬럼의 헤더, 데이터 필드, 너비, 정렬 가능성, 필터링 가능성 등을 정의합니다.

const [columnDefs] = useState([
  { headerName: "ID", field: "id", width: 90 },
  { headerName: "이름", field: "name", sortable: true, filter: true },
  { headerName: "나이", field: "age", editable: true } // '나이' 컬럼 편집 가능
]);

주요 속성:

• headerName: 컬럼 헤더에 표시될 텍스트.
• field: rowData 객체에서 해당 컬럼에 바인딩될 데이터 키.
• sortable: 이 컬럼을 기준으로 정렬할 수 있는지 여부 (true/false).
• filter: 이 컬럼에 필터를 적용할 수 있는지 여부 (true/false).
• editable: 셀 내용을 편집할 수 있는지 여부 (true/false).