Summary/Details

Also called a list view (see lists display component for a simple list), this view is created using a table but looks less "grid-like." Each row can display as collapsed (summary) or expanded (detailed). The summary view allows you to expand and collapse individual rows. The details view displays all rows expanded to show all available data (with no option to collapse the rows).

Summary View, with one row expanded

Details View (all rows are expanded)

Classes

  • lotusTable - Class assigned to the table
  • lotusSummary - Used for the top row of data
  • lotusDetails - Used for the detail row of data (doesn't have a top border)
  • lotusMore - Used for a second summary row, when needed (doesn't have top border)
  • lotusFirstCell - Used on the first cell, for proper alignment
  • lotusLastCell - Used on the last cell, for proper alignment
  • lotusTitle - Used on h4 tag that wraps the title link text
  • lotusMeta - Used div that contains the meta information under the title
  • lotusSS - Used for superscripted elements
  • lotusType - Used to allow you to put an icon/text indication of the type of the entry (like moderated, private) in the header of the entry.
  • lotusIndicator - Similar to lotusType but with only text and a background color.
  • lotusComplete - used for todos, to style the text with strikethrough

Basic Implementation

Use a table, assigned the class: lotusTable. Use regular rows and cells to create your table. Look at the classes listed above for further implementation details.

Use the sort component before the table if you want sort controls.

Create your summary rows using regular table cells.

The lotusMore and lotusDetail classes allow you to append rows to the summary row without a separator line. Use lotusMore when you need more than one physical table row to create the summary row. Use lotusDetails for the row that is shown and hidden (it will always show in the details view)

Variations

The summary view contains a show/hide icon in the last cell of the top summary row, which allows you to show and hide the details row for that entry.

In the details view, every row in the table is displayed by default and there are no show/hide icons.

Accessibility

Put role="presentation" on the table tag, since these tables have no headers. Do not include a summary attribute on the table.

Put role="button," aria-expanded, and aria-controls on each link that wraps a show/hide icon. The aria-expanded attribute is set to true when the details row is showing, false otherwise. The aria-controls attribute is set to the unique id of the details row. The details row should have aria-hidden="true" when it is not showing. You can either remove this attribute or set aria-hidden="false" when it is showing (this second option is what is shown in the example code).

Examples

Sample HTML - Summary View

Sample HTML - Details View

CSS (tables.css)

Theme CSS (tablesTheme.css)

Our tables support a variety of views. The summary/details views are just variations on the same table construct.

April 27, 2010: removed type icons (secure, private) from the summary table example.

February 16, 2010: added a lotusIndicator example.

January 19, 2012 - Made the tags lists into ARIA lists.

See Also: