- Fully editable
- Saving current Data Table state
- Drag-n-drop for rows
- Drag-n-drop for columns
- Clipboard support
- Resizable columns and rows
- Fixed areas
- Area selection
- Advanced editors in Data Table
- Advanced filters
- Rowspan and colspan
- Header menu
- Grid grouping
- Vertical headers
- Subrows and subviews
Click on any cell to edit it
Table items can be sorted with a single click on the header of a column. You can use DataTable sort function for specific sorting behaviour.
Click on any header to sort the grid
Table items can be filtered with the help of built-in filters in column headers. You can use DataTable filter function for specific filtering pattern.
Fill in all the empty cells
If your DataTable works with a big data set, it will be more convenient to split it into several pages. Customizable numeric and directional controls provide easy navigation through available parts of the table.
Click on the buttons to browse grid pages
Saving current Data Table state
This feature makes it possible to save the DataTable state to cookie, local or session storage and then restore it after page reload. The information about all the operations performed in the widget will be saved, which will prevent the users from losing the state of their DataTable.
Perform actions over the table (resize, filter, sort, show and hide) and refresh the page
Drag-n-drop for rows
You can change the order of the rows by dragging them to a particular position. The 'order' mode allows you to define whether the items can or cannot be dragged out of the table boundaries. If you have two grids on the page, you can move items from one table to another, and the remaining items will be rearranged automatically. Advanced configuration allows you to deny dragging of specific items, disable dropping rows to specific positions, etc.
Drag-n-drop between tables
Drag-n-drop for columns
Drag a header to move the column
The widget provides the ability to copy/paste data to and from the clipboard, so you can easily exchange the data between the tables. The clipboard support is sustainable in all the latest web browsers, including IE8+, Mozilla Firefox, Opera, Chrome and Safari. In addition, it is possible to paste DataTable data into an Excel document.
Use 'Ctrl+C' and 'Ctrl+V' to copy and paste cell content
Resizable columns and rows
Column and row dimensions can be changed by dragging vertical and horizontal borders of the table cells.
Hover the mouse over any border, then drag the resizer to change the size of a column or row
You can create a DataTable with frozen areas that will preserve their position during scrolling.
Scroll the table horizontally
DataTable supports the display of tree-like structures, similar to what Tree offers. This Table Grid widget allows the creation of an unlimited number of nested expandable subtrees that add hierarchical structure to the table. Data in such structures can be filtered according to the specific levels.
Besides standard selection modes (by cell, row or column), DataTable allows selecting by a specific cell area. You can click and drag across the cells to select a block of cells and use the Shift key to extend the selected area.
Click on any cell and drag to select an area
Advanced editors in Data Table
Use 'richselect' editor for titles and 'combo' editor for years.
With DataTable advanced filtering functions you can edit grid contents by either selecting the appropriate option(s) from a dropdown list (rich-select, multi-select filters), or by entering the necessary date via the built-in calendar.
Filter the grid
Rowspan and colspan
Thanks to rowspan and colspan functionality, you can present complex data in a readable form just like in HTML tables.
By clicking on the header menu item, you can hide or show the corresponding grid column.
Right click on any header
This built-in feature allows Webix users to expand or collapse multiple columns with a single click. You can define a group of columns yourself and then customize its behaviour.
Click on 'plus' and 'minus' icons in the header
You can arrange text in headers not only horizontally, but also vertically. Such text rotation will help you save space and place more info into your Data Table.
Subrows and subviews
A DataTable row can be equipped with subrows or subviews that will be displayed below the related rows. You can use a template to define the contents of a subrow, while a subview can contain any Webix widget. You can collapse/expand subrows and subviews by clicking the icon in the parent row.
Click on 'arrow' icons to show subrows/subviews