dhtmlxGrid is a cross-browser JavaScript grid control that represents structured data in a sortable table. This component allows you to design comfortable user interface by organizing your data into configurable dynamic grid with different cell types, client-side sorting, resizable columns, powerful API and other handy features.
Grid content can be imported from XML data source or created using JavaScript methods. The component enables flexible data sorting (string/integer/date) in ascending or descending order by clicking column header. Table data can be sorted and updated without page reload because grid is 100% client-side solution and loads data dynamically using AJAX.

Double-click or [F2] on cell to edit. [Tab] to navigate through cells, [Up/Down] - to navigate through rows
Select multiple rows using [Shift/Ctrl]


This DHTML grid control has vertical and horizontal scroll bars in order to fit and display any size of table in limited space. Buffering and Dynamical Loading are powerful features which increase the performance of tables with great number of records. The main advantage of those mechanisms is in the ability of the table data to be loaded dynamically from server and to be rendered dynamicaly on client side while scrolling through the table. Using these features together or separately you can significantly reduced the time for loading big tables.
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 dinamic data in Sales and Prices columns.
Simple and comfortable 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 any external component as cell editor, providing great opportunity to enrich grid functionality.
Additionaly, if you already use our dhtmlxTree or dhtmlxMenu, it will be comfortable for you to use dhtmlxGrid either, as the API structure is similar.

Supported Browsers:

  • IE 5.x and above
  • Mozilla 1.4 and above
  • FireFox 0.9 and above
  • Features:*

  • Multibrowser/Multiplatform support
  • Full controll with JavaScript API
  • Dynamic loading while scrolling
  • Content Buffering
  • XML support
  • Checkboxes, radiobuttons
  • Selectbox, combobox
  • Ability to create any editor or cell formating (using eXcell - eXtended cell object)
  • User data for nodes/entire grid
  • Async mode loading support (AJAX)
  • Resizable columns
  • Clinet-side sorting(string,integer,date)
  • Wide range of event handlers
  • Detailed documentation
  • Licensing

  • Open Source - GPL
  • Commercial License: in order to use any edition of dhtmlxGrid in a commercial project or to have support you can purchase a Commercial License ($149). Contact us to buy.
  • Download:

  • Full package (v.1.0)
  • Documentation only
  • Examples:

  • Initialize object
  • Use API
  • Add/Delete rows
  • Attach events
  • Setting cells and columns properties
  • Setting Grid styles
  • Dynamical loading while scrolling and Buffering
  • Documentation:

  • API Functions and Documentation

  • Download latest version of javascript grid source code

    Code Sample

    <link rel="STYLESHEET" type="text/css" href="dhtmlXGrid.css"> <script src="dhtmlXCommon.js"></script> <script src="dhtmlXGrid.js"></script> <script src="dhtmlXGridCell.js"></script> <script> var mygrid = null; function doOnLoad(){ mygrid = new dhtmlXGridObject('gridbox'); mygrid.setImagePath("imgs/"); mygrid.setHeader("Sales,Book Title,Author,Price,In Store,Shipping,Bestseller,Date of Publication"); mygrid.setInitWidths("50,150,120,80,80,80,80,200") mygrid.setColAlign("right,left,left,right,center,left,center,center") mygrid.setColTypes("dyn,ed,ed,price,ch,coro,ra,ro"); mygrid.setColSorting("int,str,str,int,str,str,str,date") mygrid.setColumnColor("white,#d5f1ff,#d5f1ff") mygrid.init(); mygrid.loadXML("xml/grid.xml"); } </script> <body onload="doOnLoad()"> <div id="gridbox" height="250"></div>

    See also our Java treetable applet - TreeTable.