< Suite 6.2 with New Grid & TreeGrid Editors, Row Drag-n-Drop, Flexible Columns, and Much More

JavaScript ListView Control

dhtmlxList is a robust JavaScript ListView with dynamic rendering and vast opportunities for customization.
Part of the leading-edge Suite UI library.

All Books
My Library
You can drag & drop books between lists

Product Features

  • Cross-browser compatibility
  • Support for IE11+
  • Rich JavaScript API
  • Flexible customization
  • Custom templates for list items
  • Drag-n-drop of single and multiple items
  • Inline editing
  • Dynamic rendering
  • Filtering
  • Sorting
  • Arrow keys navigation
  • Data loading in the JSON format
  • Multiselection of items

How to Create a List in JavaScript

Take 5 quick steps to build a modern HTML listview control:
1
Create an HTML file
2
Include the ListView source files in the header
3
Add a container with an id - e.g. “list_container”
4
Initialize the widget with the dhx.List object constructor
5
Add the configuration properties you need and load data

Why Choose DHTMLX JavaScript ListView Control?

picture for features

Create a robust JavaScript ListView

dhtmlxList enables displaying items in a list based on a custom template. If a large amount of data is processed, you can make use of dynamic rendering, which will speed up your app. The control provides support for drag-n-drop of items between lists. End users may benefit from a convenient arrow keys navigation.

picture for features

Configure the control to meet your needs

Due to the comprehensive JavaScript API, you can set all the necessary configuration options to fine-tune your list control. It takes just a couple of lines of code to specify the height of items and of the entire list. Besides, you can use a custom template to define how items of your list will look like.

picture for features

Apply custom styling to achieve the desired looks

Just like all other DHTMLX UI components, our listview control has very flexible customization options allowing you to change its look and feel the way you need. Every aspect of its appearance can be modified: background, borders, etc. On top of all, you can choose which particular items to style. For example, color all even cells in grey.

Integrate dhtmlxList into your Angular, React, or Vue.js apps

As Angular, React, and Vue.js are gaining more and more popularity among developers, we’ve prepared special wrappers for a smooth integration of dhtmlxList into your apps based on these frameworks. To try it out, get a 30-day trial version of the Suite UI library and make use of our extensive documentation and technical support team assistance.

Support & Learning Resources

We provide comprehensive documentation with technical samples. Moreover, our dedicated support team is fast and qualified. Find the suitable way to get support:

demo-screenshot

File manager built with the help of Suite components: Layout, Grid, DataView, Toolbar, etc.

Try All UI Components for Free

All JavaScript UI components are part of the dhtmlxSuite library. You can download the free trial version of Suite and benefit from:

30 days of free evaluation

Official technical support

Full toolkit of 21 components

PRO features

Need help with dhtmlxList integration into your app? Contact us