This page contains structured information that will help you to start working with DHTMLX List and go into deep dive on its functionality.
How to start with DHTMLX List
In this section you can find out how to initialize List, how to load data into the component and how to integrate List into your applications.
|Learn how to initialize List
|Pagination with List
|The example shows how to initialize List inside Pagination
Loading data into List
|Loading data into List
|Read how to load the initial data into List
|Initialization with config.data
|The example shows how to load data into List on the initialization stage
|Initialization with data.load()
|The example shows how to load data from external file
|Initialization with data.parse()
|The example shows how to load data from a local data source
|Initialization with external DataCollection
|The example shows how to load data from external DataCollection
|Rendering a large data set
|Learn how to enable dynamic loading of data on scrolling the list (Example)
|The example shows how to render data dynamically
|Learn how to connect DHTMLX Suite to a backend (Demo)
|Learn how to use DHTMLX Optimus framework for creating DHTMLX-based app
(recommended framework for creating apps with Suite components)
|Learn how to use DHTMLX List with React (Demo)
|Learn how to use DHTMLX List with Angular (Demo)
|Learn how to use DHTMLX List with Vue.js (Demo)
How to configure List
In this section you will know how to configure the drag-n-drop functionality, how to activate inline editing and key navigation.
|Learn how to configure drag-n-drop of items between lists (Example)
|Copying items during drag-n-drop
|Learn how to copy an item to a target during drag-n-drop (Example)
|Learn how to enable inline editing in List (Example)
|Learn how to enable key navigation in List
How to customize List and change its size
In this section you can learn how to configure the height and style of List and its items.
|Height of List
|Learn how to set the height for List (Example)
|Height of a List item
|Learn how to set the height for List items (Example)
|Setting template for rendering items
|Learn how to define a template for rendering items in List (Example) and add event handlers to HTML elements of the template (Example)
|Rendering HTML content
|Learn how to display HTML content as plain text to prevent XSS attacks (Example)
|Learn how to customize List (Example)
|Styling selected List items
|Learn how to add custom style to the selected items (Example)
|Styling List items
|Learn how to customize List items (Example)
|CSS template A
|The example of a CSS template for DHTMLX List
|CSS template B
|The example of a CSS template for DHTMLX List
|List of CSS classes
|A set of CSS classes provided by the DHTMLX library
How to work with data in List
This section will tell you how to use DataCollection API for working with data of List, i.e. edit, add, remove, sort data, etc.
How to edit, add, remove data
In this section you may study how to add new data items into List, how to edit, update, or remove the items.
|Learn how to update List items using Form (Example)
|Adding new items
|Learn how to add new items into List using Form (Example)
|Updating an item
|Learn how to update data of an item (Example)
|Learn how to remove items from List (Example)
|Check the list of all available DataCollection API
How to sort and filter data
In this section you may study how to sort and filter data in List.
|Learn how to filter data in List (Example)
|Learn how to sort data in List (Example)
How to work with selection
In this section you may study how to work with selection functionality.
|Learn how to enable/disable selection on List initialization (Example)
|Learn how to enable/disable selection of multiple items (Example)
|Learn how to enable/disable the ability to select items via the selection object
|Learn how to select a particular item or all items (Example)
|Learn how to get the id or an object of a selected item (Example)
|Learn how to remove selection from a selected item(s)
How to work with item in focus
In this section you will learn how to set focus on an item and get the id/object of an item in focus.
|Setting focus on item
|Learn how to set focus on an item (Example)
|Getting an item in focus
|Learn how to get the id or an object of an item in focus
How to work with List events
This section explains how to work with List events.
|Event basic rules
|Learn basic rules on how to work with events
|Learn how to attach, detach, or call the List events (Example)
In this section you can find out corresponding references of List API.
|Check the list of List methods
|Check the list of List events
|Check the list of List properties
|Check the API of DataCollection to work with List data
In this section you will learn about common functionality of the library which can be useful while working with List.
|Learn how to work with touch support
|Learn how to work with TypeScript
|Learn how to use custom scroll in List
|Learn how to perform the code after the component’s rendering
Any questions left?
Do you need more functionality? Feel free to share your suggestions in the comments below!