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/ceolter/ag-grid-angular

Install with Bower

$ bower install ag-grid-angular

Install with Npm

$ npm install ag-grid-angular

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

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/ceolter/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 Floating Row Renderers

Using Full Width Renderers

Using Group Row Renderers

With Filters Components

Master Detail Example