Virtual List React Component

Virtual List is not a separate component, but just a particular case of using <List>, <ListItem> React components and special Framework7's Virtual List component.

Usage example

Here is the full page example with Virtual List and Search Bar to search through Virtual List items:

...
...

constructor() {
  super();
  let defaultItems = this.getVirtualListPageDefaultState();

  this.state = {
    items: defaultItems
  };
}

render() {
  return (
    <Page>
      <Navbar backLink="Back" title="Searchbar" sliding>
        <NavRight>
          <Link onClick={this.addNewItem.bind(this)}>New Item</Link>
        </NavRight>
      </Navbar>
      <Searchbar cancelLink="Cancel" searchList="#search-list"></Searchbar>
      <ContentBlock>
        <p>Virtual List allows to render lists with huge amount of elements without loss of performance. And it is fully compatible with all Framework7 list components such as Search Bar, Infinite Scroll, Pull To Refresh, Swipeouts (swipe-to-delete) and Sortable.</p>
        <p>{`Here is the example of virtual list with 10,000 items: ${this.state.items.length}`}</p>
      </ContentBlock>
      <List className="searchbar-not-found">
        <ListItem title="Nothing found" />
      </List>
      <List
        id="search-list"
        className="searchbar-found"
        mediaList
        virtual
        virtualItems={this.state.items}
        virtualHeight={63}
        virtualSearchAll={this.searchAll}>
        <Template7Template>
          <ListItem mediaItem link="#" title={"{{title}}"} subtitle={"{{subtitle}}"} />
        </Template7Template>
      </List>
    </Page>
  );
}

private addNewItem() {
  let newItem: IVirtualListItem = {
    title: `Item ${this.state.items.length +1 }`,
    subtitle: `Subtitle ${this.state.items.length + 1}`
  };

  this.setState({
    items: [
      ...this.state.items,
      newItem
    ]
  });
}

private searchAll(query, items) {
  let found = [];

  for (let i = 0; i < items.length; i++) {
    if (items[i].title.indexOf(query) >= 0 || query.trim() === '') {
      found.push(i);
    }
  }

  return found;
}

private getVirtualListPageDefaultState() {
  let items: IVirtualListItem[] = [];

  for (let i = 1; i <= 10000; i++) {
    items.push({
      title: 'Item ' + i,
      subtitle: 'Subtitle ' + i
    })
  }       

  return items;
}

...
...

Properties

Prop	Type	Default	Description
<List> Virtual List specific properties
virtual	boolean		Enables Virtual List
virtualInit	boolean	true	Initializes Virtual List
virtualItems	array/object		Array with list items
virtualHeight	number/function		If number - item height in px. If function then function should return item height
virtualRowsBefore	number		Amount of rows (items) to be rendered before current screen scroll position. By default it is equal to double amount of rows (items) that fit to screen
virtualRowsAfter	number		Amount of rows (items) to be rendered after current screen scroll position. By default it is equal to the amount of rows (items) that fit to screen
virtualCols	number	1	Number of items per row. Doesn't compatible when using Virtual List with dynamic height
virtualCache	boolean	true	Disable or enable DOM cache for already rendered list items. In this case each item will be rendered only once and all futher manipulations will be with DOM element. It is useful if your list items have some user interaction elements (like form elements or swipe outs) or could be modified
virtualFilteredOnly	boolean	false	Option to show filtered items only set by `filter()` method
virtualSearchByItem	function(query, index, item)		Search function that will be used by Search Bar, it receives search query, item index and item itself. If item matches to search query you need to return true, otherwise this function should return false
virtualSearchAll	function(query, items)		Search function that will be used by Search Bar, it receives search query and array with all items. You need to loop through items and return array with indexes of matched items
virtualRenderItem	function(index, item)		This optional function allows to use custom function to render item HTML. It could be used instead of template parameter

Event Properties

Event	Description
onVirtualItemsbeforeinsert	Event will be triggered after current DOM list will be removed and before new document will be inserted
onVirtualItemsafterinsert	Event will be triggered after new document fragment with items inserted
onVirtualItembeforeinsert	Event will be triggered before item will be added to virtual document fragment
onVirtualBeforeclear	Event will be triggered before current DOM list will be removed and replaced with new document fragment