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 React Data Grid, or DataTable, is a feature-rich component used to display data in a tabular format. Its wide range of functionalities includes data binding, editing, filtering, grouping, paging, freezing rows and columns, aggregation of rows, and exporting to Excel, CSV, and PDF formats.


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.

React Data Grid Data binding.

Mobile optimized with Browser support

Data Grid is highly optimized to work on touch devices.

Touch support in React 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 React Data Grid.


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 React 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 React Data Grid.

Cross browser support

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

React Data Grid 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.


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.

React Data Grid Aggregation.

React Data Grid 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 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.

React Data Grid Filtering.


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.


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.

React Data Grid 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 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.

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

React Data Grid with waiting popup.

React Data Grid 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.


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

Excel, PDF, CSV export

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

Print React Data Grid content.


Print the React 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.


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.

React Data Grid Themes.


Keyboard navigation in React Data Grid.

Keyboard navigation

React 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 React 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 React Data Grid.


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

Show right-to-left language in React 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 React Data Grid UI strings.


All the React 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

DataGrid can also be used natively in JavaScript, 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