< dhtmlxSuite 6.0 is Out - Large-Scale Update of the Whole JavaScript UI Library. Learn more

JavaScript Grid

dhtmlxGrid is a modern and powerful JavaScript DataGrid with outstanding possibilities for customization.
Part of the leading-edge Suite UI library.

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

How to Create a Grid in JavaScript

Here are 5 easy-to-follow steps for building a basic JavaScript DataGrid:
1
Create an HTML file
2
Include the DataGrid js and css source files in the header
3
Add a container with an id - e.g. “grid_container”
4
Initialize the widget with the dhx.Grid object constructor
5
Optionally, specify the configuration settings you need and load data into the grid

Why Choose a JavaScript Grid by DHTMLX

Build a powerful JavaScript Grid control

dhtmlxGrid is a full-featured DataGrid library that provides cutting-edge functionality and fast performance with large data sets. The component allows filtering and sorting data according to various criteria. Filters can be added inside headers or put outside of the grid. Sorting feature is available by default. End users may export grid tables to Excel in one click. On top of all, PRO edition offers a special module for data parsing and serialization in the XML format.

Tune up your grid with a rich JavaScript API

An extensive JavaScript API makes dhtmlxGrid highly customizable and easy-to-use. Developers can modify each and every element of the control - add spans in headers, columns, or rows, adjust the size of a table, make use of the columns’ auto width. One or more columns of the grid can be frozen. You can add any custom HTML to cells. On top of all, you can configure a footer or header to show minimal, maximal, average, or sum values from the columns of your choice.

Achieve the desired look and feel of your HTML5 grid

The greatest advantage of dhtmlxGrid is its flexible customization via CSS. In order to style the component, you just need to add new CSS classes with all the desired settings. Customization options enable you to apply different styles to the header, footer, particular rows, and cells. You can highlight cells with minimal and maximal values or choose which cells to mark with custom styling.

Integrate DHTMLX Grid into Angular, React, Vue.js apps

From now on, there is a smooth and straightforward way to integrate our JavaScript grid into your projects. We have developed special wrappers for the three widespread frameworks Angular, React, and Vue.js, which would help you to use dhtmlxGrid in your apps. In order to try them out, download our 30-day evaluation version and benefit from the assistance of our support team.

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