JavaScript DataTable Web Widget – Webix HTML5 DataGrid Control

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.

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.

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.

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.

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.

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.

Javascript drag and drop table row

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 and drop for columns in datatable

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.

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 IE11, Mozilla Firefox, Opera, Chrome and Safari. In addition, it is possible to paste DataTable data into an Excel document.

Resizable columns and rows

Column and row dimensions can be changed by dragging vertical and horizontal borders of the table cells.

Fixed areas

You can create a DataTable with frozen areas that will preserve their position during scrolling.

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.

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.

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.

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.

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.

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.

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.