Row Data

Row Data

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

1. Client-side
2. Infinite
3. Server-side
4. Viewport

Client-side and infinite row models are available in the community edition.

Server-side and viewport row models require 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-alpine">
      <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.