Language: ENCN

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