Core
Navigation / Router
Components
- Accordion / Collapsible
- Autocomplete
- Buttons
- Calendar / Datepicker
- Cards
- Chips / Tags
- Content Block
- Data Table
- Floating Action Button
- Forms
  - Form Elements
  - Checkboxes and Radios
  - Smart Select
  - Disabled Elements
  - Form Data
  - Form Storage
  - Ajax Form Submit
- Infinite Scroll
- Layout Grid
- Lazy Load
- List View (Table View)
  - List View
  - Contacts List
  - Media List View
  - Swipeout
  - Sortable List
  - Virtual List
- Modals / Overlays
  - Modal
  - Popup
  - Popover
  - Action Sheet
  - Login Screen
  - Picker Modal
- Messages
- Message Bar
- Navbars & Toolbars
  - Layout types
  - Navbar
  - Dynamic Navbar
  - Sub Navbar
  - Toolbar
  - Tab Bar
  - Hide Bars On Scroll
- Notifications
- Photo Browser
- Picker
- Preloader Indicator
- Progress Bar
- Pull to Refresh
- Search Bar
- Side Panels
- Status Bar overlay
- Swiper Slider
- Tabs
- Timeline
Icons
- Icons
- Framework7 Icons Cheatsheet
Styling
- Color Themes
- Hairlines
Template7
Fast Clicks
Utilities
- Device API
- Support API
Plugins API
- Plugins API
Custom Build
- Custom Build

List View (Table View)

List views are versatile and powerful user interface compontents frequently found in iOS apps. A list view presents data in a scrollable list of multiple rows that may be divided into sections/groups.

List views have many purposes:

To let users navigate through hierarchically structured data
To present an indexed list of items
To display detail information and controls in visually distinct groupings
To present a selectable list of options

List View layout

Now let's look at the common layout of list view.

List block

List block is your list view elements wrapper, almost the same as content block but for list elements.

So first of all, all your list view elements should be wrapped with list-block element:

<div class="list-block">
    <ul>
        ... list elements here ...
    </ul>
</div>

Don't put "list-block" inside of "content-block"!

List block label

You can also add add list block label at the end of list block:

<div class="list-block">
    <ul>
        ... list elements here ...
    </ul>
    <div class="list-block-label">List block label text</div>
</div>

List item/element

Single list element has pretty complex but flexible layout:

<li>
    <div class="item-content">
        <div class="item-media">
            <i class="icon my-icon"></i>
        </div>
        <div class="item-inner">
            <div class="item-title">
                List element title
            </div>
            <div class="item-after">
                List element label
            </div>
        </div>
    </div>
</li>

Where:

item-content - main flex wrapper for item-media and item-inner. Requred element.

item-media - container for your media element like icon, image, etc. Optional element.
item-inner - main flex wrapper for item-title and item-after. Requred element.

item-title - single-line list item title. Required element.
item-after - list item label. Could countain any additional HTML elements, like label text, or badge, or switch/toggle or button, etc. Optional element.

Because .item-content is actually CSS flex-box element, note that "item-media" and "item-inner" should be direct children of "item-content"!
For the same reason "item-title" and "item-after" should be direct children of "item-inner"!

Also note that if your list item have nothing additional, you can user "item-content" class in <li> element:

<li class="item-content">
    <div class="item-media">
        <i class="icon my-icon"></i>
    </div>
    <div class="item-inner">
        <div class="item-title">
            List element title
        </div>
        <div class="item-after">
            List element label
        </div>
    </div>
</li>

Example

<body>
  ...
  <div class="page-content">
    <div class="content-block-title">Full Layout</div>
    <div class="list-block">
      <ul>
        <li class="item-content">
          <div class="item-media"><i class="icon icon-f7"></i></div>
          <div class="item-inner">
            <div class="item-title">Item title</div>
            <div class="item-after">Label</div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-media"><i class="icon icon-f7"></i></div>
          <div class="item-inner">
            <div class="item-title">Item with badge</div>
            <div class="item-after"><span class="badge">5</span></div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-media"><i class="icon icon-f7"></i></div>
          <div class="item-inner">
            <div class="item-title">Another item</div>
            <div class="item-after">Another label</div>
          </div>
        </li>
      </ul>
      <div class="list-block-label">List block label text goes here</div>
    </div>
    <div class="content-block-title">Only titles</div>
    <div class="list-block">
      <ul>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Item title</div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Item with badge</div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Another item</div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</body>

Link Elements

Of course in most cases we need to use list view elements as links (<a>) to other pages or data. In this case we need to wrap "item-content" with <a class="item-link"> element:

