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
Listview - Basic
React Listview demo for creating a simple list of items. Add stripes for alternating background colors of list items. For React and Ionic React.
Listview - Content
React Listview demo for rendering different types of content. Use it for multi-line text, cards or any content with custom CSS. For React and Ionic React.
Listview - Image/Icon/Avatar
React Listview image demo for rendering content with regular images, icons and avatars. Customize it with custom CSS. For React and Ionic React.
Listview - Selecting items
React Listview item selection example. Select a single item or enable multiple selection for batch operations. For React and Ionic React.
Listview - Sorting & ordering
React Listview reorder demo. Grab and sort from drag handle on the left or right side, or tap/click and hold to sort. For React and Ionic React.
Listview - Grouping
React Listview demo with group headers. Use it to logically segment and group items without creating multiple lists. For React and Ionic React.
Listview - Create, Read, Update, Delete
React Listview demo with CRUD operations & swipe actions. Slide right to update and left to delete items. For React and Ionic React.
Listview - Remove/Undo
React Listview demo with swipe-away delete and built-in undo functionality. Use it for laying out notifications or any data. For React and Ionic React.
Listview - Swipe actions
React Listview demo with swipe revealing actions. Render an action list or action menu when sliding items left and right. For React and Ionic React.
Listview - Hierarchy
React Listview with multi-level hierarchy and drill-down interface. Featuring images, icons and text. For React and Ionic React.
Listview - Checklist
React Drag & Drop checklist/tasklist with swipe actions to add/remove items from todo listview. Sorting is supported. For React and Ionic React.
Listview - Filtering
React Listview demo with dynamic data and live filtering. Add and remove items on the fly or reload the full list. For React and Ionic React.
Listview - Data sources
React Listview demo with different ways of getting and passing data. Supporting hardcoded lists, dynamic and remote data. For React and Ionic React.
Listview - Load on demand
React Listview load on demand demo. Load data from a REST service and populate the list as users scroll content. For React and Ionic React.
Listview - Load more
React Listview demo with load more button for loading additional items from a REST service. Get and display records from JSON. For React and Ionic React.
Listview - Master-detail view
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.
navigation component for the tabs and cards for building the layout of the details view.
Listview - Event handlers
React Listview demo with event hooks for deep integration and custom functionality. With source code. For React and Ionic React.
Looking for something you didn't see or have a sales question? Ask us about it, we're here to help. Ask us anything