# Deployments Table

> A developer-console deployments table: filter by environment, search commits and branches, sort every column, and switch between table, card, and stack views. Skeleton loading, row selection with a floating bulk-action bar, and dark mode support.

- Category: Table
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Tensor
- Dark mode: no
- Access: premium (Atheros AI Pass)
- Page: https://builder.atheros.ai/components/deployments-table
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_deployments_table/preview-08eeef597f75.webp

## 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.

## Keyboard shortcuts

- `⌘K / Ctrl+K` — Focus the search field.
- `/` — Focus search when not already typing in a field.
- `Escape` — Clear the current selection, then the search query, then blur search.

## Common questions

**Which frameworks is Deployments Table available in?**

Deployments Table ships as Vanilla, React + CSS and React + Tailwind — HTML, CSS, JS and React source you can copy, download or clone into Atheros AI Builder.

**Is Deployments Table free?**

Deployments Table is a premium component. Anyone can preview it; the source, downloads and AI customisation are included with Atheros AI Pass.

**Does Deployments Table support dark mode?**

Deployments Table ships a single light theme, drawn from the Tensor design system's tokens.

## Get the code

Preview Deployments Table live, then sign in to copy or download the source, apply another design system, or ask the AI assistant to change it: https://builder.atheros.ai/components/deployments-table

Every component on https://builder.atheros.ai is also reachable from Claude Code, Cursor and Codex through the Atheros MCP server (paid plans). Component index: https://builder.atheros.ai/llms-components.txt