Posted by & filed under Content Views.

Data lists have become a popular alternative to tables for displaying structured data as they provide more flexible presentation of information, media, and controls that can reduce the need for users to navigate between overview and detail views of information.  PatternFly currently supports this presentation as part of the List View pattern.  In looking at this page, you will see a variety of options for displaying textual and graphical information in the context of a row.

The expandable list view builds on that work by allowing users to expand any row in the list to reveal more details about an object.  This is useful when you want to give users direct access to more details about the object without requiring them to open the object in a separate view.  This pattern builds on the principle of progressive disclosure, although it differs in that the goal is less about hiding advanced functionality than it is about allowing the user to view details of an item in context.

The Proposal

The proposal offers up two options for list expansion.  The first is a simple case where all details are displayed within a single expandable panel.  The second option addresses a more complex use case where a data list row may have multiple expansion panels that hold the details associated with different items displayed in the row. Let’s start with the simple case.

Option 1: Simple Expansion

Here, the user is presented with a list of objects, in this case storage pools, and they want to view details related to the first item in the list.  The right caret placed at the start of the list entry communicates that this row can be expanded.



The user clicks anywhere in the row to reveal the details. The row content remain visible as the header of the expanded panel.



When the user wants to hide the details of this row, they will click Close.


Option 2: Multiple Expansion

Now let’s address the more complex case where you may want to expose multiple detailed views associated with the same some. This is illustrated here.
Option 2

Note that in this example, both OSDs and Alerts will reveal separate details views. To indicate this a progressive disclosure affordance, in this case the right caret, is inserted to the left of the field. A hover effect in added when mousing over the field to provide additional feedback indicating that this is an interactive element.

Single clicking on the element will reveal its details as shown below. The row element will remain highlighted and the direction of the caret will change to indicate that this element is currently expanded.


Option 2 open


Again, clicking close will collapse the expansion. The user may also close these details and expand a different element by clicking on that item in the header row.

Default Conditions

In all cases, all rows will be closed (collapsed) when the list view is initialized.  Filtering of sorting will have the effect of re-initializing the list and will close any row that is currently expanded.

Open Issues, Questions, and Further Work

In creating this proposal, there are a few questions that come to mind:

  • When a panel opens, how should this affect the space occupied by the list? Should the list grow vertically and other content be pushed down the page? Or should the height of the list be fixed and a scroll bar appear to let users scroll to items further down the list?
  • Would users ever want multiple rows expanded at once? Or should this behave more like a standard accordion where expansion of a new row closes any currently open details panel (i.e. only one row can be open at a time)?
  • Differentiating between expansion and drill-down navigation must be addressed.  Will it be clear when single clicking on a list entry results in list expansion vs. drill-down?

Our next step will be to finalize this design, but first we welcome your input and comments. Do you feel like this pattern will be useful? Are there other options or issues that need to be considered?

8 Responses to “Expandable List View for Viewing Details in Context”

  1. This might be a general question for the List View pattern itself, but I think it relates to your Option 2. How does sorting work? Can you sort on any list “column,” or just the main list object? It might relate to your opt. 2, because if users want to isolate specific column data to expand/view it, they might also want to sort by it. Perhaps they can already, but I don’t see anything in the current List View pattern that indicates what “column” has the sort applied to it.

    • This is definitely a question that relates to the List View itself. You’ll notice that there is a toolbar at the top of the list that contains filter and sort controls. So if you want to sort the list by any element, you would do so from that global Sort control. This should be described in the documentation for the List View itself (available in the Patterns section of the site), but if it’s not clear, an issue should be raised to improve that documentation. Also, it’s not really appropriate to reference “columns” when talking about a list view since there are not traditional columns and headers as one would think of for a table.

  2. Regarding the option #1, I am wondering if I can click on the same row again to collapse the view, and, if I can click on the triangle on the left to collapse.

    Regarding the open question #3, here is what just came to my mind:
    – When there isn’t details page associated with a row, clicking on a row will trigger the expansion.
    – When both details page and expanded view are available, clicking on a row will still trigger the expansion. Clicking on a View button on the right or clicking on the object name will open up the details page.
    – When there is a details page but not an expanded view, clicking on a row will open up the details page.

    I can see there may be confusion between my point #1 and #3. IMO it is okay that different applications have slightly different interactions, but the interactions within a single application should be consistent. I don’t know how common that the situations in #1 & #3 exist within one application. If so, that will become a big problem.

    Curious about what you think!

    • Yes, per our discussion, I think that row expansion takes precedence over drill-down to a new page. So clicking on the row will expand it, and there must be a separate explicit control (e.g. a button) that can be clicked to drill down to details.

  3. Hi,
    this is a very nice list view design. I search for the source code of “List View with Simple Expansion” in this page and on git, but I could not find it. Could you tell me were to get it?

    Best regards,

  4. Hi, option 2 is a clean and neat design. I would like to know if I could use the design and modify it a bit for a similar expansion list I am working on.

    • Totally. The List View mockups are examples however totally understood that your produce/project might have some different needs.


Leave a Reply to Matt Carrano

(will not be published)