Listview for Javascript
Updated on May 17, 2021
Advanced list view component with gesture, swipe and drag & drop support.
Use it along Mobiscroll forms, pages or in any web or mobile hybrid app. Suited for small to large screens.
Shipping with useful features for a refined UX, including:
- Support for alternating row color
- Use it with single, multi-line text or custom content
- Render cards instead of full-width rows
- Enhance content with images, avatars and icons
- Built-in support for sorting and ordering
- Multiple data-source support
- Load on demand capabilities
- Top positioned sticy header for segmenting the list
- Simple to advanced grouping capabilities
- CRUD with undo functionality
- Full-blown gesture support
- Hierarchical listviews with variable depth
- Multiple theme support
As part of Gesture enabled listview it can be picked up with the Framework and Complete licenses or with the component license.
Listview available for other frameworks.
Viewing demos & code for
plain Javascript
Listview - Basic
Change demo
Basic
Download and try example
Javascript Listview demo for creating a simple list of items. Add stripes for alternating background colors of list items. Plain JS api for usage everywhere.
Copy code
Listview - Content
Change demo
Content
Download and try example
Javascript Listview demo for rendering different types of content. Use it for multi-line text, cards or any content with custom CSS. Plain JS api for usage everywhere.
Copy code
Listview - Image/Icon/Avatar
Change demo
Image/Icon/Avatar
Download and try example
Javascript Listview image demo for rendering content with regular images, icons and avatars. Customize it with custom CSS. Plain JS api for usage everywhere.
Copy code
Listview - Selecting items
Change demo
Selecting items
Download and try example
Javascript Listview item selection example. Select a single item or enable multiple selection for batch operations. Plain JS api for usage everywhere.
Copy code
Listview - Sorting & ordering
Change demo
Sorting & ordering
Download and try example
Javascript Listview reorder demo. Grab and sort from drag handle on the left or right side, or tap/click and hold to sort. Plain JS api for usage everywhere.
Copy code
Listview - Sticky header
Change demo
Sticky header
Download and try example
Javascript Listview demo with sticky header. List out names or contacts grouped alphabetically with the first letter on top. Plain JS api for usage everywhere.
Copy code
Listview - Grouping
Change demo
Grouping
Download and try example
Javascript Listview demo with group headers. Use it to logically segment and group items without creating multiple lists. Plain JS api for usage everywhere.
Copy code
Listview - Create, Read, Update, Delete
Change demo
Create, Read, Update, Delete
Download and try example
Javascript Listview demo with CRUD operations & swipe actions. Slide right to update and left to delete items. Plain JS api for usage everywhere.
Copy code
Listview - Remove/Undo
Change demo
Remove/Undo
Download and try example
Javascript Listview demo with swipe-away delete and built-in undo functionality. Use it for laying out notifications or any data. Plain JS api for usage everywhere.
Copy code
Listview - Swipe actions
Change demo
Swipe actions
Download and try example
Javascript Listview demo with swipe revealing actions. Render an action list or action menu when sliding items left and right. Plain JS api for usage everywhere.
Copy code
Listview - Hierarchy
Change demo
Hierarchy
Download and try example
Javascript Listview with multi-level hierarchy and drill-down interface. Featuring images, icons and text. Plain JS api for usage everywhere.
Copy code
Listview - Checklist
Change demo
Checklist
Download and try example
Javascript Drag & Drop checklist/tasklist with swipe actions to add/remove items from todo listview. Sorting is supported. Plain JS api for usage everywhere.
Copy code
Listview - Filtering
Change demo
Filtering
Download and try example
Javascript Listview demo with dynamic data and live filtering. Add and remove items on the fly or reload the full list. Plain JS api for usage everywhere.
Copy code
Listview - Data sources
Change demo
Data sources
Download and try example
Javascript Listview demo with different ways of getting and passing data. Supporting hardcoded lists, dynamic and remote data. Plain JS api for usage everywhere.
Copy code
Listview - Load on demand
Change demo
Load on demand
Download and try example
Javascript Listview load on demand demo. Load data from a REST service and populate the list as users scroll content. Plain JS api for usage everywhere.
Copy code
Listview - Load more
Change demo
Load more
Download and try example
Javascript Listview demo with load more button for loading additional items from a REST service. Get and display records from JSON. Plain JS api for usage everywhere.
Copy code
Listview - Master-detail view
Change demo
Master-detail view
Download and try example
Build a two pane master-detail view with the help of the listview. Use the grid layout to set up the two columns - left side for a list of names, right side for showing the details. If you want to get into the details you could even hide the first column and build a drawer or use a hamburger menu for the master list.
Use the navigation component for the tabs and cards for building the layout of the details view.
Want to learn more about building responsive layouts?
Check out the grid layout →
Copy code
Listview - Event handlers
Change demo
Event handlers
Download and try example
Javascript Listview demo with event hooks for deep integration and custom functionality. With source code. Plain JS api for usage everywhere.
Clear event log
EVENTS FIRED:
Copy code
Looking for something you didn't see or have a sales question?
Ask us about it, we're here to help.