Listview for React

Learn more

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


Listview available for other frameworks.

Viewing demos & code for

light
dark

Change the theme setting here

Listview - Basic

Change demo
Basic
React Listview demo for creating a simple list of items. Add stripes for alternating background colors of list items. For React.
mobiscroll.settings = {
    lang: '',
    theme: ''
};

class ListItem extends React.Component {
    render() {
        return <li>{this.props.item.title}</li>;
    }
}

class ListItem2 extends React.Component {
    render() {
        return <li>{this.props.item.title}</li>;
    }
}

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            movies: [
                { id: 1, title: 'The Shawshank Redemption (1994)' },
                { id: 2, title: 'The Godfather (1972)' },
                { id: 3, title: 'The Godfather: Part II (1974)' },
                { id: 4, title: 'The Dark Knight (2008)' },
                { id: 5, title: '12 Angry Men (1957)' },
                { id: 6, title: 'Schindler\'s List (1993)' },
                { id: 7, title: 'The Lord of the Rings: The Return of the King (2003)' },
                { id: 8, title: 'Pulp Fiction (1994)' }
            ],
            moreMovies: [
                { id: 1, title: 'The Good, the Bad and the Ugly (1966)' },
                { id: 2, title: 'Fight Club (1999)' },
                { id: 3, title: 'The Lord of the Rings: The Fellowship of the Ring (2001)' },
                { id: 4, title: 'Forrest Gump (1994)' },
                { id: 5, title: 'Star Wars: Episode V - The Empire Strikes Back (1980)' },
                { id: 6, title: 'Inception (2010)' },
                { id: 7, title: 'The Lord of the Rings: The Two Towers (2002)' },
                { id: 8, title: 'One Flew Over the Cuckoo\'s Nest (1975)' }
            ]
        };
    }
    render() {
        return (
            <mobiscroll.Form>
                <mobiscroll.FormGroup>
                    <mobiscroll.FormGroupTitle>Simple</mobiscroll.FormGroupTitle>
                    <mobiscroll.Listview
                        itemType={ListItem} 
                        data={this.state.movies}
                    />
                </mobiscroll.FormGroup>
                <mobiscroll.FormGroup>
                    <mobiscroll.FormGroupTitle>Striped</mobiscroll.FormGroupTitle>
                    <mobiscroll.Listview
                        itemType={ListItem2} 
                        data={this.state.moreMovies}
                        striped={true}
                    />
                </mobiscroll.FormGroup>
            </mobiscroll.Form>
        );
    }    
}

<div id="content"></div>

Listview - Content

Change demo
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.
mobiscroll.settings = {
    lang: '',
    theme: ''
};

class MultilineItem extends React.Component {
    render() {
        return <li> 
            <h3>{this.props.item.title}</h3>
            <p>{this.props.item.text}</p>
        </li>;
    }
}

class CustomItem extends React.Component {
    render() {
        return <li> 
            {this.props.item.title}
            <span className="md-star-icon mbsc-ic mbsc-ic-star3">
                {this.props.item.rate}
            </span>
        </li>;
    }
}

class CardsItem extends React.Component {
    render() {
        return <li> 
            <mobiscroll.Card> 
                <mobiscroll.CardContent>
                    <mobiscroll.Avatar src={this.props.item.img} />
                    <mobiscroll.CardTitle>
                        {this.props.item.title}
                    </mobiscroll.CardTitle>
                    <mobiscroll.CardSubtitle>
                        {this.props.item.text}
                    </mobiscroll.CardSubtitle>
                </mobiscroll.CardContent>
            </mobiscroll.Card>
        </li>;
    }
}

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            multiline: [{
                id: 1,
                title: 'Electric Smartscooter',
                text: 'Gogoro Smartscooter is world’s first connected two-wheeled electric vehicle.'
            }, {
                id: 2,
                title: 'The Solar Bike',
                text: 'An electric bike that incorporates solar panels and producing enough energy to use it 30 km a day'
            }, {
                id: 3,
                title: 'Smallest Quadricopter',
                text: 'The Dutch gadget-manufacturer TRNDlabs reveals the smallest quadricopter of the world'
            }, {
                id: 4,
                title: 'Glow Headphones',
                text: 'Discover the world’s first laser headphones that pulse to the music'
            }],
            custom: [{
                id: 1,
                title: 'The Intouchables (2011)',
                rate: 8.5
            }, {
                id: 2,
                title: 'The Shawshank Redemption(1994)',
                rate: 9.2
            }, {
                id: 3,
                title: 'Fight Club(1999)',
                rate: 8.8
            }, {
                id: 4,
                title: 'Inception(2010)',
                rate: 8.7
            }],
            cards: [{
                id: 1,
                title: 'Netflix',
                text: 'Sherlock Series 3 is now avalable on Netflix',
                img: 'https://img.mobiscroll.com/demos/netflix.png'
            }, {
                id: 2,
                title: 'Angry birds',
                text: 'Dont forget your daily Arena entry.',
                img: 'https://img.mobiscroll.com/demos/angrybirds.png'
            }, {
                id: 3,
                title: 'Candycam',
                text: 'A new update is available!',
                img: 'https://img.mobiscroll.com/demos/candycam.png'
            }]
        };
    }
    
    render() {
        return (
            <mobiscroll.Form>
                <mobiscroll.FormGroup>
                    <mobiscroll.FormGroupTitle>Multiline text</mobiscroll.FormGroupTitle>
                    <mobiscroll.Listview
                        itemType={MultilineItem}
                        enhance={true}
                        swipe={false}
                        data={this.state.multiline}
                    />
                </mobiscroll.FormGroup>
                <mobiscroll.FormGroup>
                    <mobiscroll.FormGroupTitle>Custom CSS</mobiscroll.FormGroupTitle>
                    <mobiscroll.Listview
                         className="md-custom-listview"
                        itemType={CustomItem}
                        enhance={true}
                        swipe={false}
                        data={this.state.custom}
                    />
                </mobiscroll.FormGroup>
                <mobiscroll.FormGroup>
                    <mobiscroll.FormGroupTitle>Cards</mobiscroll.FormGroupTitle>
                    <mobiscroll.Listview
                         className="mbsc-card-list"
                        itemType={CardsItem} 
                        swipe={false}
                        data={this.state.cards}
                    />
                </mobiscroll.FormGroup>
        </mobiscroll.Form>
        );
    }
}

<div id="content"></div>
.md-custom-listview .mbsc-lv-item {
    background: #c3e8fb;
    padding-top: 30px;
    padding-bottom: 30px;
}

.md-custom-listview .md-star-icon {
    float: right;
    font-weight: bold;
    color: #ff8400;
}

.md-custom-listview .md-star-icon:before {
    margin-right: 5px;
}

Listview - Image/Icon/Avatar

Change demo
Image/Icon/Avatar
React Listview image demo for rendering content with regular images, icons and avatars. Customize it with custom CSS. For React.
mobiscroll.settings = {
    lang: '',
    theme: ''
};

class ImageItem extends React.Component {
    render() {
        return <li>
            <img src={this.props.item.imgsrc}/>
            <h3>{this.props.item.title}</h3>
            <p>Directed by  {this.props.item.director}</p>
        </li>;
    }
}

class IconItem extends React.Component {
    render() {
        return <li data-icon={this.props.item.icon}>{this.props.item.name}</li>
    }
}

class AvatarItem extends React.Component {
    render() {
        return <li>
            <img src={this.props.item.imgsrc}/>
            <h3>{this.props.item.user}</h3>
            <p>{this.props.item.phone}</p>
        </li>;
    }
}

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            movies: [{
                id: 1,
                imgsrc: 'https://img.mobiscroll.com/demos/Requiem_for_a_Dream.png',
                title: 'Requiem for a Dream',
                director: 'Darren Aronofsky'
            }, {
                id: 2,
                imgsrc: 'https://img.mobiscroll.com/demos/The_Dark_Knight.png',
                title: 'The Dark Knight',
                director: 'Christopher Nolan'
            }, {
                id: 3,
                imgsrc: 'https://img.mobiscroll.com/demos/Despicable_Me.png',
                title: 'Despicable Me',
                director: 'Pierre Coffin and Chris Renaud'
            }, {
                id: 4,
                imgsrc: 'https://img.mobiscroll.com/demos/Mr_Nobody.png',
                title: 'Mr. Nobody',
                director: 'Jaco Van Dormael'
            }],
            icons: [{
                id: 1,
                icon: 'line-user',
                name: 'Edit profile'
            }, {
                id: 2,
                icon: 'line-settings',
                name: 'Settings'
            }, {
                id: 3,
                icon: 'line-heart',
                name: 'Rate'
            }, {
                id: 4,
                icon: 'line-bubble',
                name: 'Tell a friend'
            }],
            users: [{
                id: 1,
                imgsrc: 'https://img.mobiscroll.com/demos/m1.png',
                user: 'Barry Lyon',
                phone: '(202) 555-0193'
            }, {
                id: 2,
                imgsrc: 'https://img.mobiscroll.com/demos/f1.png',
                user: 'Hortense Tinker',
                phone: '(202) 555-0127'
            }, {
                id: 3,
                imgsrc: 'https://img.mobiscroll.com/demos/m2.png',
                user: 'Carl Hambledon',
                phone: '(202) 555-0147'
            }, {
                id: 4,
                imgsrc: 'https://img.mobiscroll.com/demos/f2.png',
                user: 'Arlene Sharman',
                phone: '(202) 555-0190'
            }]
        };
    }
    render() {
        return (
            <mobiscroll.Form>
                <mobiscroll.FormGroup>
                    <mobiscroll.FormGroupTitle>Image</mobiscroll.FormGroupTitle>
                    <mobiscroll.Listview
                        itemType={ImageItem} 
                        data={this.state.movies}
                        enhance={true}
                        swipe={false}
                    />
                </mobiscroll.FormGroup>
                <mobiscroll.FormGroup>
                    <mobiscroll.FormGroupTitle>Icon</mobiscroll.FormGroupTitle>
                    <mobiscroll.Listview
                        itemType={IconItem} 
                        data={this.state.icons}
                        enhance={true}
                        swipe={false}
                    />
                </mobiscroll.FormGroup>
                <mobiscroll.FormGroup>
                    <mobiscroll.FormGroupTitle>Avatar</mobiscroll.FormGroupTitle>
                    <mobiscroll.Listview
                        itemType={AvatarItem} 
                        data={this.state.users}
                        enhance={true}
                        swipe={false}
                    />
                </mobiscroll.FormGroup>
            </mobiscroll.Form>
        );
    }    
}

