LagoTable

Realistic operational dataset — primary/secondary cells, status, numeric, currency, dates, sortable columns, row actions.

Individual selection, select-all with indeterminate state, a disabled/non-selectable row (Island Hopping Tour), and selected-row visual treatment.

All five semantic tones shown simultaneously with realistic labels — success, warning, error, info, neutral/inactive.

Click any sortable header to cycle ascending → descending. Unsorted shows a neutral icon; the active column shows direction.

Compact icon trigger opens a keyboard-accessible menu. The menu is visually aligned with LAGO controls and never heavier than the row itself.

Search (DS-007 input), filter control, and primary action — correct spacing and left-to-right hierarchy.

Current page, page navigation, rows-per-page, and disabled previous/next at boundaries.

40px target row height (vs 48px default) — same tokens, denser presentation for high-volume views.

A real empty-table example — no records exist yet. Distinct from a no-results state.

A filtered/search state where the table has no matching results — distinct from a genuinely empty table.

Skeleton rows approximating the real row geometry so content doesn't jump once data arrives.

The full LagoTable composition (toolbar + table + pagination) rendered at three viewport widths. Columns hide at their breakpoints, toolbar reflows, pagination wraps — no page-level horizontal overflow.

Where a page genuinely needs the table on a card surface.

Side-by-side comparison of the current DS-008 body typography (14px/22px) against the proposed candidate (13px/20px). Header, status, pagination, row heights, borders, spacing, and colours are identical — only body/primary/menu font size differs.

Row action menu item typography — current shadcn default (14px) vs candidate (13px / text-body-small). Same icons, same padding, same colours.

The candidate (13px) table rendered at 1534, 1024, 768, 430, 390, 375, and 320px. Columns hide at their breakpoints; the table scrolls horizontally inside its frame at narrow widths — no page-level overflow.

Side-by-side comparison of the current DS-008 column-header typography (12px/18px/600) against the pre-approved candidate (12px/16px/600). Body, primary, secondary, status, pagination, row heights, padding, borders, colours, and responsive behavior are identical — only the header line-height differs. Both tables use the approved 13px body candidate.

The pre-approved header (12px/16px/600) rendered at 1534, 1024, 768, 430, 390, 375, and 320px. Headers remain legible, uppercase labels do not feel cramped, and the table scrolls horizontally inside its frame at narrow widths — no page-level overflow.

The Experience title is currently plain text — the only path to the ExperienceBuilder workspace is the '...' menu → 'Edit Experience'. The proposed treatment makes the title a link to the existing workspace route (/operator/experiences/:id/edit) using LAGO brand-accent on hover + underline + focus ring. No new button, no new icon. Row actions and selection are preserved.

The proposed link treatment rendered at 1534, 1024, 768, 430, 390, 375, and 320px. The link truncates with ellipsis at narrow widths — same behaviour as the current plain text.