Row Data
Row Data
Broadly, there are two row models provided by AG Grid:
- Client-side
- Infinite
- Server-side
- 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;
}
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
- Open the Stackblitz Exercise
- Specify the
columnDef
column definition property and bind to the<ag-grid-angular>
component. - Set the
rowData
property using the existingproducts
import, and bind to the<ag-grid-angular>
component.