<div id="content"></div>

Listview - Selecting items

Change demo
Selecting items
React Listview item selection example. Select a single item or enable multiple selection for batch operations. For React.
class ListItem extends React.Component {
    render() {
        return <li data-selected={this.props.item.selected}>{this.props.item.title}</li>;
    }
}

class ListItem2 extends React.Component {
    render() {
        return <li data-selected={this.props.item.selected}>{this.props.item.title}</li>;
    }
}

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            movies: [
                { id: 1, title: 'The Shawshank Redemption (1994)', selected: false },
                { id: 2, title: 'The Godfather (1972)', selected: false },
                { id: 3, title: 'The Godfather: Part II (1974)', selected: true },
                { id: 4, title: 'The Dark Knight (2008)', selected: false },
                { id: 5, title: '12 Angry Men (1957)', selected: false },
                { id: 6, title: 'Schindler\'s List (1993)', selected: false },
                { id: 7, title: 'The Lord of the Rings: The Return of the King (2003)', selected: false },
                { id: 8, title: 'Pulp Fiction (1994)', selected: false }
            ],
            moreMovies: [
                { id: 1, title: 'The Good, the Bad and the Ugly (1966)', selected: false },
                { id: 2, title: 'Fight Club (1999)', selected: false },
                { id: 3, title: 'The Lord of the Rings: The Fellowship of the Ring (2001)', selected: true },
                { id: 4, title: 'Forrest Gump (1994)', selected: false },
                { id: 5, title: 'Star Wars: Episode V - The Empire Strikes Back (1980)', selected: true },
                { id: 6, title: 'Inception (2010)', selected: true },
                { id: 7, title: 'The Lord of the Rings: The Two Towers (2002)', selected: false },
                { id: 8, title: 'One Flew Over the Cuckoo\'s Nest (1975)', selected: false }
            ]
        };
    }
    render() {
        return (
            <mobiscroll.Form theme="" lang="">
                <mobiscroll.FormGroup>
                    <mobiscroll.FormGroupTitle>Single item select</mobiscroll.FormGroupTitle>
                    <mobiscroll.Listview
                        lang=""
                        theme=""
                        itemType={ListItem} 
                        data={this.state.movies}
                        select="single"
                    />
                </mobiscroll.FormGroup>
                <mobiscroll.FormGroup>
                    <mobiscroll.FormGroupTitle>Multiple item select</mobiscroll.FormGroupTitle>
                    <mobiscroll.Listview
                        lang=""
                        theme=""
                        itemType={ListItem2} 
                        data={this.state.moreMovies}
                        select="multiple"
                    />
                </mobiscroll.FormGroup>
            </mobiscroll.Form>
        );
    }    
}

<div id="content"></div>

Listview - Sorting & ordering

Change demo
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.
mobiscroll.settings = {
    theme: '',
    lang: ''
};

class ListItem extends React.Component {
    render() {
        return <li><img src={this.props.item.src} />
            <h3>{this.props.item.name}</h3>
            <p>{this.props.item.mobile}</p>
        </li>;
    }
}

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            items: [{
                id: 1,
                src: "https://img.mobiscroll.com/demos/m1.png",
                name: "Barry Lyon",
                mobile: "(202) 555-0193"
            }, {
                id: 2,
                src: "https://img.mobiscroll.com/demos/f1.png",
                name: "Hortense Tinker",
                mobile: "(202) 555-0127"
            }, {
                id: 3,
                src: "https://img.mobiscroll.com/demos/m2.png",
                name: "Carl Hambledon",
                mobile: "(202) 555-0147"
            }, {
                id: 4,
                src: "https://img.mobiscroll.com/demos/f2.png",
                name: "Arlene Sharman",
                mobile: "(202) 555-0190"
            }]
        };
    }

    render() {
        return (
            <mobiscroll.Form>
                <mobiscroll.FormGroup>
                    <mobiscroll.FormGroupTitle>Handle on the right</mobiscroll.FormGroupTitle>
                    <mobiscroll.Listview 
                        itemType={ListItem} 
                        data={this.state.items}
                        swipe={false}
                        sortable={{
                            handle: 'right'
                        }}
                        enhance={true}
                    />
                </mobiscroll.FormGroup>
                <mobiscroll.FormGroup>
                    <mobiscroll.FormGroupTitle>Handle on the left</mobiscroll.FormGroupTitle>
                    <mobiscroll.Listview 
                        itemType={ListItem} 
                        data={this.state.items}
                        swipe={false}
                        sortable={{
                            handle: 'left'
                        }}
                        enhance={true}
                    />
                </mobiscroll.FormGroup>
                <mobiscroll.FormGroup>
                    <mobiscroll.FormGroupTitle>Tap and hold to start reordering</mobiscroll.FormGroupTitle>
                    <mobiscroll.Listview
                        itemType={ListItem} 
                        data={this.state.items}
                        swipe={false}
                        sortable={true}
                        enhance={true}
                    />
                </mobiscroll.FormGroup>
            </mobiscroll.Form>
        );
    }
}

<div id="content"></div>

Listview - Sticky header

Change demo
Sticky header
React Listview demo with sticky header. List out names or contacts grouped alphabetically with the first letter on top. For React.
class ListItem extends React.Component {
    render() {
         return <li data-role={this.props.item.header ? "list-divider" : ""}>{this.props.item.name}</li>;;
    }
}

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            names: [{
                id: 1,
                name: 'A',
                header: true
            }, {
                id: 2,
                name: 'Audie Pennington'
            }, {
                id: 3,
                name: 'Audrea Delaughter'
            }, {
                id: 4,
                name: 'Augustine Brink'
            }, {
                id: 5,
                name: 'Aurelio Deveau'
            }, {
                id: 6,
                name: 'Aurora Marston'
            }, {
                id: 7,
                name: 'B',
                header: true
            }, {
                id: 8,
                name: 'Bobby Weisman'
            }, {
                id: 9,
                name: 'Bobbye Clapp'
            }, {
                id: 10,
                name: 'Bobette Boyland'
            }, {
                id: 11,
                name: 'Boris Latta'
            }, 
            // Showing partial data. Download full source.
            ]
        };
    }
    
    render() {
        return (
            <mobiscroll.Listview
                itemType={ListItem} 
                data={this.state.names}
                theme=""
                lang=""
                fixedHeader={true}
                swipe={false}
            />
        );
    }
}

<div id="content"></div>

Listview - Grouping

Change demo
Grouping
React Listview demo with group headers. Use it to logically segment and group items without creating multiple lists. For React.
class ListItem extends React.Component {
    render() {
        return  <li data-role={this.props.item.header ? "list-divider" : ""}>
            {this.props.item.header ? '' : <img src={this.props.item.src} className="md-img" />}
            {this.props.item.text}
            {this.props.item.header ? '' : <span className="md-price"> {this.props.item.price}</span>}
        </li>;
    }
}

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            drinks: [{
                id: 0,
                header: true,
                text: "Non Alcoholic drinks"
            },{
                id: 1,
                src: "https://img.mobiscroll.com/demos/dCappuccino.jpg",
                text: "Cappuccino",
                price: "$3.00"
            }, {
                id: 2,
                src: "https://img.mobiscroll.com/demos/dCoffee.jpg",
                text: "Coffee",
                price: "$2.60"
            }, {
                id: 3,
                src: "https://img.mobiscroll.com/demos/dCola.jpg",
                text: "Coca Cola",
                price: "$3.50"
            }, {
                id: 4,
                src: "https://img.mobiscroll.com/demos/dMilk.jpg",
                text: "Milk",
                price: "$2.50"
            }, {
                id: 5,
                src: "https://img.mobiscroll.com/demos/dPepsi.jpg",
                text: "Pepsi",
                price: "$3.50"
            }, {
                id: 6,
                src: "https://img.mobiscroll.com/demos/dTea.jpg",
                text: "Tea",
                price: "$3.00"
            }, {
                id: 7,
                src: "https://img.mobiscroll.com/demos/dWater.jpg",
                text: "Water",
                price: "$2.00"
            },{
                id: 8,
                header: true,
                text: "Alcoholic drinks"
            }, {
                id: 9,
                src: "https://img.mobiscroll.com/demos/dBeer.jpg",
                text: "Beer",
                price: "$3.00"
            }, {
                id: 10,
                src: "https://img.mobiscroll.com/demos/dGin.jpg",
                text: "Gin",
                price: "$4.00"
            }, {
                id: 11,
                src: "https://img.mobiscroll.com/demos/dMartini.jpg",
                text: "Martini",
                price: "$4.50"
            }, {
                id: 12,
                src: "https://img.mobiscroll.com/demos/dRum.jpg",
                text: "Rum",
                price: "$5.00"
            }, {
                id: 13,
                src: "https://img.mobiscroll.com/demos/dWine.jpg",
                text: "Wine",
                price: "$4.50"
            }, {
                id: 14,
                src: "https://img.mobiscroll.com/demos/dWhiskey.jpg",
                text: "Whiskey",
                price: "$6.00"
            }]
        };
    }
    
    render() {
        return (
            <div className="md-groupsort">
                <mobiscroll.Listview 
                    itemType={ListItem} 
                    data={this.state.drinks}
                    theme=""
                    lang=""
                    swipe={false}
                    enhance={true}
                />
            </div>
        );
    }
}

<div id="content"></div>
.md-groupsort .mbsc-lv .mbsc-lv-item .md-img {
    border-radius: 40px;
}

.md-price {
    float: right;
}

Listview - Create, Read, Update, Delete

Change demo
Create, Read, Update, Delete
React Listview demo with CRUD operations & swipe actions. Slide right to update and left to delete items. For React.
const formatDate = mobiscroll.util.datetime.formatDate;

let nextId = 6;

class ListItem extends React.Component {
    render() {
        return <li>
            {this.props.item.text}
            <div className="md-timestamp mbsc-italic">
                {this.props.item.time}
            </div>
        </li>;
    }
}

class App extends React.Component {
    stages = {
        left: [{
            percent: 25,
            color: 'green',
            text: 'Update',
            action: (event) => {
                this.updateItem(event.index);
            }
        }],
        right: [{
            percent: -25,
            color: 'red',
            text: 'Delete',
            confirm: true,
            action: (event, inst) => {
                inst.remove(event.target, null, () => {
                    this.removeItem(event.index);
                });
                return false;
            }
        }]
    };

    constructor(props) {
        super(props);
        
        const now = formatDate('DD d hh:ii:ss A', new Date());
        
        this.state = {
            todo: [{
                id: 1,
                text: 'Check Mobiscroll demos',
                time: now
            }, {
                id: 2,
                text: 'Feed the pets',
                time: now
            }, {
                id: 3,
                text: 'Send an invitation email to Emily',
                time: now
            }, {
                id: 4,
                text: 'Watch the new Arrow episode',
                time: now
            }, {
                id: 5,
                text: 'Wash the dishes',
                time: now
            }]
        };
    }
    
    removeItem(index) {
        const todo = this.state.todo.slice(0);
        todo.splice(index, 1);
        this.setState({
            todo: todo
        });
    }
    
    updateItem(index) {
        const todo = this.state.todo.slice(0);
        const newItem = {
            ...todo[index], 
            time: formatDate('DD d hh:ii:ss A', new Date())
        };
        todo.splice(index, 1, newItem);
        this.setState({
            todo: todo
        });
    }
    
    addItem(text) {
        const newItem = {
            id: nextId++,
            text: text ? text : 'New Item',
            time: formatDate('DD d hh:ii:ss A', new Date())
        };
        this.setState(state => ({
            todo: [...state.todo, newItem]
        })); 
    }
    
    handleClick = () => {
        mobiscroll.prompt({            title: 'New item',
            message: 'Enter a description and add it to the list of existing tasks.',
            placeholder: 'What to do next...',
            callback: (value) => {
                if (value !== null) {
                    this.addItem(value);
                    mobiscroll.toast({                        message: 'New item added'
                    });
                }
            }
        });
    }

    render() {
        return (
            <div>
                <mobiscroll.Listview
                    itemType={ListItem} 
                    data={this.state.todo}
                    stages={this.stages}
                    theme=""
                    lang=""
                />
                <div className="mbsc-btn-group-block">
                    <mobiscroll.Button onClick={this.handleClick}>Add new item</mobiscroll.Button>
                </div>
            </div>
        );
    }
}

<div id="content"></div>

Listview - Remove/Undo

Change demo
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.
class ListItem extends React.Component {
    render() {
        const item = this.props.item;
        return <li>
            <div className="md-mail-icon" style={item.color}>{item.mono}</div>
            <div className="md-mail-date">{item.date}</div>
            <div className="md-mail-from">{item.name}</div>
            <div className="md-mail-subject">{item.subj}</div>
        </li>;
    }
}

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            items: [{
                id: 1,
                color: {background: '#4c66a4'},
                mono: "F",
                date: "Nov 4",
                name: "Facebook",
                subj: "Your weekly page update"
            }, {
                id: 2,
                color: {background: '#287BBC'},
                mono: "L",
                date: "Nov 1",
                name: "LinkedIn",
                subj: "Michael has endorsed you!"
            }, {
                id: 3,
                color: {background: '#5185a8'},
                mono: "M",
                date: "Oct 31",
                name: "Mobiscroll",
                subj: "October update"
            }, {
                id: 4,
                color: {background: '#1a3665'},
                mono: "P",
                date: "Oct 31",
                name: "PayPal",
                subj: "Stay fashionable in the cold with PayPal"
            }, {
                id: 5,
                color: {background: '#dd4b39'},
                mono: "G",
                date: "Oct 28",
                name: "Google+",
                subj: "John Doe added you back on Google+"
            }, {
                id: 6,
                color: {background: '#5185a8'},
                mono: "M",
                date: "Oct 27",
                name: "Mobiscroll",
                subj: "Password reset information"
            }]
        };
    }
    
    stages = {
        left: [{
            percent: -30,
            action: (event, inst) => {
                inst.remove(event.target, null, () => {
                    this.removeItem(event.index);
                });
                return false;
            },
            undo: true
        }],
        right: [{
            percent: 30,
            action: (event, inst) => {
                inst.remove(event.target, null, () => {
                    this.removeItem(event.index);
                });
                return false;
            },
            undo: true
        }]
    }
    
    removeItem(index) {
        const items = this.state.items.slice(0);
        items.splice(index, 1);
        this.setState({
            items: items
        });
    }

    render() {
        return (
            <div className="md-mailbox">
                <mobiscroll.Listview
                    itemType={ListItem} 
                    data={this.state.items}
                    stages={this.stages}
                    theme=""
                    lang=""
                />
        </div>
        );
    }
}

<div id="content"></div>
.md-mailbox .mbsc-lv-item {
    line-height: 20px;
    padding: 10px 10px 10px 60px;
}

.md-mail-icon {
    width: 40px;
    line-height: 40px;
    position: absolute;
    top: 10px;
    left: 10px;
    color: #fff;
    text-align: center;
    text-shadow: none;
}

.md-mail-date {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 12px;
}

.md-mail-from {
    font-size: 14px;
}

.md-mail-subject {
    font-size: 12px;
}

.md-mail-empty {
    padding: 10px;
}

Listview - Swipe actions

Change demo
Swipe actions
React Listview demo with swipe revealing actions. Render an action list or action menu when sliding items left and right. For React.
class ListItem extends React.Component {
    render() {
        return <li data-icon="image2">{this.props.item.name}</li>;
    }
}

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            listImages: [
                { id: 1, name: 'Image 1' },
                { id: 2, name: 'Image 2' },
                { id: 3, name: 'Image 3' },
                { id: 4, name: 'Image 4' },
                { id: 5, name: 'Image 5' }
            ],
            menuImages: [
                { id: 1, name: 'My Image 1' },
                { id: 2, name: 'My Image 2' },
                { id: 3, name: 'My Image 3' },
                { id: 4, name: 'My Image 4' },
                { id: 5, name: 'My Image 5' }
            ]
        };
    }
    
    removeItem(index) {
        const listImages = this.state.listImages.slice(0);
        listImages.splice(index, 1);
        this.setState({
            listImages: listImages
        });
    }
    
    removeItem2(index) {
        const menuImages = this.state.menuImages.slice(0);
        menuImages.splice(index, 1);
        this.setState({
            menuImages: menuImages
        });
    }
    
    toast(message) {
        mobiscroll.toast({
            message: message
        });
    }
    
    stages = {
        left: [ {
            percent: 25,
            icon: 'link',
            text: 'Get link',
            action: (event, inst) => {
                this.toast('Link copied');
            }
        }, {
            percent: 50,
            icon: 'download',
            text: 'Download',
            action: (event, inst) => {
                this.toast('Downloaded');
            }
        }],
        right: [{
           percent: -25,
            icon: 'print',
            text: 'Print',
            action: (event, inst) => {
                this.toast('Printing...');
            } 
        }, {
            percent: -50,
            icon: 'remove',
            text: 'Delete',
            confirm: true,
            action: (event, inst) => {
                inst.remove(event.target, null, () => {
                    this.removeItem(event.index);
                });
                return false;
            }
        }]
    };
    
    actions = [{
        icon: 'link',
        action: (event, inst) => {
            this.toast('Link copied');
        }
    }, {
        icon: 'star3',
        action: (event, inst) => {
            this.toast('Starred');
        }
    }, {
        icon: 'download',
        action: (event, inst) => {
            this.toast('Downloaded');
        }
    }, {
        icon: 'print',
        action: (event, inst) => {
            this.toast('Printing...');
        }
    }, {
        icon: 'remove',
        action: (event, inst) => {
            inst.remove(event.target, null, () => {
                this.removeItem2(event.index);
            });
            return false;
        }
    }];
    
    render() {
        return (
            <mobiscroll.Form theme="" lang="">
                <mobiscroll.FormGroup>
                    <mobiscroll.FormGroupTitle>Action list</mobiscroll.FormGroupTitle>
                    <mobiscroll.Listview
                        theme=""
                        lang=""
                        itemType={ListItem} 
                        data={this.state.listImages}
                        enhance={true}
                        stages={this.stages}
                    />
                </mobiscroll.FormGroup>
                <mobiscroll.FormGroup>
                    <mobiscroll.FormGroupTitle>Action menu</mobiscroll.FormGroupTitle>
                    <mobiscroll.Listview
                        theme=""
                        lang=""
                        itemType={ListItem} 
                        data={this.state.menuImages}
                        enhance={true}
                        actions={this.actions}
                    />
                </mobiscroll.FormGroup>
            </mobiscroll.Form>
        );
    }    
}

