Lists and Tables

Finding things in a long list: search, filters, tables with and without actions, files to download, Load More and pages, and folded lists.

Search App

One search box over a list: a sentence saying what the user can search by, then a box across the full width, searching as people type. The sentence does the label's job on screen, so the <label> is for screen readers only (sr-only). The placeholder says what you'll find, ending in an ellipsis.

cmu-search-bar, sr-only

• One box over a list is a search. Several groups side by side, such as a search box and checkboxes, are filters, each with its own small label.
• Say how many are showing under the list, in the same words everywhere: "Showing 20 of 312 sections," "Showing all 312 sections," "Showing 1 section," and with nothing found, the template's own "Sorry, no results to display."

Filters App

A row of filter groups above a list, each with a small label over a search box or checkboxes. For a single search box, use a search instead.

cmu-filters, cmu-filter-group, cmu-filter-checks

• Filter as people type, and say how many rows are showing under the table (see Load More).
• Keep the stripes even: Move hidden rows to the end of the table, so table.alternate still alternates.
• Put the filters in the URL, so a filtered list can be bookmarked and shared.
• To match words that aren't shown, such as other names for the same thing, put them in a data-keywords attribute on the row for your filter to read, not in a hidden cell.

Tables CMS

Use the template's table.alternate for striped rows. Add cmu-full to stretch a table to full width from 768px up (below that, the template lets it scroll sideways). cmu-compare splits a two-column table evenly, for before-and-after comparisons. Cells are centered top to bottom, so a one-line cell sits level with a wrapped one or a picture beside it; to center pictures of different widths across their column too, add the template's aligncenter to those cells.

Give every table a header row, with <th scope="col"> for each column, so screen readers can say which column a cell is in. A column of buttons gets a header too, hidden with sr-only, such as "Actions."

table.cmu-full, table.cmu-compare

Tables With Actions App

The bulk bar sits on top of a table.alternate: the selection count, then actions for the selected rows. Its height is fixed, so buttons appearing don't push the table down. Row buttons repeat the bulk bar's actions in each row, with the same words, at one fixed width and the height of a two-line button, so rows stay even. Pairs stack below 1200px.

cmu-bulk-bar, cmu-selection-count, cmu-has-selection, cmu-select-cell, cmu-sort, cmu-sort-arrow, cmu-fit, cmu-row-buttons, num

• Selection: The app's script keeps the count current ("No sections selected" when there are none), adds cmu-has-selection to it when anything is selected and shows each bulk button only when it applies to a selected row, with how many: "Upload Syllabus (2)." Try it above.
• Checkbox cells: The label fills the cell, so the whole cell is the click target.
• Sorting: put data-sort-key on the header and a button.cmu-sort inside it; set aria-sort on the sorted column.
• Filtering: Move hidden rows to the end of the table body, so the template's stripes stay even.
• cmu-fit shrinks a column to its content. num (on th and td) right-aligns numbers.
• Keep labels together with  , so "a" never ends a line inside a button.

File Table CMS

A list of forms or documents to download, with when each was last changed. Use table.alternate with real column headings, and put the file type after each link in plain text. Don't put the links in <h4> headings to make them stand out, since screen readers then announce every row as a heading. A long page of them can go under collapsed headings, as below.

table.alternate, cmu-full

Load More App

A button under a long list that adds the next batch to it, after a count of what's showing. Use it for browsing and search results, where people scan down. For a list people need to come back to a place in, use Pagination instead.

The app loads the results and updates the count; it doesn't need the template's script. Load More is a ghost button half the page wide, and the full width on phones. Hide its paragraph (hidden) once everything is showing.

cmu-results-count, cmu-load-more

Pagination App

One batch of results at a time, each with its own address, under a count of what's showing. Use it when people need to come back to a place in the list, or the list is too long to keep adding to with Load More.

A pager is one list: first («), previous (‹), the page numbers, next (›) and last (»). Mark the current page with aria-current="page", and give each arrow an aria-label ("First page" and so on) for screen readers. An arrow that goes nowhere, such as previous on the first page, keeps its place but loses its href and gets aria-disabled="true", which grays it out. Keep the numbers to seven slots, so the pager stays the same width as people move through: the first page, the last and the pages around the current one, with an ellipsis for each gap (1 2 3 4 5 … 16 near the start, 1 … 7 8 9 … 16 in the middle, 1 … 12 13 14 15 16 near the end). With seven pages or fewer, show them all. Use the same batch size as Load More, such as 20. On phones, « and » give way to the numbers.

cmu-results-count, cmu-pager

Folded Lists App

A <details> whose summary reads as a line of text ending in the template's call to action (cta), which turns red on hover. Closed, the link is the count of what's hidden ("6 More"); open, it says Show Fewer, and the whole list shows. It needs no script. Tabs fold the same way.

cmu-more, cmu-more-link, cmu-more-closed, cmu-more-open