Send me update notifications on email

dhtmlxGrid is a Ajax-enabled JavaScript grid control that provides professional solution for representing and editing tabular data on the web. Carefully designed, with powerful script API, this editable DHTML grid is easy configurable with XML or js methods and shows convincing results working with large amounts of data.

dhtmlxGrid allows easy implementation of nice looking (managed through css or predefined skins) DHTML tables with rich in-cell editing, fixed multiline headers/footers, resizable, sortable and draggable columns. Numerous event handlers let you add necessary interactivity to grid-based interfaces. Smart Rendering technology and built-in paginal output allow this data grid to work effectively with huge datasets.

Being 100% client-side solution and loading data dynamically through Ajax callbacks, dhtmlxGrid can be integrated with any server side technology providing the possibility to automatically save and update data in database in real time without page reload.

Simple and comfortable grid interface supplemented with ability of keyboard navigation allows users to enter and modify tabular data intuitively. Extensible architecture of the grid allows you to use custom external component as cell editor, providing great opportunity to enrich grid functionality. For greater flexibility cell editors can be applied on per cell basis.

dhtmlxGrid supports merged cells, frozen columns and provides the ability to easily move grid columns (using drag-n-drop or script methods) and copy data to clipboard (in CSV format) with further pasting to MS Excel or any other application (try this right now in above live demo).

dhtmlxGrid v.1.4 is available since July 12, 2007
(last build from August 13, 2007).

Main new features include:

Features details

Multirow header/footer

Headers and footers in grid can contain multiple rows with various combination of colspan/rowspan. Each cell can contain either simple text or complex html objects.

Smart Rendering

Smart Rendering is a powerful feature which increases the performance of tables with great number of records. The main advantage of this mechanism is in the ability to render table data (this process is the slowest in DHTML) only when it gets to visible area of the grid (while scrolling). At the same time most API methods still work with invisible content.
Using this feature together with dynamical loading you can work with really large amounts of data.

Paginal output

Paginal output is the easiest way to manage large amounts of data and make it comfortable for user to work with it. What is nice in dhtmlxGrid paginal output is that you can enable it in any grid just with single javascript command without the nesessity to change anything in grid configuration. Although dhtmlxGrid Standard edition is Paginal-Output ready (you can implement it using script API), full paging support, including the ability to use dhtmlxTabbar with it, was impelmented in Professional Edition only.

dhtmlxDataProcessor

dhtmlxDataProcessor add-in for dhtmlxGrid manages the process of loading/updating data on server side. It can be configured (with xml) for your particular datasource. Supports PHP4/5 with MySQL, ASP.NET with SQL Server. Its client side part can be used for any other server side technologies (we provide instructions for building server side processor).

Extended cell - eXcell

To allow greater flexibility, dhtmlxGrid uses unique mechanism called eXcell (extended Cell) to define data format and way of editing data for each column (cell). The grid control provides a wide variety of cell formats including text, image, combo box, list box, check box and radio buttons. If a cell contains multi-line text it can be edited with popup text editor or wrapped automatically in a cell.

Along with standard ways (text, combo box, check box, etc.) of column editing/formatting, there are special types of exCell included into dhtmlxGrid package. For example, above table uses specific eXcell type to represent dynamic data in Sales and Prices columns. For details about usage and creation of new eXcell please reffer to the documentation

Freezed Columns

As it's necessary sometimes to keep some columns always visible, independent of horisontal scrolling position, we implemented the ability to freeze columns and split grid into two parts keeping the ability to navigate in both parts simultaniously.

dhtmlxTreeGrid - grid and tree in one control

dhtmlxTreeGrid is JavaScript UI component that combines tree view and editable grid. It is based on our dhtmlxGrid, and deploys all the functionality of dhtmlxGrid control enabling both hierarchical and tabular data presentation.
For more information visit dhtmlxTreeGrid home page

*dhtmlxTreeGrid distributed as a standalone product (includes dhtmlxGrid) or as an extension to dhtmlxGrid (if you already got dhtmlxGrid).

Code Sample

See also our Java treetable applet - TreeTable.