We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback
SUPPORTED FRAMEWORKS

Overview

The Angular Data Grid, or DataTable, is a feature-rich component used to display data in a tabular format. Its rich feature set includes functionalities like data binding, editing, filtering, grouping, paging, freezing rows and columns, aggregating rows, and exporting to Excel, CSV, and PDF formats.


Performance

Data Grid is designed and optimized for high performance. A high volume of data can be loaded without performance degradation by using row and column virtualization.


Data binding

Data Grid can be bound to data from a variety of data sources in the form of JavaScript object array collection. It uses the data manager to handle data and supports customizing data requests and processing.

Angular DataGrid Data binding.


Mobile Optimized with Browser Support

Data Grid is highly optimized to work on touch devices.

Touch support in Angular Data Grid.

Touch support

All Data Grid features work on touch devices with zero configuration. This enables features such as sorting, grouping, and selection to be used without any customization.

Responsive in Angular Data Grid.

Responsive

Responsive features allow the Data Grid layout to be viewed on various devices. It is also possible to hide specific columns for particular screen sizes using column-based media query support.

Responsive pager UI in Angular Data Grid.

Responsive pager

The pager UI is adaptable in mobile views. When Data Grid is rendered in a smaller screen, the pager UI will be rendered without a page number list, making it suitable for smaller devices.

Cross browser support in Angular Data Grid.

Cross browser support

Data Grid supports all modern browsers. It supports IE11 with the help of polyfills.


Angular Data Grid Editing.

Editing

Data Grid provides full support to create, read, update, and delete operations (CRUD). It performs editing operations with JavaScript array collection or remote data service with the help of data manager.


Aggregation

Aggregates for column values can be easily displayed using the aggregate feature. Aggregates can be customized to show their value in individual summary rows, individual group summary rows, or in group caption rows.

Angular Data Grid Aggregation.


Angular Data Grid Paging.

Paging

Through paging, a segment of data can be viewed from the assigned data source. Data Grid offers built-in pager UI with options to customize its entire UI. it also has an on-demand paging mode for effective data retrieval from remote web services.


Filtering

Filtering allows users to view the required data in the Data Grid. The Data Grid supports various filter types such as filter bar, menu, check box, and Excel-like filter. The appropriate filter type can be chosen based on the application. These filter types support number filter, string filter, date filter, and Boolean filter. Options to customize filter operators, case sensitivity, and diacritics are also available.

Angular Data Grid Filtering.


Sorting

Data Grid rows can be sorted against a column simply by clicking the desired column header. Data can be sorted either in the ascending or descending order.


Grouping

Supports row grouping to display data in an organized way. Data can be grouped in the ascending or descending order. Rows can be grouped by dragging and dropping the desired columns in the interactive drop area.


Angular Data Grid Selection.

Selection

Data Grid allows selecting rows or cells. One or more rows or cells can also be selected by holding Ctrl or Command, or programmatically.


Templates

Templates can be used to create custom user experiences. Data Grid provides various template options to create custom headers, custom cell contents, custom rows, detail rows, and toolbars.


Angular Data Grid Width and Height.

Width and Height

Allows changing the Data Grid size by setting the width and height properties. The horizontal and vertical scrollbars will appear when the content overflows the Data Grid element. You can make Data Grid to fill its parent container by simply setting the height and width as 100%.


Overlay / Waiting popup

Overlays will automatically appear for all asynchronous action of the Data Grid to clearly communicate its busy state. You can also show or hide overlays programmatically.

Angular Data Grid with waiting popup.


Angular Data Grid Column.

Column

Columns define the schema of data source in Data Grid. It supports formatting, auto generating columns, column definitions, freezing rows and columns, column spanning, text wrapping, column chooser, column menu, and other important features.


Context menu

The Data Grid Context Menu provides a list of actions to be performed. It appears when a cell, header, or pager is right-clicked. The context menu items can be customized according to user preference.


Copy to Clipboard

Selected rows and cells can be copied from the Data Grid to the clipboard. Use Ctrl+C and Ctrl+Shift+H keyboard combinations to copy data with and without headers, respectively.


Stacked headers

Stacked headers allow grouping and visualizing column headers in a stacked manner. There is no limit to the number of columns that can be stacked. The data columns can still be grouped, sorted, and filtered.


Row height

Row heights can be adjusted to display more rows in a view port. It is also possible to set row height conditionally.


Exporting

Export to PDF, CSV, and Excel formats in Angular Data Grid.

Excel, PDF, CSV export

Export the Angular Data Grid data to Excel, PDF, and CSV formats. The exported document can also be customized programmatically.

Print Angular Data Grid content.

Print

Print the Angular Data Grid data either by using the print option from the toolbar or programmatically. All the rows in the Data Grid will be printed regardless of paging. It is also possible to print the current view page only.


Themes

Data Grid is shipped with several built-in themes such as material, bootstrap, fabric (Office 365), and high contrast. Users can easily customize any one of these built-in themes or create new themes to achieve their own desired look and feel either by simply overriding SASS variables or using our Theme Studio application.

Angular Data Grid Themes.


Accessibility

Keyboard navigation in Angular Data Grid.

Keyboard navigation

Angular Data Grid ensures that every cell is accessible using the keyboard. Major features like sorting, selection, and editing can be performed using keyboard commands alone; no mouse interaction required. This helps in creating highly accessible applications using this component.

Accessibility and screen reader support in Angular Data Grid.

Screen reader

All Data Grid cells are added with ARIA attributes to be recognized when using a screen reader.



Globalization and localization

Format dates and numbers in Angular Data Grid.

Globalization

Angular Data Grid enables users from different locales to use it by formatting the date, currency, and numbering to suit locale preferences. Angular Data Grid uses the internalization (i18n) library to handle value formatting.

Show right-to-left language in Angular Data Grid.

Right to left {RTL}

Data Grid supports right-to-left rendering, allowing the text direction and layout to be displayed from right to left. This improves the user experience with RTL languages.

Localize Angular Data Grid UI strings.

Localization

All the Angular Data Grid strings in the user interface can be localized as needed. Data Grid uses the localization (l10n) library to localize UI strings.


Other supported frameworks

Data Grid can also be used natively in JavaScript, React and Vue frameworks.


50+ ANGULAR UI COMPONENTS

Transform your applications today by downloading our free evaluation versionDownload Free Trial

Scroll up icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon