Deployments Table

Features

• Environment filter tabs (All, Production, Staging, Development) with live counts and a sliding underline indicator.
• Debounced full-text search across commit messages, projects, branches, authors, and commit hashes.
• Sortable columns (status, deployment, environment, branch, author, build time) with an ascending/descending toggle.
• Three view modes — dense table, two-column cards, and a stacked list — swapped through a sliding segmented control.
• Skeleton loading state shown during the simulated API latency so the shimmer is actually seen.
• Row selection across all views with a select-all checkbox and a floating bulk-action bar (redeploy, promote, delete).
• Inline build-time sparklines and animated "building" status pulses.
• Status and environment hues stay in dots, tints, and borders while labels use guaranteed theme ink; image failures restore initials on a contrast-safe avatar fallback.

Accessibility

Keyboard shortcuts

⌘K and / focus search; Escape clears selection, then search.

Labeled controls

Every icon-only button and the search input carry an aria-label.

Focus visibility

A global :focus-visible outline uses --dtb-focus, derived from the active accent and theme ink for 3:1+ contrast.

Sort controls

Sortable column headers support Enter/Space and expose aria-sort.

View tabs

Table, card, and stack controls implement tab/tabpanel semantics with arrow-key navigation and roving focus.

Selectable views

Table rows support Enter/Space; cards and stack items use dedicated full-card selection buttons so their rich content remains exposed to assistive technology.

Bulk actions

The hidden bulk-action bar is inert until at least one deployment is selected.

Reduced motion

prefers-reduced-motion collapses animation and transition durations.

Customise it with AI

Open Deployments Table in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the table is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.