Functionality
- Fully editable
- Sortable
- Filtering
- Validation
- Paging
- Saving current Data Table state
- Drag-n-drop for rows
- Drag-n-drop for columns
- Clipboard support
- Resizable columns and rows
- Fixed areas
- TreeTable
- Area selection
- Advanced editors in Data Table
- Advanced filters
- Rowspan and colspan
- Header menu
- Grid grouping
- Vertical headers
- Sparklines
- Subrows and subviews
Fully editable
JavaScript editable table allows seamless data entry. By clicking any cell you can easily edit its contents by typing the new data into the input field or selecting any value from a drop-down list.
Click on any cell to edit it
Sortable
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
Filtering
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.
Validation
JavaScript Table allows you to check the correctness of the inserted data. Using the validation feature, you can check whether the value in a particular cell of the table corresponds to the predefined rule. If it doesn’t, the line with invalid data will be highlighted and a user will get a warning message.
Fill in all the empty cells
Paging
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
You can enable drag-and-drop for the columns of your JavaScript Table. You can enable the 'order' mode to disable dragging the columns out of the table boundaries.
Drag a header to move the column
Clipboard support
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
Fixed areas
You can create a DataTable with frozen areas that will preserve their position during scrolling.
Scroll the table horizontally
TreeTable
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.
Area selection
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
JavaScript Table can be used with such complex editors as Multi-select editor, Grid Editor and DataView Editor. Multi-select editor allows selecting several options for the cell being edited, while Grid editor and DataView editors let you choose the necessary option from DataTable and DataView respectively.
Use 'richselect' editor for titles and 'combo' editor for years.
Advanced filters
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.
Header menu
By clicking on the header menu item, you can hide or show the corresponding grid column.
Right click on any header
Grid grouping
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
Vertical headers
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.
Sparklines
Sparklines allow adding small graphs to the JavaScript Table widget. You can choose one of the available Sparkline types: Line, Area, Bar, Spline, SplineArea, or Pie. You can define tooltips that will appear on the screen when users move the cursor over the graph item. You can change the Sparklines appearance by setting a particular color for its items. Besides the DataTable Sparklines can be used with other widgets such as List.
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