< Meet dhtmlxSuite 6.1 with inline editing, multiselection, multiple drag-n-drop & much more

React Data Grid

Being a part of the advanced Suite UI library, dhtmlxGrid is a robust and flexible React data table component
with smooth visual customization.

How to Start with React Data Grid

5 Quick Steps to Integrate Grid with React
1
Create a Grid.js file and import files and styles of Grid
2
Create Grid class, which extends the Component class
3
Add an empty container for Grid with the reference to it in the el property using the ref property
4
When the component is initialized, initialize Grid and attach the instance to the container with the reference to it in the el property
5
Specify a set of configuration properties if needed

Product Features

  • Cross-browser compatibility
  • IE11+ support
  • Extensive customization
  • Full control with rich JavaScript API
  • TreeGrid mode
  • Data loading in the JSON format
  • Multiline header and footer
  • Columns and rows spans
  • Custom templates for cells’ content
  • Marking cells with min and max values
  • Adding custom marks to cells
  • Auto-calculated values in footer/header
  • Frozen columns
  • Auto width for columns
  • Highlighting a selected cell and row
  • Sorting data
  • Filtering data
  • Exporting data to Excel

Why Choose DHTMLX React Data Grid

Receive robust grid control

DHTMLX React grid library allows working with volume data sets, includes filtering and multicriteria sorting features (available by default). Add header filters or move them out of the grid. Enable your customers to export grid tables to Excel with one click of a button. Update to PRO edition, parse and serialize data in the XML format with a special module.

Personalize your React grid with flexible API

dhtmlxGrid contains rich API functionality. Tailor your React grid component according to your needs. You can add spans to any grid element, fine-tune the table sizes, specify the columns’ auto width, and freeze one or more columns. Plus, footers or headers can be configured to display minimal, maximum, average or sum of values from any columns you select in the React data grid.

Enjoy clear styling with vast customization possibilities

DHTMLX material UI React grid provides full customization via CSS. Just add new CSS classes to apply different styles to any grid element, including the header, footer, and particular rows. Feature cells with the lowest or highest values and set custom styling to specific units. On top of all, you can insert custom HTML into the cell.

Use Angular and Vue.js wrappers

DHTMLX supports wrappers for the most commonly used frameworks. Apart from initializing our data grid in React, you can integrate the solution into your Angular and Vue.js apps. Give it a try and test our free 30-day trial version. Direct access to our official support team is included.

Support & Learning Resources

We provide comprehensive documentation with technical samples. Moreover, our dedicated support team is fast and qualified. Find the suitable way to get support:

dhtmlxGrid Licensing

Free GNU GPL v2 Commercial Enterprise Ultimate
License Terms
Free GNU GPL v2
Commercial
Enterprise
Ultimate
Developers
Free GNU GPL v2
Commercial
5
Enterprise
20
Ultimate
Projects
Free GNU GPL v2
(open source only)
Commercial
1
Enterprise
5
Ultimate
SaaS
Free GNU GPL v2
Commercial
Enterprise
Ultimate
Perpetual distribution rights
Free GNU GPL v2
Commercial
Enterprise
Ultimate
Support Plan
Free GNU GPL v2
No Official Support
Commercial
Standard Support
Enterprise
Premium Support
Ultimate
Ultimate Support
Time Period
GNU GPL
Commercial
1 year
Enterprise
1 year
Ultimate
1 year
Updates
GNU GPL
Commercial
Minor & major updates
Bug fixes
Enterprise
Minor & major updates
Bug fixes
Ultimate
Minor & major updates
Bug fixes
Emergency bug fixes
Tickets
Free GNU GPL v2
Only Community Forum
Commercial
10
Enterprise
30
Ultimate
Response Time
GNU GPL
Commercial
72h
Enterprise
48h
Ultimate
24h
Personal Acccount Manager
GNU GPL
Commercial
Enterprise
Ultimate
Functionality
GNU GPL
Standard
Commercial
Professional
Enterprise
Professional
Ultimate
Professional
dhtmlxGrid PRO
GNU GPL
Commercial
Enterprise
Ultimate
Module for XML parsing/serialization
GNU GPL
Commercial
Enterprise
Ultimate
demo-screenshot

File manager built with the help of Suite components: Layout, Grid, DataView, Toolbar, etc.

Up to 40% off

If you choose the whole Suite library instead
of buying DHTMLX UI components separately:

Suite Commercial - $799

Suite Enterprise - $1699

Suite Ultimate - $3499

Need help with dhtmlxGrid integration into your app? Contact us