UI Grid

Angular Data Grid written in AngularJS and jQuery by the AngularUI Team Team

Basic Example

UI-Grid 3.0 (formerly ng-grid), is a 100% angular grid written with no dependencies other than AngularJS. It is designed around a core grid module and features are layered on as angular modules and directives. This keeps the core small and focused while executing very complex features only when you need them.

In the core module, you get:

  • Virtualized rows and columns - only the rows and columns visible in the viewport (+ some extra margin) are actually rendered
  • Bind cells to complex properties and functions
  • Column sorting with three states: Asc, Desc, None
  • Column filtering
  • Ability to change header and cell contents with custom templates
  • i18nService allows label translations

Paging

When ui-grid-paging is enabled, the data is displayed in pages that can be browsed using using the built in paging selector.

Control Data

You can swap out data in the grid by simply providing a different reference.

Control Data

This grid example uses the ui-grid-selection directive to row selection. To enable, you must include the 'ui.grid.selection' module and you must include the ui-grid-selection directive on your grid element.

Edit

The ui.grid.edit feature allows inline editing of grid data. To enable, you must include the 'ui.grid.edit' module and you must include the ui-grid-edit directive on your grid element.

Grid With Footer

The grid supports a footer row, which can be displayed if showFooterRow option is set to true. You can set an aggregation function for each column or use a custom footer template to display what ever aggregation you wish. Aggregation functions supported are: sum, avg, row count, min, max. You need to inject the uiGridConstants in order to use aggregationTypes enum. You can also pass in a function in order to create your own aggregation logic. If you set the aggregationHideLabel option on the columnDef to true, then the column will show the aggregation but without a label. Refer the third column in the example below.

Pagination

When ui-grid-pagination is enabled, the data is displayed in pages that can be browsed using a page selector.

Pagination : Page: {{ gridApi.pagination.getPage() }} Total pages: {{ gridApi.pagination.getTotalPages() }}

Control Columns

You can dynamically add and remove columns, the grid watches the column defs and updates appropriately. The columns are by default shown in the order of the columnDefs, although if/when the column move feature arrives the end user will be able to alter that default. You can dynamically change the display name on a column (along with some other column def properties), and call the notifyDataChange api to force an update.

Multi Select

This grid example uses the ui-grid-selection directive to row selection. To enable, you must include the 'ui.grid.selection' module and you must include the ui-grid-selection directive on your grid element. By default the module will provide a row header with checkboxes that allow selection of individual rows.

Styling Grid

You can assign a class name to each columnDef, add a grid menu and customize the head of your grid. You will learn more from UI-Grid Tutorial.