List / index view

Page templates

Overview

The list / index view is the most common product screen: a collection of records the user can search, filter, scan, and act on. This template mirrors the WMG One Roster page — a sticky header (title + export), a search field with an icon-only filter button that opens a right-side filter panel, applied-filter chips, a subheading with the result count and top pagination, and a fixed-layout data table.

Preview

Roster

Filter(s) applied: Warner Records On roster

Artists and songwriters

(124)
1–20 of 124
Name Labels/Regions Data tools Socials
1nonly
Warner Records +1
Opus Sodatone
2Rare
Warner Records
Opus Artist Pack
Aminé C
Warner Records +2
Opus Sodatone Artist Pack
Ahmad June
10K Projects
Opus
Bebe Rexha C
Warner Records
Opus Sodatone
Cordae
Atlantic Records +1
Opus Artist Pack

Anatomy

The header is sticky and its title shrinks on scroll; the table headers stick beneath it. Structure, top to bottom:

  • 1. Title + export — the page title (Roster) on the left; an Export text button (btn-text) anchored top-right, shown only when there are results.
  • 2. Search + filter — a full-width search field, then an icon-only filter button (sliders-simple) with a count badge that opens a right-side filter panel (Slide-out).
  • 3. Applied filters — “Filter(s) applied:” followed by removable filter tags and a Clear filters text button. Hidden when no filters are active.
  • 4. Subheading + count + pagination — a section subheading (Artists and songwriters) with the total in subtle text, and top-right pagination (20 per page, previous/next).
  • 5. Data table — a fixed-layout, zebra-striped Table. Columns: Name (avatar + linked name + optional crossover “C”), Labels/Regions (first label + +N tag), Data tools (secondary tags with an external-link icon), Socials (brand icon buttons), and a trailing contact menu.

States

  • Loading — the table body renders ~12 skeleton rows; previous results stay visible while re-fetching after a search or filter change.
  • Empty — a dashed empty state panel inside the table (“It’s quiet in here — adjust or reset your filters”).
  • Error — a full-page data-unavailable panel replaces the list when the query fails with no cached data.

When to use

  • Use for any browsable collection of records — artists, releases, users, tasks.
  • Put filtering in a right-side panel behind the filter button (with an active-count badge), and surface active filters as removable chips above the list.
  • Keep pagination in the header next to the count; don’t duplicate it at the bottom. Use 20 rows per page.
  • Reserve the header action for a low-frequency, list-level task (export); per-row actions live in a trailing menu.
  • Prefer a table when rows share structured columns and users compare values; switch to a card collection when items are artwork-forward.