LiveLoveApp logo

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:

@Component({
  selector: 'app-grid',
  standalone: true,
  imports: [AgGridModule],
  template: `
    <ag-grid-angular
      class="ag-theme-material"
      [columnDefs]="columnDefs"
      [rowData]="rowData"
    ></ag-grid-angular>
  `
})
export class GridComponent {
  columnDefs = [
    { headerName: 'Name', field: 'name' },
    { headerName: 'Color', field: 'color' },
  ] as ColDef<RowData>[];

  rowData: RowData[] = products;
}

See example on Stackblitz

Let's quickly review:

  • Data is provided to the grid using the rowData input binding.
  • 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 <ag-grid-angular> component.
  3. Set the rowData property using the existing products import, and bind to the <ag-grid-angular> component.