Grid (DataGrid) Feature Details

This page describes the key functionality of DHTMLX Grid widget. It can be downloaded as a standalone component or as a part of the Suite UI library used to create comprehensive web apps and interfaces.

Drag-n-Drop of Grid Rows and Columns pro
DHTMLX Grid widget provides comprehensive drag-n-drop behavior allowing users to reorder its rows and columns in one click. Users may drag rows inside the same grid as well as from other grids. The ability to drag-n-drop Grid columns comes with the PRO version of DHTMLX Grid or Suite UI library.
Sorting and Filtering
DHTMLX Grid supports sorting and filtering data according to various criteria. Sorting feature is available by default and allows users to display content in descending or ascending order. Filters can be added outside the grid or inside the header/footer as a text field, drop down list with options to select, or combobox where users can enter text to speed up the process.
Built-in Column Editors pro
Our DataTable widget provides the editing feature that allows users to modify data in the whole grid or in the particular columns only. You can specify the way of editing column’s cells, e.g., allow modifying text with a double-click, changing dates via a datepicker attached to the cell, or editing multiple lines of text via the textarea editor (that is available with the PRO version). Users may also apply a select or combobox to choose a proper option from the drop-down list.
Multiple Selection
Users can select multiple grid cells and rows using the “Ctrl + Click” combination. A range of grid elements can be selected by clicking the first item and then the last one while holding the Shift key down. You can also apply custom styling and change selection colors.
By default, grid columns have fixed width with no possibility to resize them from UI. However, users can be allowed to change the width of columns with a mouse by grabbing the right border and dragging to the desired size. You may also define the resizing limits.
Export to Excel and CSV
Your users can easily export data of the grid widget into the Excel or CSV formats. DHTMLX Grid provides exporting functionality via the Export module.
Dynamic Loading pro
Dynamic loading is an effective way to work with massive data tables with a great number of rows. This feature allows rendering records only when they get to the visible area thus improving overall performance.
Formatting Columns
You can specify the format of numeric values to display in the cells of a grid column. Thus, the DHTMLX Grid widget allows processing numbers with thousand and decimal point separators, working with percentage values, setting currency symbols, and defining the format of dates.
Fixed Multiline Header and Footer
Headers and footers in DHTMLX Grid can consist of multiple rows with various combinations of colspan and rowspan. You can set auto width and height for columns while automatically splitting long text into multiple lines based on the width of the cell.
Rich Customization Abilities
You may assign custom styling and change the overall look and feel of the Grid widget. Each cell can contain either simple text or HTML objects like an image or icon aligned at the center or at the right/left border. Moreover, you can freeze a column or several ones, so that they will become static while the rest of columns remain scrollable.
Templates for Tooltips
The default behavior for tooltips is to be shown when a user hovers over a column. However, you can hide tooltips or enable/disable them for separate columns or spans. You may also customize the tooltip template and add any kind of HTML content inside.

Estimate All UI Widgets

Create functional and easy-to-use web apps and interfaces, as well as save up to 40% by downloading the whole Suite UI library. You can benefit from:

Full toolkit of 20+ widgets

30 days of free trial

PRO features

Official technical support