Updated on October 02, 2026
Datagrids are an essential tool for any application requiring processing large data sets. However, the task to create them can be time-consuming and resource-intensive. This article explores the features that help developers build data-intensive applications with DHTMLX Grid, including high-performance rendering, flexible editing, data grouping, hierarchical views, customizable export, accessibility, and AI-assisted workflows.
Download a free 30-day trial of DHTMLX Grid >
High-Performance Rendering for 100k+ Rows
DHTMLX Grid is optimized for large datasets. Thanks to built‑in virtualization (smart rendering), only the visible rows are rendered in the DOM, while the rest are processed dynamically as the end-user scrolls. As a result, our JavaScript grid can handle datasets of 100,000+ rows while keeping scrolling responsive.
Lazy loading takes some of the pressure off the initial load by fetching data from the backend on demand.
The Pixel Nation team also highlighted the value of infinite scrolling when working with large lists:
“One of the Suite components, dhtmlxGrid, provides powerful support for infinite scrolling. Thanks to this functionality they can effectively display data in searchable and scrollable lists with an unlimited number of rows.”
Advanced Data Editing with Validation, Masks, and Undo/Redo
You can choose the most suitable method for your web app to edit data throughout the grid since DHTMLX Grid provides more than one way to do that. For example, you can choose a proper type of built-in column editors depending on cell content. DHTMLX Grid supports:
- Input for simple text values.
- Textarea for multiline text.
- Select for choosing one value from a predefined list.
- Multiselect for choosing multiple values.
- Combobox for selecting an option or finding one by typing.
- Date picker for date values.
- Checkbox for two-state values such as enabled/disabled or yes/no.
You can also restrict what users enter in an editable cell. For number columns, for example, the editorConfig property supports min and max values. If a user enters a value outside the allowed range, the value is highlighted as invalid.
DHTMLX JavaScript Grid component also provides numberMask and patternMask properties for controlling how values are displayed and entered. The numberMask property is useful for prices, salaries, quantities, and other numeric fields. For structured values, including phone numbers, ZIP codes, and employee IDs, the patternMask gives you more control over the input format.
For web applications where users need to review or reverse changes, DHTMLX Grid provides the History module. It tracks actions such as cell editing, clearing cells, and changes made through supported Grid operations, and includes undo() and redo() methods through the History API.
Enabling the History module is simple by setting history: true in the Grid configuration:
columns: [
{ id: "a", header: [{ text: "A" }] },
{ id: "b", header: [{ text: "B" }] },
],
data: [
{ id: "1", a: "A1", b: "B1" },
{ id: "2", a: "A2", b: "B2" },
],
history: true // enables the History module
});
Flexible Data Grouping API
DHTMLX Grid includes a flexible API for organizing large datasets into expandable groups. You can group rows by one or several column values, define the hierarchy of grouping levels, and let end-users modify groups directly in the UI by dragging column headers to the built-in group panel.
Grouping can also include built-in aggregations such as sum, count, min, max, and avg, as well as custom aggregation functions. Summary rows can appear at the top or bottom of each group, making it possible to display totals, averages, or other business metrics next to the grouped records.
The group panel is configurable. For example, you can control its visibility and height, keep grouped columns visible or hide them automatically, handle rows with missing group values, and make individual grouping criteria removable or permanent.
Exporting to Excel, CSV, PDF, and PNG with Advanced Configurations
DHTMLX Grid makes it easy to export data in the format that best suits your workflow. Using the Export module, end-users can download grid content as an Excel spreadsheet, CSV file, PDF document, or PNG image.
PDF and PNG export can be configured with custom themes, headers/footers, and styles via exportConfig and exportStyles properties.
TreeGrid and Row Expander for Hierarchical Data Management
DHTMLX Grid can display hierarchical data directly in the grid, without requiring a separate tree component. By enabling TreeGrid mode, you can represent parent-child relationships in a familiar tabular layout.
The Wolters Kluwer team described a similar use case:
“A year ago, we received a request to implement a data table with a tree grid mode in our project. DHTMLX Grid proved suitable for this task. Your component is well-documented and has many useful live samples. These factors helped us make a choice in favor of DHTMLX.”
Users can expand and collapse individual branches to focus on the information they need. You can also initialize the grid in a collapsed state or control the hierarchy programmatically with such methods as expand(), collapse(), expandAll(), and collapseAll().
The TreeGrid mode also supports drag-and-drop operations. End-users can reorder items within the hierarchy or move them between TreeGrids. Depending on the configured behavior, a dragged row can become a child or sibling of the target row, or the interface can let users choose the result based on the drop position.
The row expander functionality allows additional content to appear inside an expandable row, so users can view related details without navigating away from the main table. This can be useful for displaying a secondary grid, an order form, a chart, or other custom content alongside a parent record.
columns: [
{ id: "zone_name", header: [{ text: "Zone name" }] },
{ id: "temperature", header: [{ text: "Temperature" }] },
],
data: dataset,
subRow: ({ data }) => {
return new dhx.Grid(null, {
columns: [
{ id: "animal_type", header: [{ text: "Animal type" }] },
{ id: "name", header: [{ text: "Name" }] },
],
data,
autoWidth: true,
});
},
});
Data Filtering and Sorting
By default, DHTMLX Grid allows sorting content of its columns in ascending/descending order by clicking on their headers. However, you’re free to apply custom rules for sorting and choose which column should be sortable.
Data filtering is another popular feature of the DataGrid component. You can specify the criteria for filtering and decide whether to add filters inside the header/footer or outside the grid. Thus, users can filter data using a text field, drop down list with multiple options to choose from, and a combo box with autocomplete.
“The components of Layout + Datagridpro have allowed us to work with grids by grouping them according to applied filters. In this way, we give the users a great deal of power so that they can have immediate results, without overloading the server with new requests in the database.” CESC-IT team said.
If you have decided to place filters outside the grid, then you can use other Suite UI widgets. For instance, you may combine DHTMLX Sidebar and Form to arrange filters at the left of the grid.
Besides, you can attach a Toolbar to locate filtering at the top of the page. In both examples, the Form widget is responsible for visualizing filters and allows attaching inputs, combo boxes for quickly searching for the necessary data, date pickers, and other controls.
Accessibility and Keyboard-First Data Management
DHTMLX Grid supports keyboard navigation and assistive technologies. Its accessibility features cover the main parts of the component, including the data area, column headers, filters, inline editors, and footer summaries.
Keyboard navigation is enabled by default, allowing users to move between cells with the arrow keys, Tab, Home, End, and Page Up or Page Down. Users can open an editor with Enter or F2, confirm or cancel changes, and toggle checkbox values with the keyboard. Sorting and filtering can also be performed without using a mouse.
Our JavaScript Grid component automatically adds WAI-ARIA roles and attributes to its rendered markup. Screen readers can identify rows and cells, their positions, selection and editing states, sortable columns, and active filters. DHTMLX Grid also includes light and dark high-contrast themes to improve visibility and focus in different environments.
Multiselection and Drag-and-Drop of Columns and Rows
It’s possible to easily reorder datatable elements with a mouse. End-users can drag and drop columns and rows within a single Grid or between multiple Grid instances. You can define how Grid elements are placed relative to the targeted ones, and use events to respond when a drag operation starts or ends.
Row drag-and-drop can be enabled with the dragItem property. You can configure it to work with individual rows, multiple selected rows, or both. When multiple-row dragging is enabled, users can select several records and move them as a group instead of repeating the operation for each row.
AI-Ready Architecture
You can enhance DHTMLX Grid with external AI models to analyze cell content in real time. The official DHTMLX Grid AI demo shows this approach with a basic customer review table, where users can analyze individual reviews or process several records at once, while an AI model evaluates the text and adds structured information to the grid.
View the AI-powered Grid demo on GitHub >
The generated results include sentiment, relevant tags, and a short summary, allowing users to identify the main message of each review without analyzing every entry separately. This makes DHTMLX Grid suitable for web apps that need to classify feedback, organize text-based records, or support users with automatically generated insights.
Developers can also use the DHTMLX MCP server to give AI coding assistants access to current DHTMLX documentation and API information. Setting up the MCP server can simplify the process of exploring the Grid API, generating configuration examples, and integrating the component with your application.
Resizable, Auto-Sized, and Frozen Columns
Columns of our JavaScript Grid component support wide configuration options. By default, datagrid columns have fixed widths, prohibiting users from manipulating them from the UI. You can enable resizing for all columns with the resizable: true grid configuration or enable it only for selected columns by setting resizable: true in an individual column’s configuration.
The minWidth and maxWidth properties let you define the allowed resizing range for each column. DHTMLX Grid also supports automatic sizing. The adjust property can fit a column to its header, footer, cell content, or the largest of these values, while autoWidth can distribute column widths according to the available grid container.
In addition, leftSplit and rightSplit can be used to freeze columns on the left or right side of the grid. Frozen columns remain visible while users scroll horizontally through the rest of the table. The hidden property allows you to keep a column in the data structure without displaying it in the interface.
DHTMLX Grid brings performance, flexibility, and advanced data-management features to modern JavaScript applications. Explore the documentation to learn how to add these capabilities to your project or start a free 30-day trial.