Menu Icon

List

A list displays a catalogue of data. They let users see what is/are the data value(s).

Usage

View comes with three different types of lists to use. They show various data fields according to visual apperance. Data are provided with several sources connected by. Data operations can be added with action buttons.

Guidance

  • Lists should indicate data rows.
  • They should be easy readable.
  • Always List is in boundaries of a card.
  • Always have a text headers within the card container and list.
  • Always connect to a datasource.

When to use

  • Use Lists to display a bulk of data.

Additional info

  • Consider using Card Viewed List for a image framed content.
  • Consider using Line Viewed List for simple lines.
  • Consider using React JSX List to code by JSX.
  • Consider configuring List fields that will be displayed by selecting apperance from List types.
  • Consider ordering by any data field to organize List rows in compliance with any data field on data source.
  • Consider adding filter by using sources of component, page variable, app variable, local storage value, record value, javascript, previous action value, user/session or free text to contain specific data rows from data source on List.
  • Consider activating action buttons to use data operations by List.
  • Consider using pagination to set list pages and row numbers on pages.
  • Consider using index values for line view titles and descriptions to select data fields that will be displayed from data source.

Variations

  • There are several types and configurations for visual distinctions. Connectable data sources are various such as Data Model, SQL, REST or JSON.
  • The updatable properties of Card containers are header and size.
  • The updatable behaviours of Card containers are bordered, rounded and hoverable.
  • The updatable style features of Card containers are display, margin, padding, size, overflow, background, border, effects and css.
  • The usable dynamic properties of Card containers are bordered, title, size, hoverable, extra, cover, description, headStyle, bodyStyle, loading, hidden and style.
  • The updatable properties of Lists are header, item layout and size.
  • The updatable behaviours of Lists are split, bordered, quick search, sorting, enable data operations, enable card view and pagination.
  • The updatable style features of Lists are margin, padding, size, overflow, background, effects and css.
  • The updatable style features of List Headers are margin, padding, size, overflow, typography, background, border, effects and css.
  • The updatable style features of List Body are margin, padding, size, overflow, typography, background, border, effects and css.
  • The updatable style features of List Body Items for line view are margin, padding, size, overflow, background, border, effects and css.
  • The updatable style features of List Body Columns for card view are size, overflow and css.
  • The usable dynamic properties of Lists are dataSource, loadMore, header, bordered, itemLayout, size, split, pagination, hidden and style.
  • The updatable properties of Line View are title and description.
  • The updatable behaviour of Line View is show avatar.
  • The updatable style features of Line View are margin, padding, size, overflow, typography, background, border, effects and css.
  • The updatable style features of Line View Titles are margin, padding, size, overflow, typography, background and css.
  • The updatable style features of Line View Descriptions are margin, padding, size, overflow, typography, background, border and css.
  • The usable dynamic properties of Line View are avatar, description, title, hidden and style.
  • The updatable properties of Card View are title and size.
  • The updatable behaviours of Card View are bordered, rounded, hoverable and show cover image.
  • The updatable style features of Card View are margin, padding, size, overflow, background, border, effects and css.
  • The updatable style features of Card View Headers are margin, padding, size, overflow, typography, background, border, effects and css.
  • The updatable style features of Card View Covers are size, overflow, background, border, effects and css.
  • The updatable style features of Card View Body are display, margin, padding, size, overflow, typography, background, border, effects and css.
  • The updatable style features of Card View Actions are margin, padding, size, overflow, background, border, effects and css.
  • The usable dynamic properties of Card View are bordered, title, size, hoverable, extra, cover, hidden and style.
  • The updatable behaviours of Row Actions are show buttons on hover and split.
  • The usable dynamic properties of Row Actions are show on hover, hidden and style.
  • The updatable behaviours of Toolbar Actions are show buttons on hover and split.
  • The usable dynamic properties of Toolbar Actions are show on hover, hidden and style.

Hints

  • Consider adding filter by using user/session source to list data only created by user.