Page 2: Data Binding and Column Definition

2. Data Binding and Column Definition

The core of AG Grid lies in efficiently displaying data and finely controlling the properties of each column.

2.1. Data Binding: rowData

rowData is an array of data to be displayed in the grid. Each array element is an object representing a row, and the object's keys should match the column fields.

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

2.2. Column Definition: columnDefs

The columnDefs array defines the header, data field, width, sortability, filterability, and more for each column.

const [columnDefs] = useState([
  { headerName: "ID", field: "id", width: 90 },
  { headerName: "Name", field: "name", sortable: true, filter: true },
  { headerName: "Age", field: "age", editable: true } // 'Age' column is editable
]);

Key Properties:

• headerName: The text to display in the column header.
• field: The data key from the rowData object to bind to this column.
• sortable: Whether this column can be sorted (true/false).
• filter: Whether a filter can be applied to this column (true/false).
• editable: Whether cell content can be edited (true/false).