< DHTMLX Suite 7.2 with a New Form Control, Multiselect Editor for Grid, Custom Scrollbar, and Much More

JavaScript DataGrid (DataTable) Widget

DHTMLX JavaScript DataGrid is a a data-intensive UI widget for processing a large amount of data at lightning speed and conveniently editing, filtering, and sorting data in tables.

JavaScript DataGrid Features

  • Columns' drag-n-drop pro
  • Data editing
  • Sorting data
  • Filtering data
  • Ability to hide/show rows
  • Custom templates for cells' content
  • Number formatting
  • Multiline cell content
  • Templates for tooltips
  • Cells and rows multiselection
  • Custom HTML content
  • TypeScript support
  • Full control with rich JavaScript API
  • Data loading in the JSON format
  • Multiline header and footer
  • Vertical and horizontal spans
  • Adjusting columns' width
  • Touch support
  • Lazy loading pro
  • Frozen columns
  • Keyboard navigation
  • Ability to be initialized without data
  • Marking cells with min and max values
  • Adding custom marks to cells
  • Auto-calculated values in footer/header
  • Auto width for columns
  • Highlighting a selected cell and row
  • Exporting data to Excel
  • Ability to disable tooltips
  • Automatic adding of an empty row to the end of Grid
  • Cross-browser compatibility
  • IE11+ support
  • Content alignment

DHTMLX Suite Demos with JavaScript Grid

Reinforce Your JS DataTable with DHTMLX Suite

Discover the abilities of the Grid component available within the DHTMLX Suite library of UI widgets.

Edit data using the right panel
You can choose the most convenient way of editing data for your web app. It is possible to combine DHTMLX Grid with the Form widget and arrange them with the help of DHTMLX Layout. When a user wants to create or edit a row, the form appears to the right of the grid.
Edit data using the modal window
Alternatively, end-users can edit the Grid content using a modal window. The DHTMLX Window component enables you to attach a form with all the possible editing options. There you can add anything from simple input fields to comboboxes, colorpickers, and even file uploaders.
Filter data using the sidebar
Filtering is another demanded feature in JavaScript data tables. Besides per-column filters, you can implement filters with the help of the Form widget anywhere outside of the grid. One of the most popular options is placing filters in the DHTMLX Sidebar to the left of the grid.
Filter data using the toolbar
If you would like to opt for compact filters, you can make use of DHTMLX Toolbar. It enables you to organize all the needed fields for filtering at the top of the page. Filters can contain any Form controls like comboboxes with autocomplete, calendars, sliders, checkboxes, radiobuttons, etc.
Paging
DHTMLX Suite offers a pagination widget for smooth navigation in JavaScript grids with vast amounts of data. It splits the grid content across multiple pages and equips the table with navigation buttons and input fields for quickly searching for the desired page.

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 DataGrid by DHTMLX

Build a powerful JavaScript Grid control

DHTMLX Grid 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 JavaScript data 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 JS datagrid with a rich API

An extensive JavaScript API makes DHTMLX Grid web control highly customizable and easy-to-use. Developers can modify each and every element - add spans in headers, columns, or rows, adjust the size of a datatable, 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

One of the major advantages of DHTMLX Grid is flexible customization via CSS. In order to style the JavaScript datagrid widget, 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 JS datagrid library into your projects. We have prepared code examples for the three widespread frameworks Angular, React, and Vue.js, which can help you use DHTMLX Grid in your apps. You can also download our 30-day evaluation version and benefit from the assistance of our support team.

Other Suite Widgets

DHTMLX Grid 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
Columns' drag-n-drop
GNU GPL
Commercial
Enterprise
Ultimate
Lazy loading
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 DHTMLX Grid integration into your app? Contact us