<div id="content"></div>

Listview - Hierarchy

Change demo
Hierarchy
React Listview with multi-level hierarchy and drill-down interface. Featuring images, icons and text. For React.
mobiscroll.settings = {
    lang: '',
    theme: ''
};

class ListItem extends React.Component {
    render() {
        const item = this.props.item;
        const sublist = item.imgsrc && item.imgsrc.length ? <img src={item.imgsrc} /> : '';
        
        return <li>{item.name}
            {sublist}
            <span className={item.cl}></span>
            {this.props.children}
        </li>;
    }
}

class App extends React.Component {
    render() {
        return (
            <mobiscroll.Form>
                <mobiscroll.FormGroup>
                    <mobiscroll.FormGroupTitle>Hierarchical listview</mobiscroll.FormGroupTitle>
                    <mobiscroll.Listview
                        data={this.state.items}
                        itemType={ListItem}
                        swipe={false}
                        enhance={true}
                    />
                </mobiscroll.FormGroup>
                <div className="mbsc-padding">The listview can also be rendered inside a card</div>
                <mobiscroll.Card>
                    <mobiscroll.Listview
                        data={this.state.items}
                        itemType={ListItem}
                        swipe={false}
                        enhance={true}
                    />
                </mobiscroll.Card>
            </mobiscroll.Form>
        );
    }
    
    constructor(props) {
        super(props);

        this.state = {
            items: [{
                id: 1,
                cl: 'md-continent micons icon-north-america',
                name: 'North America',
                children: [{
                    id: 11,
                    imgsrc: 'https://img.mobiscroll.com/demos/flags/US.png',
                    name: 'USA',
                    children: [{
                        id: 111,
                        name: 'Washington'
                    }, {
                        id: 112,
                        name: 'Florida'
                    }, {
                        id: 113,
                        name: 'Los Angeles'
                    }, {
                        id: 114,
                        name: 'New York'
                    }, {
                        id: 115,
                        name: 'Detroit'
                    }, {
                        id: 116,
                        name: 'Chicago'
                    }]
                }, {
                    id: 12,
                    imgsrc: 'https://img.mobiscroll.com/demos/flags/CA.png',
                    name: 'Canada',
                    children: [{
                        id: 121,
                        name: 'Vancouver'
                    }, {
                        id: 122,
                        name: 'Winnipeg'
                    }, {
                        id: 123,
                        name: 'Calgary'
                    }, {
                        id: 124,
                        name: 'Montreal'
                    }, {
                        id: 125,
                        name: 'Quebec'
                    }]
                }]
            }, {
                id: 2,
                cl: 'md-continent micons icon-south-america',
                name: 'South America',
                children: [{
                    id: 21,
                    imgsrc: 'https://img.mobiscroll.com/demos/flags/ar.png',
                    name: 'Argentina',
                    children: [{
                        id: 211,
                        name: 'Buenos Aire'
                    }, {
                        id: 212,
                        name: 'Córdoba'
                    }, {
                        id: 213,
                        name: 'Rosario'
                    }, {
                        id: 214,
                        name: 'Mendoza'
                    }]
                }, {
                    id: 22,
                    imgsrc: 'https://img.mobiscroll.com/demos/flags/br.png',
                    name: 'Brazil',
                    children: [{
                        id: 221,
                        name: 'Rio de Janeiro'
                    }, {
                        id: 222,
                        name: 'Sao Paolo'
                    }, {
                        id: 223,
                        name: 'Brasília'
                    }, {
                        id: 224,
                        name: 'Salvador'
                    }, {
                        id: 225,
                        name: 'Fortaleza'
                    }]
                }, {
                    id: 23,
                    imgsrc: 'https://img.mobiscroll.com/demos/flags/cl.png',
                    name: 'Chile',
                    children: [{
                        id: 231,
                        name: 'Santiago'
                    }, {
                        id: 232,
                        name: 'Concepción'
                    }, {
                        id: 233,
                        name: 'Valparaíso'
                    }]
                }]
            } // Showing partial data. Download full source.
            ]
        };
    }
}

<div id="content"></div>
.md-country .mbsc-lv-img {
    margin-top: -.6em;
    width: 2em;
}

.md-continent {
    font-size: 36px;
    position: absolute;
    height: 1em;
    width: 1em;
    top: 50%;
    margin-top: -.5em;
    left: .42em;
    text-align: center;
}

Listview - Checklist

Change demo
Checklist
React Drag & Drop checklist/tasklist with swipe actions to add/remove items from todo listview. Sorting is supported. For React.
let nextId = 7;

class ListItem extends React.Component {
    render() {
         return <li>
            <input type="checkbox" data-role="none" defaultChecked={this.props.item.check}/>
            {this.props.item.text}
        </li>;
    }
}

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            todo: [{
                id: 1,
                check: true,
                text: 'Do the laundry'
            }, {
                id: 2,
                text: 'Check out new Mobiscroll features'
            }, {
                id: 3,
                check: true,
                text: "Don't forget mom's birthday!"
            }, {
                id: 4,
                text: 'Update my app with the latest Mobiscroll'
            }, {
                id: 5,
                text: 'Buy new shoes'
            }, {
                id: 6,
                text: 'Need ketchup for pizza'
            }]
        };
    }
    
    stages = {
        left: [{
            key: 'stage1',
            icon: 'plus',
            color: '#31c6e7',
            text: 'Add',
            action: (event) => {
                this.addItem(event.index + 1);
            }
        }],
        right: [{
            key: 'stage2',
            color: '#009688',
            text: 'Remove',
            icon: 'remove',
            action: (event, inst) => {
                inst.remove(event.target, null, () => {
                    this.removeItem(event.index);
                });
                return false;
            }
        }]
    }
    
    addItem(index) {
        const todo = this.state.todo.slice(0);
        const newItem = {
            id: nextId++,
            text: 'New Todo'
        };
        todo.splice(index, 0, newItem);
        this.setState({
            todo: todo
        }); 
    }
    
    removeItem(index) {
        const todo = this.state.todo.slice(0);
        todo.splice(index, 1);
        this.setState({
            todo: todo
        });
    }
    
    render() {
        return (
            <mobiscroll.Form theme="">
    			<mobiscroll.Listview
    			    theme=""
    			    lang=""
    				itemType={ListItem} 
    				data={this.state.todo}
    				stages={this.stages}
    				sortable={{
    					handle: 'left'
    				}}
    			/>
    		</mobiscroll.Form>
        );
    }
}

<div id="content"></div>

Listview - Filtering

Change demo
Filtering
React Listview demo with dynamic data and live filtering. Add and remove items on the fly or reload the full list. For React.
mobiscroll.settings = {
    theme: '',
    lang: ''
};

const now = new Date();

class ListItem extends React.Component {
    render() {
        return <li data-id={this.props.item.id} data-icon={this.props.item.icon}>
            <h4>{this.props.item.name}</h4>
            <h4>{this.props.item.company}</h4>
            <span className="md-time" style={{ position:'absolute', right:'1.25em', top:'50%', marginTop:'-9px' }}>
                {this.props.item.formatedTime}
            </span>
        </li>;
    }
}

