React List

Name: React List Control - dhtmlxList
Rating: 4.7 (34 reviews)

Convenient React list component with dynamic rendering, drag-n-drop, and multiple customization options.
Part of the advanced Suite UI library.

Download

View more demos

Compatible with:

Vue.js

JavaScript

Angular

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
Accessibility support

How to Create a React List with DHTMLX

The following 5 steps are simple instructions for building a React listview:

Create a List.js file and import files and styles of List

Create List class, which extends the Component class

Add an empty container for List with the reference to it in the el property using the ref property

When the component is initialized, initialize List and attach the instance of List to the container with the reference to it in the el property

Specify a set of configuration properties if needed

Check the demo on Github

Why Choose DHTMLX React List Control?

Build a flexible React listview

dhtmlxList makes possible to collect multiple items with similar properties within a single container and organize it in a list form based on a custom template. The component provides dynamic data rendering to speed up your app performance while working with large data sets. You can set up multiselection, drag-n-drop between lists, and arrow keys navigation.

Fine-tune your React list component

DHTMLX API provides a comprehensive list of methods and properties to configure the React component according to your needs. You can activate editing mode, specify the behavior of a dragged item, set its size as well as the height of the entire list. Our users are able to apply their custom templates to define item appearance.

Customize the element look as you want

Being a part of the DHTMLX UI library, our React JS list offers flexible customization options to entirely modify its look and feel. You can change every part of its appearance, style particular cells, e.g. assign specific colors, and even add new CSS classes with custom configurations to the React list component.

Make dhtmlxList compatible with Angular and Vue.js

We provide wrappers to the most popular and widely-used web frameworks. Enjoy smooth dhtmlxList integration into apps based on React, Angular, and Vue.js. Get the React list component as a part of the dhtmlxSuite library by downloading a free 30-day trial version.

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: