Users

The standard data-list page — lister, filters, offcanvas edit
Notifications
Nothing new yet.
Avatar
Andrei
andrei@example.com
Administrator
Quick settings
Profile
User
Role
Status
Created

The rules — the data-list page

  • The list page is a FULL-WIDTH lister — no grid, no wrapping card (the lister brings its own frame) — in THE STANDARD SHELL (lister.md "Page markup"): the toolbar inside .lister-main, the Filters toggle (icon + word) + the bulk Actions left, the ONE .btn-primary (New …) right; the list card holding the header (its select-all checkbox first) and the rows; the count and the pager on one .lister-footer line under it; the details as .lister-more-inset.
  • The collapsible lister-panel holds two cards: Filters (title + the lister-reset Reset link + the close button; the search on top, then the filter fields) and Display (order + page size). Reset — zero page code — restores the authored values and returns to page 1.
  • Create/edit opens in an OFFCANVAS (.offcanvas-end; the form wraps header + body + .offcanvas-footer with the standard button row) on former — fill, dirty guard, save pipeline, refresh pointed at the lister; former treats the parent offcanvas exactly like a modal. Sizes: default 30rem, .offcanvas-size-sm (20rem), -lg (40rem), -xl (max(40rem, 60vw) — floored at -lg), -full (100vw); on a phone (below 576px) every offcanvas is full-width.
  • Delete — single or bulk — stays a MODAL: g.confirm with danger: true, never a hand-built one.
  • Row markup follows THE COLUMN STANDARD: one flex line (d-flex align-items-center) holding the data zone .lister-cols — FIT columns: each cell declares its share, its readable minimum and (when it may hide) its priority (lister-col-w="15" lister-col-min="6rem" lister-col-priority="2"); the lister hides the least important columns by the LIST's own width — open the filter panel or narrow the window and watch Created, then Role, then Status step into the details. Cells space with padding (pe-3), never flex gap; free text gets text-truncate — a long value truncates, the columns never drift. Cell content is the person-cell pattern (tables) + status badges; secondary fields open with the card (THE STANDARD ROW, below). Every hideable cell carries lister-col="Label": hidden, it shows up by itself at the top of the open details box — renderMore holds only the fields that never take a column. Long texts go through h.longText() (the eye button appears only when the text is cut).
  • Buttons get THEIR OWN column: .lister-actions, fixed width via --lister-actions-w on the lister root (size it to the widest action set), present IDENTICALLY on every row — a row without buttons keeps the empty zone, so text never slides under a neighbour's buttons.
  • Column ALIGNMENT is positional and automatic (from md up): the FIRST column aligns start; BUTTON columns align end (.lister-actions right-aligns its content — the action buttons); DATA columns CENTER; the LAST data column aligns end ONLY when nothing follows it — with an actions column after (this page), it stays centered; on a list without buttons it right-aligns. The lib detects the actions column from --lister-actions-w by itself — zero authoring. Override per cell with the text-* utilities only when the page genuinely needs a different alignment.
  • The header row (.lister-header — the first row of the list card: the select-all checkbox, then ONE .lister-cols with one label per column, in the rows' order) labels the columns; the lib sizes its cells like the rows' and hides a label with its column. The actions-column width is reserved AUTOMATICALLY from --lister-actions-w — never put a .lister-actions in the header (double reservation); without the automatic one the last label would right-align at the row edge while its column stops before the buttons. Hide the header below the stacking breakpoint.
  • Row actions have ONE shape, in the row's count: a lone action (fixed or left by the row's status) renders as a bare .btn-sm .btn-actions-contrast button; 2+ actions render the PRIMARY action + a .dropdown-toggle-split caret (both .btn-actions-contrast) opening the rest. Visible button AND every .dropdown-item: icon + text; destructive items LAST as .dropdown-item.text-danger, under a .dropdown-divider when mixed with harmless ones, never as the visible half. THE ONE COLOR EXCEPTION: a row whose only action is DESTRUCTIVE renders it bare in the solid .btn-danger (the card below shows it; row actions are never outline; g.confirm stays mandatory). Actions never wrap and the page never authors a second shape: on a phone (or where only the name column would be left) this FIT list turns every row's actions COMPACT by itself — a menu button holding every action + the details caret, derived from the same markup. The size is .btn-sm at every width — never author .btn-xs on row actions; a list that crowds on mobile scopes the xs metrics below the breakpoint in its route style.scss (lister.md "Row actions" has the snippet). No details toggle in the row (THE STANDARD ROW, below).
  • THE STANDARD ROW (lister.md "The standard row"): the details open on a CARD CLICK — rowClick: 'expand' + renderMore + lister-more-inset on the root; no caret authored at the row end — on a phone the compact actions bring the round caret back by themselves (a row is hard to tap there). "Details" repeats as a dropdown item marked lister-expand (first, above the divider) for the keyboard and assistive road; a row whose only action is Details renders it as the bare .btn-sm .btn-actions-contrast button. The box shows the hidden columns first (label over value), then renderMore's own fields in the row g-3 small grid — label .text-body-secondary over value.
  • The row-action standard governs EVERY list row — hand-rendered rows too (the card below). The color is themable ($actions-contrast-* in the control panel; a project overrides it in private/config/theme.scss — foundation "Project theming"); never substitute another button color (lister.md "Row actions").
  • Keyboard comes free: row shortcuts via lister-key (e/d/n/f here) and ? for the overlay — declare them, do not write key handlers.
  • Empty, loading and error states are the lister's own — never rebuild them (states).

Hand-rendered rows — the same standard, no lister

1. Introduction to the platform
4 materials · quiz · 25 min
Published
Session 12 — Advanced routing
Today 18:00 · 34 attending
Live now
Draft certificate — no file attached
Created Aug 9 · never issued
Draft
Session 11 — Rendering deep dive
Aug 12 · recording 1h 42m
Ended
The one row-action shape in .btn-actions-contrast: five actions ride the primary + split caret (one constant-width control — the row never crowds on mobile; Delete last, under the divider). The “Live now” row’s status leaves ONE action, so it renders bare — same color, same size. The “Draft” row’s only action is DESTRUCTIVE — the one color exception: the bare solid .btn-danger (through g.confirm, always). The expand toggle stays .btn-contrast chrome outside the group.

Edit user