ag-grid-angular

What is ag-grid-angular?

ag-grid-angular is a powerful data grid component for Angular applications. It provides a wide range of features for displaying, editing, and managing data in a tabular format. It is highly customizable and supports large datasets, making it suitable for enterprise applications.

What are ag-grid-angular's main functionalities?

Basic Grid Setup

This code sets up a basic ag-Grid in an Angular component. The `rowData` and `columnDefs` properties are used to define the data and columns of the grid.

<ag-grid-angular
  style="width: 100%; height: 350px;"
  class="ag-theme-alpine"
  [rowData]="rowData"
  [columnDefs]="columnDefs">
</ag-grid-angular>

Sorting and Filtering

This code enables sorting and filtering on all columns by setting the `sortable` and `filter` properties in the `defaultColDef` object.

<ag-grid-angular
  style="width: 100%; height: 350px;"
  class="ag-theme-alpine"
  [rowData]="rowData"
  [columnDefs]="columnDefs"
  [defaultColDef]="{ sortable: true, filter: true }">
</ag-grid-angular>

Row Selection

This code enables multiple row selection in the grid by setting the `rowSelection` property to `multiple`.

<ag-grid-angular
  style="width: 100%; height: 350px;"
  class="ag-theme-alpine"
  [rowData]="rowData"
  [columnDefs]="columnDefs"
  rowSelection="multiple">
</ag-grid-angular>

Cell Editing

This code enables cell editing for all columns by setting the `editable` property in the `defaultColDef` object.

<ag-grid-angular
  style="width: 100%; height: 350px;"
  class="ag-theme-alpine"
  [rowData]="rowData"
  [columnDefs]="columnDefs"
  [defaultColDef]="{ editable: true }">
</ag-grid-angular>

Pagination

This code enables pagination in the grid and sets the page size to 10 rows per page by using the `pagination` and `paginationPageSize` properties.

<ag-grid-angular
  style="width: 100%; height: 350px;"
  class="ag-theme-alpine"
  [rowData]="rowData"
  [columnDefs]="columnDefs"
  pagination="true"
  paginationPageSize="10">
</ag-grid-angular>

Other packages similar to ag-grid-angular

ngx-datatable

ngx-datatable is a lightweight Angular component for presenting large and complex data. It offers features like sorting, filtering, and pagination. Compared to ag-grid-angular, ngx-datatable is simpler and may be easier to use for smaller projects, but it lacks some of the advanced features and performance optimizations of ag-grid-angular.

primeng

PrimeNG is a comprehensive UI component library for Angular, which includes a powerful data table component. It offers a wide range of features, including sorting, filtering, pagination, and row selection. PrimeNG is comparable to ag-grid-angular in terms of functionality, but it also provides a broader set of UI components beyond just data tables.

angular-material

Angular Material is the official Material Design component library for Angular. It includes a data table component with features like sorting, pagination, and filtering. While it is not as feature-rich as ag-grid-angular, it integrates seamlessly with other Angular Material components and follows the Material Design guidelines.

README

ag-Grid Angular Component

This project contains the Angular Component for use with ag-Grid

Note: ag-grid-ng2 is now deprecated. Please ag-grid-angular going forward.

ag-grid-ng2 8.0.0 ~= ag-grid-angular 8.0.0

All releases from 8.1 onwards will released under ag-grid-angular, and hosted under https://github.com/ag-grid/ag-grid-angular

Install with Bower

$ bower install ag-grid-angular

Install with Npm

$ npm install ag-grid-angular

See www.ag-grid.com for an overview and full documentation.

Frameworks Supported

Framework specific Getting Started guides:

Angular 1 | Angular 2 | Aurelia | Javascript | React | TypeScript | VueJS | Web Components

To Build

• npm install gulp -g
• npm install npm-install-peers -g
• npm install
• npm-install-peers
• npm run clean-build

Examples

See the https://github.com/ag-grid/ag-grid-angular-example for full working examples of what you can do with ag-Grid and Angular Components.

Examples included are:

Rich Grid with Pure JavaScript

Rich Grid with Declarative Markup

Using Dynamic Components

Using Dynamic Components - Richer Example

Using Cell Editor Components

Using Pinned Row Renderers

Using Full Width Renderers

Using Group Row Renderers

With Filters Components

Master Detail Example

Frameworks Supported

Framework specific Getting Started guides: Angular 1 | Angular 2 | Aurelia Javascript | React | TypeScript VueJS | Web Components