class App extends React.Component {
    render() {
        const data = this.filter();
        return (
            <mobiscroll.Form className="md-schedule">
                <div>
                    <mobiscroll.Segmented name="range" value="today" checked={this.state.range === 'today'} onChange={this.setRange}>
                        Today
                    </mobiscroll.Segmented>
                    <mobiscroll.Segmented name="range" value="week" checked={this.state.range === 'week'} onChange={this.setRange}>
                        This Week
                    </mobiscroll.Segmented>
                    <mobiscroll.Segmented name="range" value="custom" checked={this.state.range === 'custom'} onChange={this.setRange} onClick={this.show}>
                        Custom
                    </mobiscroll.Segmented>
                    
                     <mobiscroll.Range 
                        ref={this.setRef}
                        theme=""
                        lang=""
                        value={this.state.customRange}
                        onSet={this.onSet}
                        type="hidden"
                    />
                    
                    <mobiscroll.Switch value={this.state.calls} onChange={this.setCalls}>
                        Show Calls
                    </mobiscroll.Switch>
                    <mobiscroll.Switch value={this.state.meetings} onChange={this.setMeetings}>
                        Show Meetings
                    </mobiscroll.Switch>
                    
                </div>
                <mobiscroll.FormGroup>
                    <mobiscroll.FormGroupTitle>My Schedule</mobiscroll.FormGroupTitle>
                    <div className="mbsc-empty" style={{ display: !data.length ? 'block': 'none'}}>
                        <h3>Nothing scheduled</h3>
                    </div>
                    <mobiscroll.Listview 
                        itemType={ListItem} 
                        data={data}
                        theme=""
                        lang=""
                        swipe={false}
                        enhance={true}
                        striped={true}
                    />
                </mobiscroll.FormGroup>
            </mobiscroll.Form>
        );
    }

    constructor(props) {
        super(props);
        
        const items = [{
            id: 1,
            name: "Owen Adams",
            company: "Sunholdings Corp.",
            icon: "phone",
            type: "call"
        }, {
            id: 2,
            name: "Kian Phillips",
            company: "sol-flex Corp.",
            icon: "location",
            type: "meeting"
        }, {
            id: 3,
            name: "Robert Bradley",
            company: "Silvermedia",
            icon: "location",
            type: "meeting"
        }, {
            id: 4,
            name: "Lydia Young",
            company: "Zimplex",
            icon: "phone",
            type: "call"
        }, {
            id: 5,
            name: "Hollie Hudson",
            company: "Stanelectrics",
            icon: "location",
            type: "meeting"
        }, {
            id: 6,
            name: "Lynn Elliott",
            company: "Techhex",
            icon: "location",
            type: "meeting"
        }, {
            id: 7,
            name: "Konner Murray",
            company: "HACME Corp.",
            icon: "phone",
            type: "call"
        }, {
            id: 8,
            name: "Morgan Downs",
            company: "Itex Corp.",
            icon: "location",
            type: "meeting"
        }, {
            id: 9,
            name: "Warren Boone",
            company: "Sumline",
            icon: "location",
            type: "meeting"
        }, {
            id: 10,
            name: "Charlie Jenkins",
            company: "Quaddoex",
            icon: "phone",
            type: "call"
        }, {
            id: 11,
            name: "Jillian Hobbs",
            company: "Indizap",
            icon: "location",
            type: "meeting",
            formatedTime: ''
        }, {
            id: 12,
            name: "Donald Mccormick",
            company: "Zootrax",
            icon: "phone",
            type: "call"
        }, {
            id: 13,
            name: "Luke Harper",
            company: "Unihouse",
            icon: "phone",
            type: "call"
        }, {
            id: 14,
            name: "Leah West",
            company: "Ap-care",
            icon: "phone",
            type: "call"
        }, {
            id: 15,
            name: "Billie Rivas",
            company: "Technoit Corp.",
            icon: "location",
            type: "meeting"
        }, {
            id: 16,
            name: "Janae Diaz",
            company: "Plex-ron Corp.",
            icon: "location",
            type: "meeting"
        }, {
            id: 17,
            name: "Raquel Bentley",
            company: "Silicon-lax",
            icon: "phone",
            type: "call"
        }, {
            id: 18,
            name: "Harley Burke",
            company: "Lamzone",
            icon: "location",
            type: "meeting"
        }];
        
        // Genarate random dates
        for (let i = 0; i < items.length; i++) {
            const item = items[i];
            const tempTime = new Date(
                now.getFullYear(),
                now.getMonth(),
                now.getDate() + (i > 5 ? (i - 5) : 0),
                now.getHours() + i * 2,
                Math.round((now.getMinutes() + i * 5) / 5) * 5);
            item.date = tempTime;
            item.formatedTime = mobiscroll.util.datetime.formatDate('D d hh:ii', tempTime);
        }
        
        this.items = items;

        this.state = {
            calls: true,
            meetings: true,
            range: 'today',
            customRange: [
                new Date(now.getFullYear(), now.getMonth(), now.getDate()),
                new Date(now.getFullYear(), now.getMonth(), now.getDate() + 6)
            ]
        };
    }

    setCalls = (event) => {
        this.setState({
            calls: event.target.checked
        });
    };

    setMeetings = (event) => {
        this.setState({
            meetings: event.target.checked
        });
    };

    setRange = (event) => {
        this.setState({
            range: event.target.value
        });
    };

    onSet = (event, inst) => {
        this.setState({
            customRange: inst.getVal()
        });
    };
    
    setRef = (comp) => {
        this.range = comp;
    };
    
    show = () => {
        this.range.instance.show();
    };

    filter () {
        let start = now;
        let end = now;
        let range = [now, now];
        let filteredData = [];
        const state = this.state;

        switch (state.range) {
            case 'today':
                start = new Date(now.setHours(0, 0, 0, 0));
                end = new Date(now.setHours(23, 59, 59, 999));
                break;
            case 'week':
                start = new Date(now.setHours(0, 0, 0, 0));
                end = new Date(
                    now.getFullYear(),
                    now.getMonth(),
                    now.getDate() + (7 - now.getDay()), 23, 59, 59, 999
                );
                break;
            default:
                range = state.customRange;
                start = range[0];
                end = range[1];
        }

        for (let i = 0; i < this.items.length; i++) {
            let item = this.items[i];
            if ((
                    (item.type == 'call' && state.calls) ||
                    (item.type == 'meeting' && state.meetings)
                ) && (item.date >= start) && (item.date <= end)) {
                filteredData.push(item);
            }
        }

        return filteredData;
    }
}

<div id="content"></div>

Listview - Data sources

Change demo
Data sources
React Listview demo with different ways of getting and passing data. Supporting hardcoded lists, dynamic and remote data. For React.
mobiscroll.settings = {
    lang: '',
    theme: ''
};

class ListItem extends React.Component {
    render() {
        return <li>{this.props.item.title}</li>;
    }
}

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            data: [
                { id: 1, title: 'Django Unchained (2012)' },
                { id: 2, title: 'WALL·E (2008)' },
                { id: 3, title: 'Princess Mononoke (1997)' },
                { id: 4, title: 'American Beauty (1999)' },
                { id: 5, title: 'The Dark Knight Rises (2012)' }
            ],
            remoteData: []
        };

        mobiscroll.util.getJson('https://trial.mobiscroll.com/getmovies/?nr=5', (data) => {
            let movies = [];
            for (let i = 0; i < data.length; i++) {
                const item = data[i];
                movies.push({
                    id: item.id,
                    title: item.title
                });
            }
            this.setState({ 
                remoteData: movies
            });
        }, 'jsonp');
    }
    render() {
        return (
            <mobiscroll.Form>
                <mobiscroll.FormGroup>
                    <mobiscroll.FormGroupTitle>Data array</mobiscroll.FormGroupTitle>
                    <mobiscroll.Listview
                        itemType={ListItem} 
                        data={this.state.data}
                    />
                </mobiscroll.FormGroup>
                <mobiscroll.FormGroup>
                    <mobiscroll.FormGroupTitle>Remote data</mobiscroll.FormGroupTitle>
                    <mobiscroll.Listview
                        itemType={ListItem} 
                        data={this.state.remoteData}
                    />
                </mobiscroll.FormGroup>
            </mobiscroll.Form>
        );
    }    
}

<div id="content"></div>

Listview - Load on demand

Change demo
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.
class ListItem extends React.Component {
    render() {
        const item = this.props.item;
        let listItem = '';
        
        if(item.header) {
            listItem = <li data-role="list-divider">{item.headerTitle}</li>;
        }
        else {
            listItem = <li>
                <h4>{item.title}</h4>
                <a href={item.link} target="_blank">
                    <img src={item.image}></img>
                </a>
                <p className="md-text">
                    <span dangerouslySetInnerHTML={{__html: item.text}}></span> ...
                    <a href={item.link} target="_blank">
                        Read more →
                    </a>
                </p>
                <div className="md-text md-author">
                    by <a href="">{item.author}</a>
                </div>
            </li>;
        }
        
        return listItem;
    }
}

class App extends React.Component {
    constructor(props) {
        super(props);
        
        this.state = {
            feedNum: 5,
            isLoading: false,
            data: [{
                id: 'title',
                header: true,
                headerTitle: 'Arstechnica News'
            }]
        };

        this.getFeed();
    }
    
