< DHTMLX Suite 8.3: Colorpicker Transparency Scale, Extended Functionality of Columns’ Header and Footer in Grid/TreeGrid, and 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
  • Drag-n-drop of multiple rows
  • Auto height mode pro
  • Touch support
  • Lazy loading pro
  • Ability to freeze any columns and rows
  • 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, PDF/PNG
  • Ability to disable tooltips
  • Automatic adding of an empty row to the end of Grid
  • Cross-browser compatibility
  • Content alignment
  • Simultaneously reordering columns and rows
  • Various cell editor types
  • Accessibility support

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. You can freeze any columns and rows. 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

Individual Commercial Enterprise Ultimate
License Terms
Individual
Commercial
Enterprise
Ultimate
Developers
Individual
1
Commercial
5
Enterprise
20
Ultimate
Projects
Individual
1
Commercial
1
Enterprise
5
Ultimate
Use in SaaS (unlimited end-users)
Individual
Commercial
Enterprise
Ultimate
Perpetual distribution rights
Individual
Commercial
Enterprise
Ultimate
Support Plan
Individual
Standard Support
Commercial
Premium Support
Enterprise
Premium Support
Ultimate
Ultimate Support
Time Period
Individual
1 year
Commercial
1 year
Enterprise
1 year
Ultimate
1 year
Updates
Individual
Major, minor, and maintenance updates
Commercial
Major, minor, and maintenance updates
Enterprise
Major, minor, and maintenance updates
Ultimate
Major, minor, and maintenance updates
Priority queue for bug fixing
Support requests
Individual
10
Commercial
30
Enterprise
50
Ultimate
Response Time
Individual
72h
Commercial
48h
Enterprise
48h
Ultimate
24h
Personal Account Manager
Individual
Commercial
Enterprise
Ultimate
Functionality
Individual
Professional
Commercial
Professional
Enterprise
Professional
Ultimate
Professional
PRO features
Individual
Commercial
Enterprise
Ultimate
Online export to Excel
Individual
Free
Commercial
Free
Enterprise
Free
Ultimate
Free
Free local Excel export module
Individual
Commercial
Enterprise
Ultimate
Online export to PDF/PNG without watermark
Individual
Free for 1 year
Commercial
Free for 1 year
Enterprise
Free for 1 year
Ultimate
Free for 3 years
Free local PDF/PNG module
Individual
Commercial
Enterprise
Ultimate
Up to 40% off
If you choose the whole Suite library instead
of buying DHTMLX UI components separately:

Suite Individual - $799

Suite Commercial - $1699

Suite Enterprise - $3499

Suite Ultimate - $6999

demo-screenshot

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

If you have an open-source (GNU GPL v2) project and you are not interested in PRO features, you may use DHTMLX Grid Standard Edition for free.
It comes without official technical support, but you can use the community forum instead.

Need help with DHTMLX Grid integration into your app? Contact us