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