    getFeed() {
        const state = this.state;
        const data = state.data.slice(0);

        if (this.list) {
            this.list.instance.showLoading();
        }
        
        mobiscroll.util.getJson('https://api.rss2json.com/v1/api.json?rss_url=http%3A%2F%2Ffeeds.arstechnica.com%2Farstechnica%2Ftechnology-lab%2F&api_key=ytdlqir4cx7dpdb9asyawz4lteioxq5uwl5ctd9n&count=' + state.feedNum, (result) => {
            if (result.status == 'ok') {
                let feeds = [];
                
                for (let i = state.feedNum - 5; i < result.items.length; i++) {
                    const entry = result.items[i];
                    const img = entry.thumbnail ? entry.content.match(/src="[^\"]*/)[0].replace('src="', '') : '';
                    const content = /\<p\>(.*)(\.\s)/.exec(entry.content);
                    const text = content ? content[1] : '';
                        
                    data.push({
                        id: i,
                        title: entry.title,
                        link: entry.link,
                        image: img,
                        text: text,
                        author: entry.author
                    });
                }

                this.list.instance.hideLoading();

                this.setState({
                    isLoading: false,
                    data: data
                });
            }
        }, 'jsonp');
    }
    
    onListEnd = (event, inst) => {
        const state = this.state;
        if (!state.isLoading) {
            this.setState({
                loading: true,
                feedNum: state.feedNum + 5
            });
            this.getFeed();
        }
    }
    
    setRef = (comp) => {
        this.list = comp;
    }
    
    render() {
        return (
            <mobiscroll.Listview
                ref={this.setRef}
                theme=""
                lang=""
                striped={true}
                animateAddRemove={false}
                swipe={false}
                itemType={ListItem}
                data={this.state.data}
                onListEnd={this.onListEnd}
                className="md-news"
            />
        );
    }    
}

<div id="content"></div>
.md-news .mbsc-lv-item img {
    width: 100%;
}

.md-news .mbsc-lv-item h4 {
    margin-top: 0;
    font-weight: 100;
}

.md-news .mbsc-lv-item .md-author {
    margin-top: 0;
    text-align: right;
    font-size: 14px;
    font-style: italic;
}

Listview - Load more

Change demo
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.
class ListItem extends React.Component {
    render() {
        return  <li data-role={this.props.item.header ? "list-divider" : ""}>
            {this.props.item.title}
        </li>;
    }
}

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            showMore: true,
            data: [{
                id: 'header',
                header: true,
                title: 'Top Rated Movies'
            }]
        };
        
        this.getMovies();
    }
    
    getMovies = () => {
        const data = this.state.data.slice(0);
        
        if (this.list) {
            this.setState({
                showMore: false 
            });
            this.list.instance.showLoading();
        }
        
        mobiscroll.util.getJson('https://trial.mobiscroll.com/loadmore/?length=' + (data.length + 9), (result) => {
            for (let i = 0; i < result.length; i++) {
                const item = result[i];
                data.push({
                    id: item.id,
                    title: item.title
                });
            }
            
            this.list.instance.hideLoading();
            
            this.setState({ 
                showMore: true,
                data: data
            });
        }, 'jsonp');
    }
    
    setRef = (comp) => {
        this.list = comp;
    }
    
    render() {
        return (
            <div className="md-top-movies">
                <mobiscroll.Listview 
                    ref={this.setRef}
                    itemType={ListItem} 
                    data={this.state.data}
                    theme=""
                    lang=""
                    animateAddRemove={false}
                    striped={true}
                    swipe={false}
                    enhance={true}
                />
                <mobiscroll.Form className="mbsc-padding" theme="">
                    <div className="mbsc-btn-group-block">
                        <mobiscroll.Button onClick={this.getMovies} style={{ display: (this.state.showMore && this.state.data.length < 101) ? 'block': 'none'}}>
                            Load more
                        </mobiscroll.Button>
                    </div>
                </mobiscroll.Form>
            </div>
        );
    }
}

<div id="content"></div>

Listview - Event handlers

Change demo
Event handlers
React Listview demo with event hooks for deep integration and custom functionality. With source code. For React.
Clear event log
EVENTS FIRED: 
let ids = 15;

class ListItem extends React.Component {
    render() {
        return <li data-id={this.props.item.id}>
            {this.props.item.title}
            <div className="md-wo-status">
                {this.props.item.status}
            </div>
         </li>;
    }
}

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            items: [{
                id: 1,
                title: "Work order #0001",
                status: "Assigned"
            }, {
                id: 2,
                title: "Work order #0002",
                status: "Assigned"
            }, {
                id: 3,
                title: "Work order #0003",
                status: "Assigned"
            }, {
                id: 4,
                title: "Work order #0004",
                status: "Assigned"
            }, {
                id: 5,
                title: "Work order #0005",
                status: "Assigned"
            }, {
                id: 6,
                title: "Work order #0006",
                status: "Assigned"
            }, {
                id: 7,
                title: 'Work order #0007',
                status: 'Assigned'
            }, {
                id: 8,
                title: 'Work order #0008',
                status: 'Assigned'
            }, {
                id: 9,
                title: 'Work order #0009',
                status: 'Assigned'
            }, {
                id: 10,
                title: 'Work order #0010',
                status: 'Assigned'
            }, {
                id: 11,
                title: 'Work order #0011',
                status: 'Assigned'
            }, {
                id: 12,
                title: 'Work order #0012',
                status: 'Assigned'
            }, {
                id: 13,
                title: 'Work order #0013',
                status: 'Assigned'
            }, {
                id: 14,
                title: 'Work order #0014',
                status: 'Assigned'
            }, {
                id: 15,
                title: 'Work order #0015',
                status: 'Assigned'
            }]
        };
    }
    
    stages = {
        left: [{
            percent: 25,
            color: 'crimson',
            icon: 'checkmark',
            text: 'Complete',
            action: (event, inst) => {
                event.target.firstElementChild.innerText = "Completed";
            }
        }, {
            percent: 50,
            color: 'green',
            icon: 'plus',
            text: 'Spawn',
            action: (event) => {
                this.addItem(event.index + 1, event.target.getAttribute('data-id'));
            }
        }],
        right: [{
            percent: -50,
            color: 'red',
            icon: 'remove',
            text: 'Delete',
            confirm: true,
            action: (event, inst) => {
                inst.remove(event.target, null, () => {
                    this.removeItem(event.index);
                });
                return false;
            }
        }, {
            percent: -25,
            color: 'olive',
            icon: 'clock',
            text: 'Pending',
            action: (event, inst) => {
                event.target.firstElementChild.innerText = "Pending";
            }
        }]
    }
    
    addItem(index, dataID) {
        ids += 1;
        const items = this.state.items.slice(0);
        const newItem = {
            id: ids,
            title: 'Work order #000' + ids + ' created from WO #000' + dataID,
            status: 'Assigned'
        };
        items.splice(index, 0, newItem);
        this.setState({
            items: items
        });
    }
    
    removeItem(index) {
        const items = this.state.items.slice(0);
        items.splice(index, 1);
        this.setState({
            items: items
        });
    }
    
    onItemAdd = (event, inst) => {
        // Your custom event handler goes here
    }
    
    onItemRemove = (event, inst) => {
        // Your custom event handler goes here
    }
    
    onInit = (event, inst) => {
        // Your custom event handler goes here
    }
    
    onItemTap = (event, inst) => {
        // Your custom event handler goes here
    }
    
    onNavEnd = (event, inst) => {
        // Your custom event handler goes here
    }
    
    onNavStart = (event, inst) => {
        // Your custom event handler goes here
    }
    
    onSlideEnd = (event, inst) => {
        // Your custom event handler goes here
    }
    
    onSlideStart = (event, inst) => {
        // Your custom event handler goes here
    }
    
    onSort = (event, inst) => {
        // Your custom event handler goes here
    }
    
    onSortChange = (event, inst) => {
        // Your custom event handler goes here
    }
    
    onSortEnd = (event, inst) => {
        // Your custom event handler goes here
    }
    
    onSortStart = (event, inst) => {
        // Your custom event handler goes here
    }
    
    onSortUpdate = (event, inst) => {
        // Your custom event handler goes here
    }
    
    onStageChange = (event, inst) => {
        // Your custom event handler goes here
    }
    
    onListEnd = (event, inst) => {
        // Your custom event handler goes here
    }
    
    render() {
        return (
            <mobiscroll.Listview
                itemType={ListItem} 
                data={this.state.items}
                stages={this.stages}
                theme=""
                lang=""
                sortable={{handle:'left'}}
                iconSlide={true}
                striped={true}
                onItemAdd={this.onItemAdd}
                onItemRemove={this.onItemRemove}
                onInit={this.onInit}
                onItemTap={this.onItemTap}
                onNavEnd={this.onNavEnd}
                onNavStart={this.onNavStart}
                onSlideEnd={this.onSlideEnd}
                onSlideStart={this.onSlideStart}
                onSort={this.onSort}
                onSortChange={this.onSortChange}
                onSortEnd={this.onSortEnd}
                onSortStart={this.onSortStart}
                onSortUpdate={this.onSortUpdate}
                onStageChange={this.onStageChange}
                onListEnd={this.onListEnd}
            />
        );
    }
}

<div id="content"></div>

Listview - Quick Navigation

