Row Data

Row Data

Broadly, there are two row models provided by AG Grid:

1. Client-side row model
2. Server-side row model

Client-side is available in the community edition, and server-side row model requires the enterprise edition.

Client-side Row Model

Generally, we'll be using the client-side row model in this course.

Let's look at an example:

export default function Grid() {
  const [columnDefs, setColumnDefs] = useState<ColDef<RowData>[]>([
    { headerName: 'Name', field: 'name' },
    { headerName: 'Color', field: 'color' },
  ]);
  const [rowData, setRowData] = useState<RowData[]>(data.products);

  return (
    <div className="ag-theme-quartz-auto-dark">
      <AgGridReact rowData={rowData} columnDefs={columnDefs}></AgGridReact>
    </div>
  );
}

See example on Stackblitz

Let's quickly review:

• Data is provided to the grid using the rowData prop.
• The data is bound to a column based on the column definition's field.

We'll learn about more advanced techniques for cell rendering later in the course.

Exercise

1. Open the Stackblitz Exercise
2. Specify the columnDef column definition property and bind to the <AgGridReact> component.
3. Set the rowData property using the existing products from the data import, and bind to the <AgGridReact> component.