JavaScript List UI Widget

JavaScript List is a UI widget that distinctly presents listed data items. It performs exceptionally well with thousands of data records and supports single and multiple selections of list items. List JS also enables you to make all possible CRUD operations with the data inserted into the widget.

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

Editing

Besides viewing some info in the ordered way, List allows users to edit existing data. Just click the required item of the list and change its value the way you wish.

Click on any item to open the editor

Validation

Webix allows you to validate one record or all data set against predefined validation rules. If there's an unacceptable value, the corresponding item will be highlighted. You can also display a warning message on the screen.

Try editing the item coloured in pink

Grouplist

Grouplist allows presenting a list of data items grouped by category. Data grouping is hierarchical, which means that any group item can start its own group. Moreover, you can sort and filter all Grouplist items with no effort.

Click on the list item to see its group

X-list

This UI-related JavaScript pagelist presents an offbeat way of data presentation. While standard lists arrange items vertically, the X-list offers horizontal patterning while keeping all the list functions.

List with a fixed width and custom CSS for items

Unitlist

Unitlist enables the presentation of data in groups derived from initial non-hierarchical datasets. With this UI widget, data items are sorted and then united by common values. Unitlist helps you to cope with a large amount of messy information by organizing it into small groups.

Paging Ability in JavaScript List widget

You can add animated paging to the Webix JavaScript List. It will help your end user promptly find important information.

Click on the 'Next' button

Filtering

You can easily filter the data contained in Webix List JS widget. It also allows you to find important items quickly.

Type in the input fields to filter the lists

Work with the Clipboard

This JavaScript List widget enables you to copy and paste list items and other HTML objects easily by using familiar hot keys.

Use 'Ctrl+C' and 'Ctrl+V' to copy and paste list items

Drag-and-Drop

Widget allows performing drag-and-drop operations not only within List itself, but also between List and Datatable, Treetable, Datatree, Dataview and even between two JavaScript Lists.