Change demo
Quick Navigation
React Listview demo with quick access to list segments. Alphabetically group items and provide a tab list for selection. For React.
class ListItem extends React.Component {
    render() {
        const item = this.props.item;
		if (item.noBookmark) {
			return <li className="md-no-bookmark">
				<div className="md-nob-title">
				    Traveling to the same place frequently?
				</div>
				<div className="md-nob-txt">
				    You can bookmark airports by tapping on the star to the left and they will show up here.
				</div>
				<div className="md-nob-separator"></div>
				<img className="md-nob-img" src="https://img.mobiscroll.com/demos/lv-bookmark.png"/>
			</li>;
		} else {
	        return <li data-role={item.header ? "list-divider" : ""} data-icon={item.header ? "" : "star"} className={item.className}>
			    {item.text}
    			<span className="md-iata">
    			    {item.short}
    			</span>
    		</li>;
		}
	}
}

class App extends React.Component {
    constructor(props) {
        super(props);

    this.state = {
        items:[{
                id: 1,
                header: true,
                className: "headerA",
                text: "A"
            }, {
                id: 2,
                text: "Abilene, TEXAS",
                short: "(ABI)"
            }, {
                id: 3,
                text: "Agana / Tamuning, GUAM",
                short: "(GUM)"
            }, {
                id: 4,
                text: "Aguadilla, PUERTO RICO",
                short: "(BQN)"
            }, {
                id: 5,
                text: "Akron / Canton, OHIO",
                short: "(CAK)"
            },
            {
                id: 21,
                header: true,
                className: "headerB",
                text: "B"
            }, {
                id: 22,
                text: "Baltimore / Glen Burnie, MARYLAND",
                short: "(BWI)"
            }, {
                id: 23,
                text: "Bangor, MAINE",
                short: "(BGR)"
            }, {
                id: 24,
                text: "Bar Harbor, MAINE",
                short: "(BHB)"
            }, {
                id: 25,
                text: "Baton Rouge, LOUISIANA",
                short: "(BTR)"
            }, 
            // Showing partial data. Download full source.
            ]
        };
    }
    
    onItemTap = (event, inst) => {
        let timer = null;
        let firstletter = '';
        let currSelected = "A";
        let start = new Date();
        let isScrolled = false;
        let preventScroll = false;
        let isFavorite = false;
        const popup = document.querySelector('.md-popup');
        const list = document.querySelector('.md-list');
        const listDeviders = document.querySelectorAll('li[data-role=list-divider]');
        const text = event.target.innerHTML;
        const listItems = list.querySelectorAll('.mbsc-lv-item:not(.star3)');
        const favoriteItems = list.querySelectorAll('.star3');
        const favoriteCont = document.querySelector('.md-no-bookmark');

        preventScroll = true;

        isFavorite = event.target.querySelector('.mbsc-ic') != null;

        for (let i = 0; i < listItems.length; ++i) {
            listItems[i].style.display = isFavorite ? 'none' : 'block';
        }

        for (let i = 0; i < listDeviders.length; ++i) {
            listDeviders[i].style.display = isFavorite ? 'none' : 'block';
        }

        favoriteCont.style.display = isFavorite && favoriteItems.length == 0 ? 'block' : 'none';

        if (!isScrolled && !isFavorite) {
            this.list.instance.navigate(list.querySelector('.header' + text).nextElementSibling);
            
            popup.classList.add('md-show-popup');
            popup.innerHTML = text;
            clearTimeout(timer);
            timer = setTimeout(() => {
                popup.classList.remove('md-show-popup');
            }, 1500);
        }
    }
    
    onLvItemTap = (event, inst) => {
        const target = event.domEvent.target;

        if (target.classList.contains('mbsc-ic')) {
            event.target.classList.toggle('star3');
            target.classList.toggle('mbsc-ic-star3');
            target.classList.toggle('mbsc-ic-star');
            mobiscroll.toast({
                message: 'Favorites updated'
            });
        }
    }
    
    setMenu = (comp) => {
        this.menu = comp;
    }
    
    setList = (comp) => {
        this.list = comp;
    }
    
    render() {
        return (
            <div className="md-navigate">
                <div className="md-popup">
                    c</div>
                <mobiscroll.Optionlist
                    ref={this.setMenu}
                    className="md-alfabet"
                    theme=""
                    type="tabs"
                    display="top"
                    select="single"
                    onItemTap={this.onItemTap}
                >
                    <mobiscroll.OptionItem className="md-item-star"><span className="mbsc-ic mbsc-ic-star3"></span></mobiscroll.OptionItem>
                    <mobiscroll.OptionItem className="md-item-A" data-selected="true">A</mobiscroll.OptionItem>
                    <mobiscroll.OptionItem className="md-item-B">B</mobiscroll.OptionItem>
                    <mobiscroll.OptionItem className="md-item-C">C</mobiscroll.OptionItem>
                    <mobiscroll.OptionItem className="md-item-D">D</mobiscroll.OptionItem>
                    <mobiscroll.OptionItem className="md-item-E">E</mobiscroll.OptionItem>
                    <mobiscroll.OptionItem className="md-item-F">F</mobiscroll.OptionItem>
                    <mobiscroll.OptionItem className="md-item-G">G</mobiscroll.OptionItem>
                    <mobiscroll.OptionItem className="md-item-H">H</mobiscroll.OptionItem>
                    <mobiscroll.OptionItem className="md-item-I">I</mobiscroll.OptionItem>
                    <mobiscroll.OptionItem className="md-item-J">J</mobiscroll.OptionItem>
                    <mobiscroll.OptionItem className="md-item-K">K</mobiscroll.OptionItem>
                    <mobiscroll.OptionItem className="md-item-L">L</mobiscroll.OptionItem>
                    <mobiscroll.OptionItem className="md-item-M">M</mobiscroll.OptionItem>
                    <mobiscroll.OptionItem className="md-item-N">N</mobiscroll.OptionItem>
                    <mobiscroll.OptionItem className="md-item-O">O</mobiscroll.OptionItem>
                    <mobiscroll.OptionItem className="md-item-P">P</mobiscroll.OptionItem>
                    <mobiscroll.OptionItem className="md-item-R">R</mobiscroll.OptionItem>
                    <mobiscroll.OptionItem className="md-item-S">S</mobiscroll.OptionItem>
                    <mobiscroll.OptionItem className="md-item-T">T</mobiscroll.OptionItem>
                    <mobiscroll.OptionItem className="md-item-V">V</mobiscroll.OptionItem>
                    <mobiscroll.OptionItem className="md-item-W">W</mobiscroll.OptionItem>
                    <mobiscroll.OptionItem className="md-item-Y">Y</mobiscroll.OptionItem>
                </mobiscroll.Optionlist>
                <mobiscroll.Listview
                    ref={this.setList}
                    className="md-list"
                    theme=""
                    lang=""
                    itemType={ListItem}
                    data={this.state.items}
                    swipe={false}
                    enhance={true}
                    onItemTap={this.onLvItemTap}
                />
            </div>
        );
    }    
}

<div id="content"></div>
.demo-phone-screen-w #demo-ctx-200 {
    position: static;
}

.md-navigate .md-list .mbsc-lv-item {
    padding-right: 4em;
    backface-visibility: hidden;
    -webkit-transform: none;
    -moz-transform: none;
    transform: none;
}

.md-popup {
    position: fixed;
    width: 100px;
    height: 100px;
    margin: -50px 0 0 -50px;
    border-radius: 100px;
    background: rgba(78, 204, 196, .6);
    color: #fff;
    font-size: 56px;
    font-family: sans-serif;
    line-height: 100px;
    text-align: center;
    top: 50%;
    left: 50%;
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: opacity 300ms;
    -moz-transition: opacity 300ms;
    transition: opacity 300ms;
}

.demo-phone .md-popup {
    position: absolute;
}

.md-show-popup {
    opacity: 1;
}

.md-alfabet .mbsc-ms-item {
    min-width: 2.5em;
}

.md-iata {
    position: absolute;
    top: 50%;
    right: 1em;
    margin-top: -9px;
}

.demo-theme-material .md-popup {
    background: rgba(0, 150, 136, .6);
}

.demo-theme-material-dark .md-popup {
    background: rgba(129, 204, 196, .6);
}

.demo-theme-ios .md-popup,
.demo-theme-ios-classic .md-popup {
    background: rgba(0, 122, 255, .6);
}

.demo-theme-android-holo .md-popup,
.demo-theme-android-holo-light .md-popup {
    background: rgba(49, 182, 231, .6);
}

.demo-theme-ios .md-popup {
    background: rgba(0, 122, 255, .6);
}

.demo-theme-wp .md-popup,
.demo-theme-wp-light .md-popup {
    background: rgba(26, 159, 224, .6);
}

.demo-theme-jqm .md-popup {
    background: rgba(51, 136, 204, .7);
}

.example-full .md-popup,
.demo-fullscreen .md-popup {
    position: fixed;
}

.md-item-star .mbsc-ic-star3 {
    font-size: 14px;
}

/* no bookmark section */

