Datagrids are an essential tool for any applications requiring processing large data sets. However, the task to create them can be time-consuming and resource-intensive. In this article, you’ll learn about DHTMLX Grid widget and read about its most useful features according to our customers’ reviews.
Download a free 30-day trial of DHTMLX Grid >
Ability to Work with Large Data Sets
With DHTMLX Grid, users can efficiently work with big data sets loaded from an external file or local data source in JSON format. In the example below, you can see the datatable with more than 10,000 rows loaded dynamically as you scroll up/down.
Data Lazy Loading
DHTMLX Grid supports dynamic loading functionality allowing your project to steadily render records only when a user scrolls them into the visible area. The request for the next set of records will be made only when a scroll bar reaches the bottom of the datagrid instead of loading the entire code bundle during the widget initial load.
“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.” Pixel Nation team said.
Lazy loading matters a lot when developing complex multi-featured projects since it reduces application loading time and increases their performance.
Data Editing
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.
First of all, you can choose a proper type of built-in column editors depending on cell content. For instance, you may set a default input editor assuming working with simple text. Inline editing allows users to simply double-click on the cell they want to modify and press Enter once the edit is complete. The cell will be immediately updated. You can also apply a textarea editor for editing multiple lines of plain text.
Moreover, you can equip a cell with a combobox editor representing a drop down list with several options to choose from. Users will be able to find the desired option by typing text in the editor cell. For columns with dates, you can attach a date picker that shows up after double-clicking on a cell. DHTMLX Grid also allows you to create cells with two-state checkboxes.
Secondly, you can combine DHTMLX Grid with other Suite widgets to edit data in your web app. For example, you can use a Form widget to add a right panel to the grid that appears when a user decides to create a new row or edit row content.
Having attached the DHTMLX Window, you make it possible to edit grid data via a modal window. Both components provide 10+ different controls, including a simple input field, combobox, date and timepicker, slider, file uploader, etc.
Drag-n-Drop of Columns and Rows
It’s possible to easily reorder datatable elements with a mouse. End-users can drag and drop rows within one Grid or several widgets according to the defined method. In addition to moving rows, users can reorder columns.
Data Filtering & 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 widget. 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.
Adding Custom Content to Cells
With DHTMLX Grid, you can tailor cell content by adding HTML objects or assigning templates with custom settings. In contrast to the first way which requires attaching HTML files to each cell, you may format the content of column’s cells at once by creating cell templates.
Resizing Columns
Columns of our Grid widget support wide configuration options allowing you to make columns hidden or frozen, automatically adjust width, height, and size to their content, and much more. Moreover, our users highlight the ability to resize Grid columns from the UI.
By default, datagrid columns have fixed widths prohibiting users to manipulate them from the UI. You can make a particular column or all of them resizable thus enabling users to modify their width with a mouse. Plus, you can predefine the limits within which columns can be resized by defining their minimum and maximum width.
Data Paging
One of the ways to simplify the navigation in the grid while working with large data sets is to attach the Pagination widget. It allows splitting the data into several pages and easily browsing between them using navigation buttons. You can also add an input field to let users jump to the desired page by entering its number.
Exporting to Excel & CSV
DHTMLX Grid provides the ability to export data from datagrid into Excel or CSV formats. The functionality is available via the Export module.
Touch Support
The Grid widget provides built-in touch support ensuring your users enjoy native experience when running DHTMLX-based apps on any mobile device. For instance, users are able to edit Grid cells by double tap and reorder its rows and columns by dragging.