CRUD / foldkit-mixins-crud
What is drawn
| Part | Element | Slot |
|---|---|---|
| The list | div with the list's name as its id | root |
| Loading, failed, or empty | p role="status", aria-busy while loading, or role="alert" for a failure | status |
| Asking again after a failure | button type="button", when onRetry is given | retry |
| The rows | table, aria-busy while refreshing | table |
| The header and the body | thead, its tr, and tbody | head, headRow, body |
| A column header | th scope="col", with aria-sort when it sorts | headCell |
| A header that sorts | button type="button" | sort |
| A row | tr, keyed by rowKey, else the row's id, else its position | row |
| A cell | td | cell |
| The way into a row | button type="button" in the first shown cell | open |
| The next page | button type="button", disabled while refreshing | more |
DetailSlots publishes root (the div around everything the detail says,
in every state, as a list's root is), list (the dl, aria-busy while
refreshing), status, term, value, and retry.
The way into a row is a button, not a click on the tr, so a keyboard reaches
it and a screen reader announces it.
Limits
- One layout each: a table, and a description list. For cards, or a table with
grouped headers, draw from
list.columnsandDisplay.showyourself; this package is the default, not the only way. - A nested value (a relation read through a Selection) is shown as text, its
members joined. Draw it specially with
cells. - No selection of rows, and no inline editing.
- No pager with page numbers: Remote's pages are cursors, and
moreappends.