.md-navigate .md-list .mbsc-lv-item.md-no-bookmark {
    display: none;
    padding: 1.5em 2.5em;
    height: 571px;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

.demo-theme-wp-light .md-list .mbsc-lv-item.md-no-bookmark,
.demo-theme-wp .md-list .mbsc-lv-item.md-no-bookmark {
    height: 547px;
}

.demo-theme-ios .md-list .mbsc-lv-item.md-no-bookmark {
    height: 574px;
}

.demo-theme-android .md-list .mbsc-lv-item.md-no-bookmark {
    height: 577px;
}

.demo-theme-android-holo-light .md-list .mbsc-lv-item.md-no-bookmark,
.demo-theme-android-holo .md-list .mbsc-lv-item.md-no-bookmark {
    height: 575px;
}

.md-nob-separator {
    height: 1px;
    margin-bottom: 38px;
    width: 100%;
    background: #CACACA;
}

.md-nob-title {
    text-align: center;
    padding: 1em;
    font-size: 16px;
}

.md-nob-txt {
    text-align: center;
    padding: 1em 0 2em 0;
    color: #a0a0a0;
    font-size: 14px;
}

.md-navigate .mbsc-lv .md-no-bookmark.mbsc-lv-item .md-nob-img {
    position: static;
    display: block;
    max-width: 274px;
    width: 274px;
    max-height: initial;
    margin: 0 auto;
    border: 1px solid #ccc;
    margin-bottom: 14px;
    transform: none;
}

.md-no-bookmark {
    display: none;
    padding: 2em;
    background: #f7f7f7;
    font-size: 16px;
}

.md-navigate .md-no-bookmark.mbsc-lv-item-active:after {
    background: none !important;
}

.demo-theme-jqm .md-navigate .md-list .mbsc-lv-item.md-no-bookmark {
    padding-top: 70px;
    white-space: normal;
}

Looking for something you didn't see or have a sales question?
Ask us about it, we're here to help.

Component license


Purchase component licenses if you are looking for specific funcionality.

Total


All features will be included with the license.

Buy component license

Framework license


Get all 36 components, including with the Framework license.



Mobiscroll for React $595


Use Javascript when building with plain and simple JS. Use jQuery when you have jQuery already included or if you are building with jQuery Mobile. Use AngularJS when building with Angular 1.x or Ionic 1. Use Angular when building with Angular 2/4/5/6/7/8 or Ionic 2/3/4. Use it when you are building your app or website with React.


Buy framework license
See other licensing options

Framework license


Get all 36 components, including with the Framework license.



Mobiscroll for React $595


  • Use it when building with plain and simple JS
  • Compatible with vanilla JS app or frameworks like Vue
  • Royalty-free commercial usage
  • Technical support is included with the license
  • Use it with jQuery and jQuery Mobile
  • Enjoy the familiar API if you already use jQuery
  • Royalty-free commercial usage
  • Technical support is included with the license
  • Use it with Angular JS and Ionic 1
  • For web and mobile apps based on Angular 1.x
  • Royalty-free commercial usage
  • Technical support is included with the license
  • Use it with Angular and Ionic 2/3/4
  • Visual Studio and VS Code integration
  • Royalty-free commercial usage
  • Technical support is included with the license
  • Use it when building with React JS
  • Collection of UI components for web and mobile
  • Royalty-free commercial usage
  • Technical support is included with the license
Buy framework license
See other licensing options

Framework license


Select the development framework you are using. Get all 36 components with the license.

Mobiscroll for Javascript
Mobiscroll for jQuery
Mobiscroll for React
Mobiscroll for Angular
Mobiscroll for Angular JS
  • Use it when building with plain and simple JS
  • Compatible with vanilla JS app or frameworks like Vue
  • Royalty-free commercial usage
  • Technical support is included with the license
  • Use it with jQuery and jQuery Mobile
  • Enjoy the familiar API if you already use jQuery
  • Royalty-free commercial usage
  • Technical support is included with the license
  • Use it with Angular JS and Ionic 1
  • For web and mobile apps based on Angular 1.x
  • Royalty-free commercial usage
  • Technical support is included with the license
  • Use it with Angular and Ionic 2/3/4
  • Visual Studio and VS Code integration
  • Royalty-free commercial usage
  • Technical support is included with the license
  • Use it when building with React JS
  • Collection of UI components for web and mobile
  • Royalty-free commercial usage
  • Technical support is included with the license
Buy framework license
See other licensing options

Select the framework you are interested in

Javascript
jQuery
Angular
Angular JS
React

Use Javascript when building with plain and simple JS.

Use jQuery when you have jQuery already included or if you are building with jQuery Mobile.

Use AngularJS when building with Angular 1.x or Ionic 1.

Use Angular when building with Angular 2/4/5/6/7/8 or Ionic 2/3/4.

Use it when you are building your app or website with React.

Do you need additional support seats?

The framework license comes with one support seat. ( +$50/seat )

Add the source code?

Price
Buy now
Customize & try demos locally
Sign in or start your free trial

What framework are you using?

Javascript
jQuery
AngularJS
Angular
Ionic
React
Other
Select a framework
Email address

Customize & try this demo locally
Sign in or start your free trial

We have to set you up with a trial for this to run 👍

Email address

Customize & try demos locally
You can download and use Mobiscroll for Free

What framework are you using?

Javascript
jQuery
AngularJS
Angular
Ionic
React
Other
Select a framework
Install demo in your app
Follow this quick, two minute install guide
Close window

Step 1.Install the Mobiscroll CLI from npm

Copy command
$ npm install -g @mobiscroll/cli

The CLI makes configuring your apps super simple 👍

Step 2.Run the following command in the root folder of your Ionic project

Copy command
$ mobiscroll config ionic
$ mobiscroll config ionic --lite

You will be prompted to log in with your mobiscroll account. Set your password here

Create an Ionic 3 & Mobiscroll starter with the CLI:

$ mobiscroll start ionic myStarter

Run this command for Ionic 4 & Mobiscroll starter:

$ mobiscroll start ionic-angular myStarter

Step 3.Copy the code into your app.

Copy TS
Copy HTML
Copy CSS
Copy Module

Step 4.Run ionic serve in the root folder of your app 🎉

Copy command
$ ionic serve

And voilà, everything should be running smoothly.

Customize & try demos locally
How would you like to do it?
Install demo in your app
Follow this quick, two minute install guide
Close window

Step 1.Install the Mobiscroll CLI from npm

Copy command
$ npm install -g @mobiscroll/cli

The CLI makes configuring your apps super simple 👍

Step 2.Run the following command in the root folder of your Angular project

Copy command
$ mobiscroll config angular
$ mobiscroll config angular --lite

You will be prompted to log in with your mobiscroll account. Set your password here

Step 3.Copy the code into your app. HTML goes into the markup, TS into Typescript.

Copy TS
Copy HTML
Copy CSS
Copy Module

Step 4.Run ng serve in the root folder of your app 🎉

Copy command
$ ng serve

And voilà, everything should be running smoothly.

Thanks for downloading
Try and customize the app locally

Extract the zip file and run the project like any Ionic app. Make sure to have Ionic CLI installed and open the terminal in the app root folder.

Step 1. Run in root folder
$ npm install
Step 2. Start the app
$ ionic serve

Let us know if we can help and enjoy!

Change your password
Need to update your password? Enter and hit the button below

You are setting a password for the account

New Password Required Enter at least 6 characters
Change your password
Need to update your password? Enter and hit the button below

Your password has been changed!

Thanks for downloading
Customize demos locally

Everything is set up so that you can dig in right away and start exploring.

We have set up a trial so that you can try the demos locally.

Extract the zip file and open the demo in your favorite browser. To install Mobiscroll in your project follow instructions from this page.


Let us know if we can help and enjoy! 👍

Thanks for downloading
Customize demos locally

Please extract the zip file and run the project like any Angular CLI app. Make sure to have the Angular CLI installed.

For installation and usage, extract the zip file and open a terminal window and follow these steps.

Step 1. Run in root folder
$ npm install
Step 2. Start the app
$ ng serve --open

Let us know if we can help and enjoy! 👍

Thanks for downloading
Customize demos locally

Everything is set up so that you can dig in right away and start exploring.

We have set up a trial so that you can try the demos locally.

The easiest way to get started is to follow the installation steps and by grabbing the code directly from the demo page. Let us know if we can help and enjoy!

You'll find a fully functional Kitchen-sink Ionic app in the zip file.

Thanks for downloading
Customize demos locally

Everything is set up so that you can dig in right away and start exploring.

We have set up a trial so that you can try the demos locally.

The demos are using Babel's in-browser ES6 and JSX transformer. Extract the zip file and open the demo in your browser. To install Mobiscroll in your project follow instructions from this page.


Let us know if we can help and enjoy! 👍

Demos
Alerts & notifications
Alert Notifications Note
Components
Alerts & notifications 3
Buttons 4
Calendar 27
Cards 14
Collapsible 3
Color 10
Date & Time 20
Event Calendar 25
Forms 6
Grid layout 7
Image 7
Inputs & fields 6
Listview 18
Measurement 10
Navigation 8
Number 8
Numpad 13
Option List 4
Popup 10
Range 19
Scroller 7
Scrollview 5
Select 18
Slider & progress 4
Styling 6
Timer 5
Timespan 6
Toggle & Radio 4
Treelist 7
Theme Select
Mobiscroll
Mobiscroll Dark
Material
Material Dark
iOS
iOS Dark
Windows
Windows Dark
Display Mode
Language Locale
See other demos and change options
Theme
Display
Locale
See other demos