Products

The data-GRID page — cards, load more, single selection

The rules — the data-grid page

  • GRID view is for VISUAL, card-shaped records (products, media, templates) — the row list (the data-list page) stays the default for everything else. The view is a PAGE decision (lister-view="grid"), never a user toggle.
  • Cards are equal-height per row: build them .d-flex.flex-column.h-100 with .mt-auto pushing the price/footer row down; lister-grid-min sets the minimum column width.
  • lister-paging="more" (the load-more button, appends) fits grids — and any endpoint that reports only more instead of a total.
  • Selection is SINGLE (click the card); the primary action rides the primary option — Enter (or o) opens the details OFFCANVAS. While it is open, list shortcuts are silenced automatically.
  • The panel starts COLLAPSED (lister-panel-collapsed) when filters are secondary; search sits in the toolbar. Radio groups and switches are filters by their name alone — no wiring.
  • The per-card action button is quiet (.btn-soft-outline-secondary, full width under the content) — one per card, more actions belong in the details offcanvas.
  • Empty, loading and error states are the lister's own — never rebuild them (states).

Product