DataTable (or DataGrid) is a powerful JS grid control built with an innovative HTML5 based approach and the latest web development trends in mind. It is used to work with table data, starting from compact table forms to complex tables with numerous BigData controls. This ready-made Webix element contains a large number of features and settings. Deep optimization provides the best rendering speed among similar solutions.
live demo
Well-prepared JS component for the integration
Integration of the app occurs with a few rows of code.
Features reach Kanban component
Drag-n-drop support, filters, tasks grouping, contextual menu, and other.
Lightning rendering speed
Super small size of the component and pure JavaScript code.
Documentation, samples, technical support
Professional product with a detailed documentation and technical support service.
Functionality
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
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.
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
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
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
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
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
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 Edge Chromium, 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
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
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.
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
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.
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.
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
DataTable related articles
Create rich user interfaces with Webix UI library
