Skip to main content link. Accesskey S

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).

Directionality:

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
  • 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.
  • 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 more/hide action link 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 more/hide links.

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.

See Also:

IBM, the IBM logo, ibm.com and Lotus are trademarks of International Business Machines Corp., registered in many jurisdictions worldwide. Other product and service names might be trademarks of IBM or other companies. A current list of IBM trademarks is available on the Web at "Copyright and trademark information" at www.ibm.com/legal/copytrade.shtml.