<a href="#" class="item-link">
  <div class="item-content">
    <div class="item-media">...</div>
    <div class="item-inner">...</div>
  </div>
</a>

If your links contains nothing except "item-content" then we can just use link as "item-content":

<a href="#" class="item-link item-content">
  <div class="item-media">...</div>
  <div class="item-inner">...</div>
</a>

Note that "item-inner" has additional right padding and chevron icon when it is in "item-link"

Example

<div class="list-block">
  <ul>
    <li>
      <a href="#" class="item-link item-content">
        <div class="item-media"><i class="icon icon-f7"></i></div>
        <div class="item-inner">
          <div class="item-title">Item title</div>
          <div class="item-after">Label</div>
        </div>
      </a>
    </li>
    <li>
      <a href="#" class="item-link item-content">
        <div class="item-media"><i class="icon icon-f7"></i></div>
        <div class="item-inner">
          <div class="item-title">Item with badge</div>
          <div class="item-after"><span class="badge">5</span></div>
        </div>
      </a>
    </li>
    <li>
      <a href="#" class="item-link item-content">
        <div class="item-media"><i class="icon icon-f7"></i></div>
        <div class="item-inner">
          <div class="item-title">Another item</div>
          <div class="item-after">Another label</div>
        </div>
      </a>
    </li>
  </ul>
  <div class="list-block-label">List block label text goes here</div>
</div>

List Divider

List divider is a simple list element with title to visually divide one list items from another:

<li class="item-divider">Divider title here</li>

<div class="list-block">
  <ul>
    <li class="item-content">
      <div class="item-media"><i class="icon icon-f7"></i></div>
      <div class="item-inner">
        <div class="item-title">Item title</div>
        <div class="item-after">Label</div>
      </div>
    </li>
    <li class="item-content">
      <div class="item-media"><i class="icon icon-f7"></i></div>
      <div class="item-inner">
        <div class="item-title">Title</div>
      </div>
    </li>
    
    <!-- Divider -->
    <li class="item-divider">Divider title here</li>
    
    <li class="item-content">
      <div class="item-media"><i class="icon icon-f7"></i></div>
      <div class="item-inner">
        <div class="item-title">Item with badge</div>
        <div class="item-after"><span class="badge">5</span></div>
      </div>
    </li>
    <li class="item-content">
      <div class="item-media"><i class="icon icon-f7"></i></div>
      <div class="item-inner">
        <div class="item-title">Another item</div>
        <div class="item-after">Another label</div>
      </div>
    </li>
  </ul>
  <div class="list-block-label">List block label text goes here</div>
</div>

Grouped Lists

Sometimes we need to group list view elements inside of single list block. In this case we need to additional group elements:

<div class="list-block">
  <!-- First group-->
  <div class="list-group">
    <ul>
      <li class="list-group-title">First group</li>
      <li class="item-content">
        <div class="item-media"><i class="icon icon-f7"></i></div>
        <div class="item-inner">
          <div class="item-title">Item title</div>
          <div class="item-after">Label</div>
        </div>
      </li>
      <li class="item-content">
        <div class="item-media"><i class="icon icon-f7"></i></div>
        <div class="item-inner">
          <div class="item-title">Item with badge</div>
          <div class="item-after"><span class="badge">5</span></div>
        </div>
      </li>
      ...
    </ul>
  </div>
 
  <!-- Second group-->
  <div class="list-group">
    <ul>
      <li class="list-group-title">Second Group</li>
      <li class="item-content">
        <div class="item-media"><i class="icon icon-f7"></i></div>
        <div class="item-inner">
          <div class="item-title">Item title</div>
          <div class="item-after">Label</div>
        </div>
      </li>
      <li class="item-content">
        <div class="item-media"><i class="icon icon-f7"></i></div>
        <div class="item-inner">
          <div class="item-title">Item with badge</div>
          <div class="item-after"><span class="badge">5</span></div>
        </div>
      </li>
      ...
    </ul>
  </div>
</div>

You may ask what is the difference from simple dividers? With list groups, group titles have sticky position during scroll within single group.

Inset List Block

List blocks also could have inset (not fullwidth) styling. To make inset lost block just add "inset" class to "list-block":

<div class="list-block inset">
  <ul>
    ...
  </ul>
</div>

It is also possible to make list inset only on iPad and keep it usual on iPhone. We need to use "tablet-inset" class for that:

<div class="list-block tablet-inset">
  <ul>
    ...
  </ul>
</div>