JavaScript Table UI Widget

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

live demo

  • Integration: jQuery, Angular, React, Vue.js, Backbone
  • Samples of PHP, Node.js, .NET integration
  • Cross-browser Support (IE8+)
  • Ready for Touch Devices
  • Meets Section 508
  • Quick styling with CSS

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 'plus' icons to show subrows/subviews