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. This JavaScript Table is able to process large amounts of data quickly. Webix grids with a large number of data are loaded in the blink of an eye. DataTable supports integration with jQuery and Angular frameworks. You can easily use it as a jQuery plug-in to add a fast and full-featured data grid on any web page. Check out JavaScript Tree Table UI widget if you need to you need to combine Data and Tree.

Use with jQuery

JavaScript Table provides built-in integration with jQuery framework. You can easily use it as a jQuery plug-in to add a fast and full-featured data grid on any web page. You can also apply jQuery UI skins as needed.

JavaScript Table integration with jQuery

Fully Editable

The widget allows seamless data entries. By clicking any of the cells, you can easily edit its contents, select/deselect particular items using checkboxes, or choose any value from a list by means of a drop-down menu.

Fully Editable JavaScript Table widget

SortableView Demo

Table items can be sorted with a single click on the header of a column. You can use DataTable sort function for big data sets.

Sortable data in DataGrid UI widget
View demo

ValidationView Demo

The same as other data management components, 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 that contains invalid data will be highlighted, and a user will get a validation message.

PagingView Demo

If your DataTable works with big data sets, it will be more convenient to separate it into several pages. Customizable numeric and direction controls provide easy navigation through available parts of the table.

Saving Current JavaScript Table StateView Demo

This feature makes it possible to save the widget’s state to cookie, local or session storage and then restore it in the next session. The information on all operations performed in the widget will be saved, which will prevent the users of your app from losing some important data.

Drag-n-Drop for RowsView Demo

You can change the order of the rows by dragging them to a particular position. The 'order' mode allows you to define if an item can or can not be dragged out of the grid boundaries. If you have two grids on a page, you can move an item from one grid to another, and 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 for ColumnsView Demo

You can enable drag-and-drop support for the columns of your JavaScript Table. According to your needs, you can enable the 'order' mode to disable dragging the columns out of the table boundaries.

Clipboard SupportView Demo

Th widget provides the ability to copy/paste data to and from the clipboard so you can easily exchange the grid data with desktop apps like Excel. The clipboard’s support is sustainable in all the latest web browsers, including IE8+, Mozilla Firefox, Opera, Chrome and Safari. In addition, it is possible to export DataTable data to Excel and PDF.

Clipboard support in DataTable JS
View demo

Resizable Columns and RowsView Demo

Column and row height and width can be changed by dragging the vertical and horizontal borders of the table.

Fully Resizable JavaScript Data Grid
View demo

Fixed AreasView Demo

You can create a DataTable with frozen areas. Frozen Rows functionality is available only in PRO version.

Fixed Areas in JavaScript Table
View demo

Area Select FunctionView Demo

DataTable select function supports different modes, allowing you to use select data by cell, row, and column. You can also select multiple cells by holding the Ctrl key. It's possible click and drag across the cells to select a block of cells.

Selected rows and columns in DataTable
View demo

Advanced Editors in Data TableView Demo

JavaScript Table can be used with such complex editors as Multi-select editor, Grid Suggest Editor and DataView Suggest Editor. Multi-select editor allows selecting several options for the edited cell, while Grid editor and DataView editors let you choose the necessary variant from Grid and DataView data, respectively.

grid suggest editor in JavaScript Data Table
View demo

Advanced FilterView Demo

With JavaScript DataTable advanced filtering functions, you can edit grid’s content either by selecting the appropriate option from a dropdown list (rich-select filter) or even several options at once (multi-select filter), or by entering the necessary date with the help of the in-built calendar.

multi-select filter in JS Table
View demo

Rowspan and ColspanView Demo

Thanks to rowspan and colspan functionality, you may present even complex data in a readable form just like in HTML tables.

Colspan and Rowspan in JavaScript Grid
View demo

TreeTableView Demo

DataTable supports the display of tree-like structures, similar to what Tree offers. This table grid allows the creation of an unlimited number of nested expandable subtrees that add hierarchical structure to a table. Any cell in this JavaScript grid can be used as a root. Data can also be filtered according to definite criteria you specify.

TreeTable extension for Table
View demo

Header MenuView Demo

By clicking on the header menu item with the name of a column, you can make the corresponding grid column either visible or invisible.

Grid GroupingView Demo

This in-built feature will allow Webix users to expand or collapse multiple columns with just one click. You can define a group of columns yourself and then customize its behaviour.

grouped columns in Data Grid
View demo

Vertical HeadersView Demo

You can place text in datagrid not only horizontally, but also vertically. Such text arrangement will help you save space and place more info in your DataTable.

SparklinesView Demo

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 the user will move the cursor over the graph item. There’s a possibility to 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, for example.

SubrowsView Demo

A Grid row can be equipped with a subrow. It will be displayed after the row. To define the content of a subrow, you can use templates with the names of data properties to display. The content of a subrow will be dynamically re-rendered after you change the related data item. If you enable the autoheight feature, the subrow will automatically adjust its height according to the text it contains.

Integration with Frameworks

JavaScript DataTable can be integrated with jQuery, Angular, React, Vue.js, Backbone frameworks.

Accessibility

The JS Table meets the main requirements of the WAI standards and presupposes equal access to web resources for people with diverse abilities.

Support for Popular Data Formats

DataTable can load data from JSON, XML, JSArray, CSV files and also allows you to use your own formats of data, so you can use DataTable with your existing web-services.

Easy Styling with CSS

The appearance of DataTable is defined fully with CSS, making the JavaScript Table widget easily customizable.

Easy Styling with CSS

Browsers Compatibility

Grid widget is compatible with all modern browsers, including IE8+, the latest versions of Mozilla Firefox, Opera, Chrome and Safari.

Windows and Popups
Uploader