Enterprise ready Angular Grid component

The jQWidgets Data Grid for Angular is an advanced grid component built on top of Typescript, Angular and the jQWidgets framework. It offers many features, including spreadsheet, sorting, filtering, grouping, drag and drop, fluid size, localization, RTL support and many more. The grid component is a suitable for complex Angular UI applications. Angular 4 Grid


jQWidgets Grid for Angular is fast and comes with easy to use and well documented APIs and many ready to use examples. Like all components in the jQWidgets framework the Angualar DataGrid works across devices and provides a consistent look and behavior on PCs, tablets and mobile phones. jQWidgets Grid for Angular is used by thousands of companies. Continuous improvements, attention to quality and performance guarantee the the jQWidgets data grid is the top choice for enterprise customers using the Angular framework.

The grid component can be used either with Javascript or with Typescript. For modern browsers, we suggest using it with Typescript. The Angular 4 Grid component and Typescript definitions can be found in the download package, within the jqwidgets-ts folder. The angular_jqxgrid.ts file contains the Angular2 Grid component implementation. The jqwidgets.d.ts file contains the Typescript definitions.

Data Binding

The angular grid component has built-in data binding capabilities and supports client and server-side paging. It can be bound to local data, arrays, JSON, XML, CSV, TSV, Remote Data (JSONP) and Virtual Data. To bind the angular grid to a data source, simply set its source property to point to an instance of jqxDataAdapter.

Sorting, filtering, grouping and editing

The Angular Grid offers advanced filtering capabilities(including custom filters), sorting with compare functions, grouping with pagers and aggregates and row editing including cutomized editors.

Grid columns and cells formatting

The angular grid offers many options for columns and cells formatting. You can align the text in the cells left, right or center and have different background colors. The columns can be visible, hidden and auto-sized. The angular grid also offers the options to add checkboxes, images and other widgets in any column. In addition jQWidgets Grid for Angular provides built-in advanced features like column tooltips, foreign key, computed and pinned columns. You can also do reordering and resizing of the columns.

Angular 4 Grid Cells Formatting

Drag and Drop features

The Angular data grid offers built-in drag and drop feature. You can drag any of the data grid cells. The data grid also support multi-row data and drop.

Nested grids, row details, master-detail grids and toolbars

jQWidget data grid for Angular offers additional features like row details, custom keyboard navigation, deferred scrolling on large data sets, nested data grids, master-details grids, toolbars on the grid, status bar, right to left support and more.

Data grid export and printing

The jQwidgets Angular grid component offers export to multiple file formats includeing Excel, PDF, XML, HTML, CSV, TSV and JSON. The data in the grid cal also be printed directly from within the browser using the built-in printing capabilities.