English | Русский
DataTable

DataTable is a powerful JavaScript grid control built with an innovative approach and the latest web development trends in mind.

Incredibly Fast

This JavaScript table is able to process large amounts of data quickly. Webix grids with a large number of rows and columns are loaded in the blink of an eye. Speed tests showed that DataTable loads 1,000 rows and columns 10 times faster than other grid libraries currently on the market.

Incredibly fast DataTable

Fully Editable

DataTable is a JavaScript editable table that allows seamless data entries. By clicking any of the cells, you can easily edit its contents, select/deselect particular items using checkboxes, or choose any value from a list by means of a drop-down menu.

Fully Editable DataTable

Rowspan and Colspan in DataTable

Thanks to rowspan and colspan functionality you may present even complex data in a readable form just like in HTML tables.

colspan in DataTable

TreeTableView Demo

DataTable supports the display of tree-like structures, similar to what Tree offers. This table grid allows the creation of an unlimited number of nested expandable subtrees that add hierarchical structure to a table. Any cell in this JavaScript grid can be used as a root. Data can also be filtered according to definite criteria you specify.

TreeTable extension for DataTable
View demo

Support for Popular Data Formats

DataTable can load data from XML, JSON and CSV files and also allows you to use your own formats of data. XML and JSON data formats are easily customizable so you can use DataTable with your existing web-services.

Use with jQuery

DataTable provides built-in integration with jQuery framework. You can easily use it as a jQuery plug-in to add a fast and full-featured data grid on any web page. You can also apply jQuery UI skins as needed.

Integration with jQuery

Header Menu in DataTable

By clicking on the header menu item with the name of a column you can make the corresponding grid column either visible or invisible.

header menu in DataTable

Easy Styling with CSS

The appearance of DataTable is defined fully with CSS, making the JavaScript grid easily customizable.

Easy Styling with CSS

Advanced Editors in DataTable

Pro DataTable can be used with such complex editors as Multi-select editor, Grid Suggest Editor and DataView Suggest Editor. Multi-select editor allows selecting several options for the edited cell, while Grid editor and DataView editors let you choose the necessary variant from Grid and DataView data, respectively.

grid suggest editor in DataTable

Clipboard SupportView Demo

Th widget provides the ability to copy/paste data to and from the clipboard so you can easily exchange the grid data with desktop apps like Excel. The clipboard’s support is sustainable in all the latest web browsers, including IE8+, Mozilla Firefox, Opera, Chrome and Safari. In addition, it is possible to export DataTable data to Excel and PDF.

Clipboard support
View demo

Grouped Columns

This in-built feature will allow Webix users to expand or collapse multiple columns with just one click. You can define a group of columns yourself and then customize its behaviour.

grouped columns in DataTable

Saving current DataTable state

This feature makes it possible to save the widget’s state to cookie, local or session storage and then restore it in the next session. The information on all operations performed in the widget will be saved, which will prevent the users of your app from losing some important data.

Ready for Touch Devices

This open source javascript grid can be used in mobile web apps that run on touch devices. The user interface is optimized for touch screens; the JavaScript table grid looks good on small screens, scrolls work as expected and all events are processed perfectly.

Advanced filter

With DataTable advanced filtering functions, you can edit grid’s content either by selecting the appropriate option from a dropdown list (rich-select filter) or even several options at once (multi-select filter), or by entering the necessary date with the help of the in-built calendar.

multi-select filter in DataTable

Resizable columns and rows

Column and row height and width can be changed by dragging the vertical and horizontal borders of the table.

Fully Resizable

SortableView Demo

DataTable data can be sorted with a single click on the header of a column.

Sortable data
View demo

Vertical headers

You can place text in Webix Pro datagrid not only horizontally, but also vertically. Such a text arrangement will help you save space and place more info in your DataTable.

Fixed AreasView Demo

You can create a grid with two frozen areas on the left and right sides with scrollable columns in between.

Fixed Areas
View demo

Select Rows and Columns

DataTable supports different modes, allowing you to select data by cell, row, and column. You can also select multiple cells, rows and columns by holding the Ctrl key. You can also click and drag across the cells to select a block of cells.

Selected rows and columns in DataTable

Browsers Compatibility

DataTable is compatible with all modern browsers, including IE8+, the latest versions of Mozilla Firefox, Opera, Chrome and Safari.

Windows and Popups
Uploader
Development Tools