Best practices for the layout of a list view

A list view can contain columns of different data types and different layout requirements. Depending on the type of data shown in the column, you can choose different ways to configure the list view or the column.

When setting the values of the width, minWidth, or maxWidth properties, it is recommended that you use em as the unit of measure.

Defined-width numbers (phone, serial, VIN, account, policy, claim, dates)

Numeric data often has a defined number of characters. It is good practice to define standardized columns for these numbers.
Recommendation
Set the column properties as follows:
  • wrap=false
  • grow=false
  • width=nnem, where nn is the number of characters that represent the upper limit of the width of the data

Predictable-width numbers and text (financial amounts, names, titles, attributes)

Numeric or text data often has typical lengths, but exceptions frequently occur.
Recommendation
Set the column properties as follows:
  • wrap=false
  • grow=false
  • minWidth=nnem, where nn is the typical number of characters that the data type would most often require

Descriptive text blocks (descriptions, explanations, notes)

The size requirements of long text entries are difficult to predict and often require wide spaces.
Recommendation
Set the list view stretch property to true, and the column properties as follows:
  • wrap=true
  • grow=true

In addition, consider locating these text columns to the far right side of a list view, so that the reader does not have to scan a large amount of whitespace to read the next piece of data.

Large data sets and multiple page list views

When a table handles larger data sets and regularly spans multiple pages, the data appearing on different pages may cause the table on each page to be a different width. As a result, the pagination controls appear to move to different positions on each page.
Recommendation
Set a static width for the list view to keep the pagination controls in the same position. The following are several ways in which you can do this:
  • Set the minWidth property when you are certain to have data that will not exceed the width of the list view; for example, names. A best practice is to choose a minWidth value that is 20% wider than you expect is required.
  • If you are confident that your data will not expand or contract considerably, then you can choose to set the column width property to a fixed value. You may also choose to set a fixed width when the data set has highly variable content. For example, descriptions or notes must wrap rather than extending past the edge of the screen.
  • Set the maxWidth property to constrain longer data such as descriptions and notes and force it to wrap. Note that if the content is not always long enough to trigger wrapping, you may still notice the pagination controls moving to different positions.

In addition, consider locating these text columns to the far right side of a list view, so that the reader does not have to scan a large amount of whitespace to read the next piece of data.

Stacked list views and list view inputs

Multiple list views may be stacked on top of each other in a single input column. When one is shorter than another, or when they have different widths, the appearance may not be pleasing.
Recommendation
Make the list views more consistent in one of the following ways:
  • Place all stacked list fiews into a detail view with the width property set. For all list views within the same detail view, set the stretch property to true, and set the grow and wrap properties on the list view columns as needed. This ensures that all list views have the same width, regardless of what that width ends up being. This is the preferable method.
  • Manually apply the width property to each list view in the stack, and configure the columns to appropriate widths. For variable width columns such as descriptions and notes, set the wrap property to true. Note that some data may be force a list view to grow wider than the list views near it.