Table

Bootstrap

List/data tables. Markup and helpers below; usage → Rules. Sort/action icons: Iconography.

Helper classes

Sqrl custom

Bootstrap table.table alone gives base layout (header, zebra, borders, hover — do not add table-striped / table-hover). Optional helpers (see Sqrl custom tag above). sortable is theme-only, not a Bootstrap table modifier.

Class	On	Purpose
sortable	th	Sortable column: pointer, darker label on hover, bi-chevron-expand after the label (before the label when text-end, sq-cell--num, or sq-cell--date).
sq-checkcell	th, td	First column: fixed width for row/select checkboxes and left edge padding.
sq-cell--num	th, td	Right-aligned column; monospace tabular nums on body cells only (header stays Manrope). Or Bootstrap text-end when you only need alignment.
sq-cell--date	th, td	Right-aligned dates and times in Manrope (tabular-nums on body cells). Not monospace — see Content.
sq-cell--muted	td	Muted copy (e.g. em dash when owner is empty).
sq-col-actions	th, td	Narrow trailing column for row actions; right edge padding.
sq-rowactions	div in actions cell	Wraps icon buttons; hidden until row hover or focus-within.
sq-row--clickable	tr	Row opens record / navigates (cursor: pointer).
sq-row--selected	tr	Bulk selection or current row — green-50 background.
sq-cell--wrap	td	Opt out of default single-line truncation (e.g. long notes).
sq-table-sticky-head	scroll container (overflow-auto + max-height)	Header row sticks to the top of the scroll area while the body scrolls.

Status cells use badges (badge-borderless badge-dotted), not table helpers.

Data table

• Required: table.table (Sqrl styles in theme.scss). Optional helpers in the example below.
• Clip overflow: wrap in Bootstrap overflow-hidden when needed (sticky head, horizontal scroll). Tables and headers are square — no rounded on the table, thead, or wrap.
• List pages: optional toolbar + pagination footer.

	Account	Owner	Status	Value	Last activity	Actions
	Van den Berg Logistics	Marieke de Groot	Open	€ 18K	28 Feb 2026
	TechBuild	Pieter Janssens	In review	€ 124K	19 Feb 2026
	Delta IT	Koen Vermeer	Done	€ 45K	10 Feb 2026
	Hoofstad Finance	Sara Jansen	Active	€ 92K	5 Feb 2026
	Bakker & Zn	—	In review	€ 9K	1 Feb 2026
	Noordzee Retail	Marieke de Groot	Open	€ 64K	28 Jan 2026

<div class="overflow-hidden">
  <table class="table mb-0">
    <thead>
      <tr>
        <th class="sq-checkcell" scope="col">
          <input
            class="form-check-input"
            type="checkbox"
            aria-label="Select all"
          />
        </th>
        <th class="sortable" scope="col">
          Account<i class="bi bi-chevron-expand" aria-hidden="true"></i>
        </th>
        <th class="sortable sq-cell--num" scope="col">
          Value<i class="bi bi-chevron-expand" aria-hidden="true"></i>
        </th>
        <th class="sq-col-actions" scope="col">
          <span class="visually-hidden">Actions</span>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr class="sq-row--clickable">
        <td class="sq-checkcell">
          <input
            class="form-check-input"
            type="checkbox"
            aria-label="Select Van den Berg Logistics"
          />
        </td>
        <td>Van den Berg Logistics</td>
        <td class="sq-cell--num">€ 18K</td>
        <td class="sq-col-actions">
          <div class="sq-rowactions">
            <button
              type="button"
              class="btn btn-ghost btn-sm"
              aria-label="Edit"
            >
              <i class="bi bi-pencil" aria-hidden="true"></i>
            </button>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Sticky header

Sqrl custom

Use Bootstrap overflow-auto on the scroll container, add Sqrl sq-table-sticky-head, and set max-height (inline or in layout CSS) so the body scrolls while the header stays visible. The preview uses a wide table so you can scroll horizontally as well.

	Account	Owner	Status	Value	Last activity	Region	Industry	Notes
	Van den Berg Logistics	Marieke de Groot	Open	€ 18K	28 Feb 2026	West	Logistics	Renewal discussion in Q2
	TechBuild	Pieter Janssens	In review	€ 124K	19 Feb 2026	North	Construction	Multi-site rollout pending sign-off
	Delta IT	Koen Vermeer	Done	€ 45K	10 Feb 2026	East	Software	Onboarding complete
	Hoofstad Finance	Sara Jansen	Active	€ 92K	5 Feb 2026	Central	Finance	Security review scheduled
	Bakker & Zn	—	In review	€ 9K	1 Feb 2026	South	Retail	Waiting on owner assignment
	Noordzee Retail	Marieke de Groot	Open	€ 64K	28 Jan 2026	West	Retail	Seasonal campaign follow-up
	Greenfield Energy	Lars de Vries	Open	€ 210K	22 Jan 2026	North	Energy	Enterprise tier evaluation
	Studio Oranje	Emma Bakker	In review	€ 31K	15 Jan 2026	Central	Creative	Design partner intro call done
	Haven Services	Tom van Dijk	Done	€ 78K	8 Jan 2026	West	Maritime	Annual contract signed
	Polder Agri	Pieter Janssens	Open	€ 52K	3 Jan 2026	East	Agriculture	Demo requested for field teams

<div
  class="overflow-auto sq-table-sticky-head"
  style="max-height: 16rem"
>
  <table class="table mb-0" style="min-width: 56rem">
    <thead>
      <tr>
        <th class="sq-checkcell" scope="col">…</th>
        <th class="sortable" scope="col">Account</th>
        <!-- extra columns → horizontal scroll -->
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="sq-checkcell">…</td>
        <td>Van den Berg Logistics</td>
        <!-- … -->
      </tr>
    </tbody>
  </table>
</div>

Toolbar

Optional row above the wrap: search, filters, primary action — often same panel with border-bottom before the table. Table ↔ cards (same records) uses segmented; All / Mine / Active uses pill tabs — Choose a control.

Rules

When to use

• Tabular list screens (contacts, tasks, etc.) with sortable columns and row actions.
• Empty list → empty state; loading → skeleton placeholders.

Structure

• List page stack (inside the scrolling content area — Layout): card-bordered with toolbar + table.table → pagination on surface-page below the card (not card-footer).
• Always table.table. Do not add Bootstrap table-striped / table-hover (built into theme).

Cells and columns

• Default text cells ellipsis; badges, checkbox, actions excluded. sq-cell--wrap when wrapping is required.
• Sortable th: include bi-chevron-expand (see Sticky header / examples).
• Row edit: btn-ghost btn-sm + pencil in sq-rowactions. Status: badges, not table helper classes.