Listing

A listing is a view of a group of objects with optional associated actions. A listing always has a header and a grid.

A listing is a modular entity comprised of a group of components which also have subcomponents.

Anatomy of a Listing

• Header
  • Action Bar(s), Title, Icon, Content, Search
• Filter
  • Form, Title, Action Bar, Content
• Grid (Listings)
  • Data Grid, Tree Grid, Data List, Calendar, Report (all different listings)
• Footer
  • Action Bar, Pagination, Content

Header

Listing headers contain a title and optional content and buttons for the grid view below

Listing Header with Action Bars

Filter

An optional filter allows targeted manipulation of the grid view in the listing

Grid

The content area of a listing can change depending on the context. The content could be rows and columns / cards / anything with a "overall" view.

Footer

A listing footer contains pagination or optional action bars to act over the grid content above.