< Suite 6.3 Rolls Out Grid Keyboard Navigation, Custom HTML Content, and Ajax Helper

React List

Convenient React list component with dynamic rendering, drag-n-drop, and multiple customization options.
Part of the advanced 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 React List with DHTMLX

The following 5 steps are simple instructions for building a React listview:
1
Create a List.js file and import files and styles of List
2
Create List class, which extends the Component class
3
Add an empty container for List with the reference to it in the el property using the ref property
4
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
5
Specify a set of configuration properties if needed

Why Choose DHTMLX React List Control?

picture for features

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.

picture for features

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.

picture for features

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:

demo-screenshot

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

Try All UI Components for Free

All UI components for React 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

Compatibility with React, Angular, and Vue.js

Need help with dhtmlxList integration into your app? Contact us