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


The JavaScript DataGrid, or DataTable, is a feature-rich control for displaying data in a tabular format. Its wide range of functionalities includes data binding, editing, filtering, grouping, paging, freezing rows and columns, aggregating rows, and exporting to Excel, CSV, and PDF formats.


DataGrid 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

DataGrid 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.

JavaScript DataGrid Data binding.

Mobile optimized with Browser support

DataGrid is highly optimized to work on touch devices.

Touch support in JavaScript DataGrid.

Touch support

All DataGrid 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 JavaScript DataGrid.


Responsive features allow the DataGrid 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 JavaScript DataGrid.

Responsive pager

The pager UI is adaptable in mobile views. When DataGrid 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 JavaScript DataGrid.

Cross browser support

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

JavaScript DataGrid Editing.


DataGrid 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.


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.

JavaScript DataGrid Aggregation.

JavaScript DataGrid Paging.


Through paging, a segment of data can be viewed from the assigned data source. DataGrid 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 allows users to view the required data in the DataGrid. The DataGrid 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.

JavaScript DataGrid Filtering.


DataGrid 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.


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.

JavaScript DataGrid Selection.


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


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

JavaScript DataGrid Width and Height.

Width and Height

Allows changing the DataGrid size by setting the width and height properties. The horizontal and vertical scrollbars will appear when the content overflows the datagrid element. You can make DataGrid 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 DataGrid to clearly communicate its busy state. You can also show or hide overlays programmatically.

JavaScript DataGrid with waiting popup.

JavaScript DataGrid Column.


Columns define the schema of data source in DataGrid. 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 DataGrid 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 DataGrid 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.


Export to PDF, CSV, and Excel formats in JavaScript DataGrid.

Excel, PDF, CSV export

Export the JavaScript DataGrid data to Excel, PDF, and CSV formats. The exported document can also be customized programmatically.

Print JavaScript DataGrid content.


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


DataGrid 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.

JavaScript DataGrid Themes.


Keyboard navigation in JavaScript DataGrid.

Keyboard navigation

JavaScript DataGrid 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 JavaScript DataGrid.

Screen reader

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

Globalization and localization

Format dates and numbers in JavaScript DataGrid.


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

Show right-to-left language in JavaScript DataGrid.

Right to left {RTL}

DataGrid 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 JavaScript DataGrid UI strings.


All the JavaScript datagrid strings in the user interface can be localized as needed. DataGrid uses the localization (l10n) library to localize UI strings.

Other supported frameworks

DataGrid can also be used natively in Angular, React and Vue frameworks.


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