Lists and Tables

Filters, lists of people, tables with actions, and Load More or pages for long results.

Search

One search box over a list, as on the Syllabus Registry's Browse page: a sentence saying what you 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

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 and Pages).
• 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.

People List

A list of people with a small round headshot beside each name and title, as on CMU's experts page, for a directory, a team or the instructors of a course. With more than a screenful, put a search above it that matches names, titles and each row's data-keywords as people type, and a count under it. The filter is your app's script; try this one.

cmu-people, cmu-search-bar, cmu-results-count

Use a real photo cropped to a square; the kit makes it round. With no photo, leave the image out rather than showing a blank one. On a public page, show only people who've agreed to be listed.

Tables With Actions

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: your script adds cmu-has-selection to the count when anything is selected, and shows the bulk buttons by removing hidden.
• 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.

Load More and Pages

Two ways to split a long list of results. Both go under the list, after a count of what's showing.

• Load More adds the next batch to the list, like the news indexes on Cascade sites. Use it for browsing and search results, where people scan down.
• Pages show one batch at a time, each with its own address. Use them when people need to come back to a place in the list, or the list is too long to keep adding to.

Your app loads the results and updates the count; neither needs the template's script. Load More is a ghost button half the page wide, as on Cascade's news pages, and the full width on phones. Hide its paragraph (hidden) once everything is showing. Name what it loads, the same noun as the count: “Load More Sections”, not just “Load More”.

cmu-results-count, cmu-load-more, cmu-pager

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.