# Data Table

> The interactive layer on top of Table. A useDataTable hook plus opt-in pieces for sorting (multi-column), search, facet and range filters, column visibility, pinning and resizing, expandable rows, selection with bulk actions, row actions, keyboard navigation, pagination with page sizes, and loading, empty and error states.

Source: https://docs.nasaqui.com/components/data-table

## Install

```bash
npx shadcn@latest add https://docs.nasaqui.com/r/data-table.json
```

`Table` plus behaviour. It looks exactly like `Table`: same rows, borders, hover and selected tint.
`useDataTable` holds the state (sort, search, filters, page, selection, hidden columns) and returns a
`table` instance. You pass that instance to whichever pieces you need.

Every capability is opt-in. A table with only sortable columns has no toolbar, no checkboxes and no pager.

| You want | Add |
| --- | --- |
| Sorting | `sortValue` on a column |
| Search | `searchValue` on columns + `<DataTableSearch>` |
| Filter by value | `filterValue` on a column + `<DataTableFacetFilter>` |
| Show/hide columns | `<DataTableViewOptions>` (`hideable: false` to pin a column) |
| Selection | `selectable: true` (+ `<DataTableBulkActions>` for actions on the selection) |
| Row menu | `rowActions` on `<DataTable>` |
| Open a row | `onRowClick` on `<DataTable>` |
| Paging | `pageSize` + `<DataTablePagination>` |
| States | `loading`, `error` + `onRetry`, `empty` on `<DataTable>` |

## When to use

- Lists that people work through: issues, invoices, members, apps, time entries.
- Any table that needs to sort, filter, select or page.

## When not to use

- Read-only rows with nothing to do: use `Table` directly. It is lighter.
- Spreadsheet editing (cell focus, inline editing): out of scope.
- Very large lists (thousands of rows client-side): paginate on the server with `manual`.

## Import

```tsx
import {
  DataTable, DataTableFacetFilter, DataTablePagination, DataTableSearch,
  DataTableToolbar, DataTableViewOptions, useDataTable, type DataTableColumn,
} from "@fadymondy/nasaq/web";
```

## Quick start

```tsx
const columns: DataTableColumn<Issue>[] = [
  { id: "key", header: "Key", cell: (r) => r.key, sortValue: (r) => r.key, searchValue: (r) => r.key, hideable: false },
  { id: "title", header: "Title", cell: (r) => r.title, sortValue: (r) => r.title, searchValue: (r) => r.title },
  { id: "status", header: "Status", cell: (r) => <Status tone={tone(r)}>{r.status}</Status>, filterValue: (r) => r.status },
  { id: "due", header: "Due", cell: (r) => format(r.due), sortValue: (r) => r.due, align: "end" },
];

function Issues({ issues }: { issues: Issue[] }) {
  const table = useDataTable({ data: issues, columns, getRowId: (r) => r.key, pageSize: 20, selectable: true });
  return (
    <div className="flex flex-col gap-3">
      <DataTableToolbar>
        <DataTableSearch table={table} placeholder="Search issues…" />
        <DataTableFacetFilter table={table} column="status" options={statusOptions} />
        <DataTableViewOptions table={table} />
      </DataTableToolbar>
      <DataTable
        table={table}
        label="Issues"
        onRowClick={(r) => navigate(`/issues/${r.key}`)}
        rowActions={(r) => [
          { id: "edit", label: "Edit", icon: Pencil, onSelect: () => edit(r) },
          { id: "delete", label: "Delete", icon: Trash2, danger: true, group: "danger", onSelect: () => remove(r) },
        ]}
      />
      <DataTablePagination table={table} />
    </div>
  );
}
```

Define `columns` outside the component, or wrap it in `useMemo`.

## Anatomy

```
DataTableToolbar            search · facet filters · View (pushed to the inline end)
  or DataTableBulkActions   "3 selected" · your buttons · ✕ (swap it in while table.selection.size > 0)
DataTable                   ☐ | sortable headers ↕ | … | ⋯ row actions
DataTablePagination         "1–20 of 143"  ‹ ›
```

## API

### `useDataTable(options)`

| Option | Type | Notes |
| --- | --- | --- |
| `data`, `columns`, `getRowId` | | Required. |
| `pageSize` | `number` | Omit for no pagination. |
| `selectable` | `boolean` | Adds the checkbox column. |
| `density`, `frame`, `bordered`, `striped`, `hover` | see [`Table`](https://docs.nasaqui.com/components/table) | Table style, passed straight to `Table`. Default: `density="default"`, hover on. |
| `defaultSort` | `DataTableSort \| null` | `{ id, direction }`. |
| `sort`, `query`, `filters`, `page`, `selection`, `hidden` | `{ value, onChange }` | Control any piece of state (URL params, server). |
| `manual`, `rowCount` | `boolean`, `number` | `data` is already sorted, filtered and paged by the server. |
| `multiSort` | `boolean` | Shift-click a header to add it as a further sort key. |
| `defaultSorting`, `sorting` | `DataTableSort[]` | All sort keys, in priority order. `sorting` is `{ value, onChange }`. `sort` still works and controls the first key. |
| `ranges` | `{ value, onChange }` | Control the range filters: `Record<columnId, { min?, max? }>`. |
| `perPage` | `{ value, onChange }` | Control the page size (the rows-per-page choice). |
| `expanded` | `{ value, onChange }` | Control which rows are open (`Set` of row ids). |
| `pinning` | `{ value, onChange }` | Control pinning: `{ start?: ids, end?: ids }`. Uncontrolled, columns start from their `pin`. |
| `resizable`, `sizes` | `boolean`, `{ value, onChange }` | Drag, or arrow-key, column borders. `sizes` is `Record<columnId, px>`. |

It returns a `DataTableInstance`: `rows` (what to render), `rowCount`, `sort`/`toggleSort`, `query`/`setQuery`,
`filters`/`setFilter`/`resetFilters`, `isFiltered`, `page`/`setPage`/`pageCount`, `hidden`/`toggleColumn`,
`selection`/`selectedRows`/`toggleRow`/`togglePage`/`setSelection`, plus `sorting`/`setSorting`,
`ranges`/`setRange`, `setPageSize`, `expanded`/`toggleExpanded`/`setExpanded`, `pinning`/`pinColumn`/`pinOf` and
`sizes`/`setColumnSize`. `visibleColumns` is already in pinned order.

Any change to sort, search or filters goes back to page 1. Search is case-insensitive and folds Arabic
(أ/إ/آ → ا, ة → ه, ى → ي, no tashkeel), so "مراجعه" finds "مراجعة". Sorting uses `Intl.Collator` with
numeric ordering, is stable, and puts empty values last.

With `multiSort`, a plain click sorts by that column alone (asc, desc, off). Shift-click adds it as the next key,
then flips it, then removes it. Headers show the key's position (1, 2, …) when there is more than one.

The pure helpers behind this are exported too and have no React in them: `nextSorting`, `sortTableRows`,
`rangeBound`, `rangeValueOf`, `isActiveRange`, `inRange`, `orderByPinning`, `pinColumnIn`, `pinOffsets` and
`clampColumnSize`, with the types `DataTableSort`, `DataTableSortDirection`, `DataTableRange`, `DataTablePinning`
and `SortableValue`. Use them to run the same sort or range logic on a server.

### `DataTableColumn<T>`

`id`, `header`, `cell` (required). `label` (a plain-text name when `header` is not a string), `sortValue`,
`searchValue`, `filterValue`, `align` (`start` · `end` · `center`), `hideable` (default true), `defaultHidden`,
`className`, `headerClassName`. `rangeValue` (a number or date for `DataTableRangeFilter`), `pin` (`start` ·
`end`), `size`, `minSize`, `maxSize` (pixels) and `resizable` (default true when the table is resizable).

### `<DataTable>`

| Prop | Notes |
| --- | --- |
| `table`, `label` | Required. `label` is the table's accessible name. |
| `rowLabel` | A row's name for "Select MH-728" / "Actions for MH-728". Defaults to the id. |
| `onRowClick` | Click, or Enter on the focused row. Ignores clicks on controls inside the row. |
| `rowActions` | `(row) => DataTableRowAction[]`: `{ id, label, icon?, onSelect, danger?, disabled?, group? }`. |
| `loading` | Skeleton rows and `aria-busy`. |
| `error`, `onRetry` | Replaces the body with `ErrorState`. |
| `empty` | Shown when there is no data. When filtering leaves no rows, "No matching results" with **Clear filters** is shown instead. |
| `renderExpanded` | `(row) => ReactNode`. Adds an expand button column; the detail shows in a full-width row under it. |
| `canExpand` | `(row) => boolean`. Rows that return false get no expand button. |
| `labels` | Override any built-in string. |

### Pieces

- `DataTableToolbar`: a flex row. Put the controls in it.
- `DataTableSearch`: `table`, `placeholder`. Esc clears it.
- `DataTableFacetFilter`: `table`, `column`, `options: { value, label, icon? }[]`, `title?`. A dashed button
  when empty. Shows one chosen label, or the count.
- `DataTableRangeFilter`: `table`, `column` (with `rangeValue`), `kind` (`number` · `date`), `min`, `max`,
  `step`, `format`, `title?`. From / To inputs in a popover; the button reads "100–500", "≥ 100" or "≤ 500".
  Both ends are inclusive; a `date` max covers the whole day.
- `DataTableViewOptions`: the column checklist. The last visible column cannot be hidden. `pinning` adds
  Pin to start / Pin to end / Unpin per column; `density` + `onDensityChange` add a density choice.
- `DataTableBulkActions`: `table` + your buttons. Hidden when nothing is selected. It includes the count and
  a clear button.
- `DataTablePagination`: renders nothing when there is only one page. `pageSizeOptions` (e.g. `[10, 25, 50]`)
  adds a rows-per-page select; it then shows whenever there are more rows than the smallest option.

## Examples

**Sort only.** `useDataTable({ data, columns, getRowId, defaultSort: { id: "due", direction: "asc" } })` and
`<DataTable table={table} label="Issues" />`. No other pieces are needed.

**Server-side.**

```tsx
const [sort, setSort] = useState<DataTableSort | null>(null);
const [page, setPage] = useState(0);
const { data, total } = useIssues({ sort, page });
const table = useDataTable({
  data, columns, getRowId, pageSize: 20, manual: true, rowCount: total,
  sort: { value: sort, onChange: setSort }, page: { value: page, onChange: setPage },
});
```

See the lab for all states: Default, SortOnly, States, MultiSort, PinnedAndResizable, Expandable, RangeFilters, DensityAndPageSize.

## Context menu, table actions and in-cell edit

**Context menu.** `rowActions` also open as a context menu at the pointer on right-click, and at the row on Shift+F10 or the Menu key. Escape returns focus to the row. Inputs, links and Shift+right-click keep the browser's own menu. Pass `contextMenu={false}` to opt out; without `rowActions` nothing changes. It is the shared `ContextMenuActions` from the context-menu component.

**Table actions.** `<DataTableActions actions={[...]} />` in the toolbar: one `primary` button, secondary buttons, an `overflow` group in a ⋯ menu, `iconOnly` for refresh, `loading` for a spinner. Below the `sm` breakpoint the secondary buttons fold into the menu. It sits next to `DataTableBulkActions`, which replaces the toolbar while rows are selected.

**In-cell edit.** Give a column `edit: { type, value, options, validate, disabled, label, render }` and the table an `onCellEdit(row, columnId, value)`. Types: `text` (default), `number`, `select`, `date`, `switch` (toggles in place) and `custom` (`render` gets `commit`/`cancel`/`error`).

| Key | Action |
| --- | --- |
| Enter, F2, double-click | Start editing (typing a character also starts, replacing the value) |
| Enter | Save and move down |
| Tab / Shift+Tab | Save and move to the next / previous editable cell |
| Esc | Cancel and return focus to the cell |

`validate` runs first and keeps the editor open with its message. `onCellEdit` may return `{ error }` or throw: the cell shows the new value with a spinner while pending, then rolls back and shows the message. Update your data before it resolves. Editors are shared with ContentTableEditor (`cell-editors.tsx`). Numbers accept Arabic-Indic digits.

## Accessibility

- A real `<table>` with `aria-label`. Sorted headers set `aria-sort`, and each sortable header is a button.
- Rows use a roving tabindex, so Tab enters the table once. **↑ ↓ Home End** move between rows. **Enter** opens
  the row (`onRowClick`). **Space** toggles selection. **Shift+F10** or the context-menu key opens the row menu.
- The row checkbox and ⋯ button are only in the tab order on the active row.
- The ⋯ appears on hover, on focus, on selected rows, and always on touch screens.
- The header checkbox reports `mixed` when only part of the page is selected.
- Selection count and page range are live text. Loading sets `aria-busy`.

## RTL & i18n

- Built-in strings in English and Arabic, chosen from the Nasaq locale. Override them with `labels`.
- Columns follow the reading direction. `align: "end"` means the inline end, and the ⋯ sits at the inline end.
- Pager chevrons mirror in RTL. Numbers use Latin digits (the Nasaq numeral rule).
- Localise `label`, headers and `rowLabel` yourself.

## Styling & tokens

Rows are the `Table` rows: `hover:bg-nq-hover`, and selected rows use `bg-nq-selected` with `data-state="selected"`.
The bulk bar uses `bg-nq-selected`. Toolbar controls use `h-control-sm`. Pass `className` to the table,
or set `className`/`headerClassName` on a column for widths (`w-24`).

## Do / Don't

- **Do** turn on only what the screen needs. A settings list rarely needs search, and a five-row table never needs paging.
- **Do** give every column a stable `id`. It keys sort, filter and visibility state.
- **Don't** put a primary action inside `rowActions` only. If opening the row is the main action, use `onRowClick`.
- **Don't** hide the column that names the row. Set `hideable: false` on it.

## Related

`table` (the primitives), `checkbox`, `states` (Empty/Error), `dropdown-menu`, `page-actions`, `status`.

## Lab

https://docs.nasaqui.com/?path=/docs/components-data-display-data-table--docs

## Code

### React

```tsx
const columns: DataTableColumn<Issue>[] = [
  { id: "key", header: "Key", cell: (r) => r.key, sortValue: (r) => r.key, searchValue: (r) => r.key, hideable: false },
  { id: "title", header: "Title", cell: (r) => r.title, sortValue: (r) => r.title, searchValue: (r) => r.title },
  { id: "status", header: "Status", cell: (r) => <Status tone={tone(r)}>{r.status}</Status>, filterValue: (r) => r.status },
  { id: "due", header: "Due", cell: (r) => format(r.due), sortValue: (r) => r.due, align: "end" },
];

function Issues({ issues }: { issues: Issue[] }) {
  const table = useDataTable({ data: issues, columns, getRowId: (r) => r.key, pageSize: 20, selectable: true });
  return (
    <div className="flex flex-col gap-3">
      <DataTableToolbar>
        <DataTableSearch table={table} placeholder="Search issues…" />
        <DataTableFacetFilter table={table} column="status" options={statusOptions} />
        <DataTableViewOptions table={table} />
      </DataTableToolbar>
      <DataTable
        table={table}
        label="Issues"
        onRowClick={(r) => navigate(`/issues/${r.key}`)}
        rowActions={(r) => [
          { id: "edit", label: "Edit", icon: Pencil, onSelect: () => edit(r) },
          { id: "delete", label: "Delete", icon: Trash2, danger: true, group: "danger", onSelect: () => remove(r) },
        ]}
      />
      <DataTablePagination table={table} />
    </div>
  );
}
```

### shadcn

```tsx
const columns: DataTableColumn<Issue>[] = [
  { id: "key", header: "Key", cell: (r) => r.key, sortValue: (r) => r.key, searchValue: (r) => r.key, hideable: false },
  { id: "title", header: "Title", cell: (r) => r.title, sortValue: (r) => r.title, searchValue: (r) => r.title },
  { id: "status", header: "Status", cell: (r) => <Status tone={tone(r)}>{r.status}</Status>, filterValue: (r) => r.status },
  { id: "due", header: "Due", cell: (r) => format(r.due), sortValue: (r) => r.due, align: "end" },
];

function Issues({ issues }: { issues: Issue[] }) {
  const table = useDataTable({ data: issues, columns, getRowId: (r) => r.key, pageSize: 20, selectable: true });
  return (
    <div className="flex flex-col gap-3">
      <DataTableToolbar>
        <DataTableSearch table={table} placeholder="Search issues…" />
        <DataTableFacetFilter table={table} column="status" options={statusOptions} />
        <DataTableViewOptions table={table} />
      </DataTableToolbar>
      <DataTable
        table={table}
        label="Issues"
        onRowClick={(r) => navigate(`/issues/${r.key}`)}
        rowActions={(r) => [
          { id: "edit", label: "Edit", icon: Pencil, onSelect: () => edit(r) },
          { id: "delete", label: "Delete", icon: Trash2, danger: true, group: "danger", onSelect: () => remove(r) },
        ]}
      />
      <DataTablePagination table={table} />
    </div>
  );
}
```

### Vue

```vue
<script setup lang="ts">
import {
  NqDataTable,
  NqDataTableFacetFilter,
  NqDataTablePagination,
  NqDataTableSearch,
  NqDataTableToolbar,
  NqDataTableViewOptions,
  NqStatus,
  useDataTable,
  type DataTableColumn,
} from "@fadymondy/nasaq/vue";
import { Pencil, Trash2 } from "lucide-vue-next";
import { h, ref } from "vue";

interface Issue {
  key: string;
  title: string;
  status: "Open" | "In progress" | "Done";
  due: string;
}
const tone = (r: Issue) => (r.status === "Done" ? "success" : r.status === "In progress" ? "info" : "neutral");
const issues = ref<Issue[]>([
  { key: "MH-728", title: "Checkout drops the coupon", status: "In progress", due: "2026-10-05" },
  { key: "MH-731", title: "Arabic invoice totals misalign", status: "Open", due: "2026-10-09" },
  { key: "MH-702", title: "Export CSV timeouts", status: "Done", due: "2026-09-28" },
]);
const columns: DataTableColumn<Issue>[] = [
  { id: "key", header: "Key", cell: (r) => r.key, sortValue: (r) => r.key, searchValue: (r) => r.key, hideable: false },
  { id: "title", header: "Title", cell: (r) => r.title, sortValue: (r) => r.title, searchValue: (r) => r.title },
  { id: "status", header: "Status", cell: (r) => h(NqStatus, { tone: tone(r) }, () => r.status), filterValue: (r) => r.status },
  { id: "due", header: "Due", cell: (r) => r.due, sortValue: (r) => r.due, align: "end" },
];
const statusOptions = ["Open", "In progress", "Done"].map((v) => ({ value: v, label: v }));
const table = useDataTable({ data: issues, columns, getRowId: (r) => r.key, pageSize: 20, selectable: true });
const edit = (r: Issue) => console.log("edit", r.key);
const remove = (r: Issue) => (issues.value = issues.value.filter((i) => i.key !== r.key));
const rowActions = (r: Issue) => [
  { id: "edit", label: "Edit", icon: Pencil, onSelect: () => edit(r) },
  { id: "delete", label: "Delete", icon: Trash2, danger: true, group: "danger", onSelect: () => remove(r) },
];
</script>

<template>
  <div class="flex flex-col gap-3">
    <NqDataTableToolbar>
      <NqDataTableSearch :table="table" placeholder="Search issues…" />
      <NqDataTableFacetFilter :table="table" column="status" :options="statusOptions" />
      <NqDataTableViewOptions :table="table" />
    </NqDataTableToolbar>
    <NqDataTable :table="table" label="Issues" :row-actions="rowActions" />
    <NqDataTablePagination :table="table" />
  </div>
</template>
```

### Blade

```blade
<x-nq::data-table label="Issues" row-key="key" name-key="title" selectable :page-size="20" search="Search issues…" view-options
    :columns="[
        ['id' => 'key', 'header' => 'Key', 'sortable' => true, 'searchable' => true, 'hideable' => false],
        ['id' => 'title', 'header' => 'Title', 'sortable' => true, 'searchable' => true],
        ['id' => 'status', 'header' => 'Status', 'type' => 'status', 'filter' => true, 'options' => [
            ['value' => 'Open', 'label' => 'Open', 'tone' => 'neutral'],
            ['value' => 'In progress', 'label' => 'In progress', 'tone' => 'info'],
            ['value' => 'Done', 'label' => 'Done', 'tone' => 'success'],
        ]],
        ['id' => 'due', 'header' => 'Due', 'type' => 'date', 'sortable' => true, 'align' => 'end'],
    ]"
    :rows="[
        ['key' => 'MH-728', 'title' => 'Checkout drops the coupon', 'status' => 'In progress', 'due' => '2026-10-05'],
        ['key' => 'MH-731', 'title' => 'Arabic invoice totals misalign', 'status' => 'Open', 'due' => '2026-10-09'],
        ['key' => 'MH-702', 'title' => 'Export CSV timeouts', 'status' => 'Done', 'due' => '2026-09-28'],
    ]"
    :row-actions="[
        ['id' => 'edit', 'label' => 'Edit', 'icon' => 'pencil'],
        ['id' => 'delete', 'label' => 'Delete', 'icon' => 'trash-2', 'danger' => true, 'group' => 'danger'],
    ]" />


<x-nq::data-table label="Deployments" class="mt-8" row-key="id" name-key="service" selectable striped multi-sort pinning resizable search="Search deployments…"
    :columns="[
        ['id' => 'service', 'header' => 'Service', 'sortable' => true, 'searchable' => true, 'pin' => 'start', 'size' => 180, 'hideable' => false],
        ['id' => 'region', 'header' => 'Region', 'sortable' => true, 'size' => 140],
        ['id' => 'owner', 'header' => 'Owner', 'sortable' => true, 'size' => 160],
        ['id' => 'requests', 'header' => 'Requests', 'type' => 'number', 'sortable' => true, 'range' => true, 'align' => 'end', 'size' => 140],
        ['id' => 'deployed', 'header' => 'Deployed', 'type' => 'date', 'sortable' => true, 'range' => true, 'size' => 150],
        ['id' => 'status', 'header' => 'Status', 'type' => 'status', 'filter' => true, 'resizable' => false, 'options' => [
            ['value' => 'live', 'label' => 'Live', 'tone' => 'success'],
            ['value' => 'degraded', 'label' => 'Degraded', 'tone' => 'warning'],
        ]],
    ]"
    :rows="[
        ['id' => 'd1', 'service' => 'checkout-api', 'region' => 'eu-west', 'owner' => 'Layla', 'requests' => 18400, 'deployed' => '2026-10-01', 'status' => 'live', 'notes' => 'Rolled out behind the new flag.'],
        ['id' => 'd2', 'service' => 'invoice-worker', 'region' => 'me-central', 'owner' => 'Omar', 'requests' => 9200, 'deployed' => '2026-09-26', 'status' => 'degraded', 'notes' => 'Queue depth is above target.'],
        ['id' => 'd3', 'service' => 'search-index', 'region' => 'eu-west', 'owner' => 'Layla', 'requests' => 4100, 'deployed' => '2026-09-30', 'status' => 'live', 'notes' => ''],
        ['id' => 'd4', 'service' => 'notifier', 'region' => 'us-east', 'owner' => 'Sara', 'requests' => 18400, 'deployed' => '2026-09-18', 'status' => 'live', 'notes' => 'Retries capped at three.'],
    ]"
    :expand-when="['field' => 'notes', 'empty' => false]">
    <x-slot name="expanded"><p class="text-body-sm text-muted-foreground" x-text="row.notes"></p></x-slot>
</x-nq::data-table>
```

### HTML + Alpine

```html
<div data-slot="data-table" x-data="nqDataTable(JSON.parse('[{\u0022key\u0022:\u0022MH-728\u0022,\u0022title\u0022:\u0022Checkout drops the coupon\u0022,\u0022status\u0022:\u0022In progress\u0022,\u0022due\u0022:\u00222026-10-05\u0022},{\u0022key\u0022:\u0022MH-731\u0022,\u0022title\u0022:\u0022Arabic invoice totals misalign\u0022,\u0022status\u0022:\u0022Open\u0022,\u0022due\u0022:\u00222026-10-09\u0022},{\u0022key\u0022:\u0022MH-702\u0022,\u0022title\u0022:\u0022Export CSV timeouts\u0022,\u0022status\u0022:\u0022Done\u0022,\u0022due\u0022:\u00222026-09-28\u0022}]'), JSON.parse('[{\u0022id\u0022:\u0022key\u0022,\u0022header\u0022:\u0022Key\u0022,\u0022sortable\u0022:true,\u0022searchable\u0022:true,\u0022hideable\u0022:false,\u0022type\u0022:\u0022text\u0022},{\u0022id\u0022:\u0022title\u0022,\u0022header\u0022:\u0022Title\u0022,\u0022sortable\u0022:true,\u0022searchable\u0022:true,\u0022type\u0022:\u0022text\u0022},{\u0022id\u0022:\u0022status\u0022,\u0022header\u0022:\u0022Status\u0022,\u0022type\u0022:\u0022status\u0022,\u0022filter\u0022:true,\u0022options\u0022:[{\u0022value\u0022:\u0022Open\u0022,\u0022label\u0022:\u0022Open\u0022,\u0022tone\u0022:\u0022neutral\u0022},{\u0022value\u0022:\u0022In progress\u0022,\u0022label\u0022:\u0022In progress\u0022,\u0022tone\u0022:\u0022info\u0022},{\u0022value\u0022:\u0022Done\u0022,\u0022label\u0022:\u0022Done\u0022,\u0022tone\u0022:\u0022success\u0022}]},{\u0022id\u0022:\u0022due\u0022,\u0022header\u0022:\u0022Due\u0022,\u0022type\u0022:\u0022date\u0022,\u0022sortable\u0022:true,\u0022align\u0022:\u0022end\u0022}]'), JSON.parse('{\u0022key\u0022:\u0022key\u0022,\u0022nameKey\u0022:\u0022title\u0022,\u0022pageSize\u0022:20,\u0022selectable\u0022:true,\u0022locale\u0022:\u0022en\u0022,\u0022actions\u0022:[{\u0022id\u0022:\u0022edit\u0022},{\u0022id\u0022:\u0022delete\u0022,\u0022group\u0022:\u0022danger\u0022}],\u0022labels\u0022:{\u0022selectRow\u0022:\u0022Select {name}\u0022,\u0022rowActions\u0022:\u0022Actions for {name}\u0022,\u0022selected\u0022:\u0022{n} selected\u0022,\u0022range\u0022:\u0022{from}\\u2013{to} of {total}\u0022,\u0022editCell\u0022:\u0022{column}, {row}\u0022,\u0022invalidNumber\u0022:\u0022Enter a number\u0022,\u0022invalidDate\u0022:\u0022Enter a date\u0022,\u0022saving\u0022:\u0022Saving\\u2026\u0022,\u0022saved\u0022:\u0022Saved\u0022,\u0022saveFailed\u0022:\u0022Couldn\\u0027t save the change\u0022,\u0022saveFailedFor\u0022:\u0022Couldn\\u0027t save: {message}\u0022,\u0022expandRow\u0022:\u0022Show details for {name}\u0022,\u0022details\u0022:\u0022Details for {name}\u0022,\u0022ascending\u0022:\u0022ascending\u0022,\u0022descending\u0022:\u0022descending\u0022,\u0022rangeAtLeast\u0022:\u0022\\u2265 {v}\u0022,\u0022rangeAtMost\u0022:\u0022\\u2264 {v}\u0022,\u0022sortPriority\u0022:\u0022sort {n}, {dir}\u0022}}'))" x-modelable="rows"
    class="flex min-w-0 flex-col gap-3">
            <div data-slot="data-table-toolbar" class="flex flex-wrap items-center gap-2">
                            <div data-slot="data-table-search" class="relative w-full sm:w-64">
                    <svg aria-hidden="true" class="pointer-events-none absolute start-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m21 21-4.34-4.34"/>
  <circle cx="11" cy="11" r="8"/>
</svg>                    <input data-slot="input" type="search"
                    x-model="query" x-on:keydown.escape="if (query) { $event.preventDefault(); query = &#039;&#039; }" placeholder="Search issues…" aria-label="Search issues…" class="w-full min-w-0 rounded-control border border-input bg-card px-3 text-foreground min-h-[var(--nq-touch-min,0px)] transition-colors duration-150 ease-nq outline-none placeholder:text-muted-foreground focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px] h-control-sm ps-8 pe-8 text-body-sm [&::-webkit-search-cancel-button]:hidden">
                    <button type="button" x-show="query" aria-label="Clear search" x-on:click="query = ''" style="display: none"
                        class="absolute end-1.5 top-1/2 inline-flex size-5 -translate-y-1/2 items-center justify-center rounded-full text-muted-foreground outline-none hover:bg-nq-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus">
                        <svg aria-hidden="true" class="size-3.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M18 6 6 18"/>
  <path d="m6 6 12 12"/>
</svg>                    </button>
                </div>
                            <div data-slot="dropdown-menu" x-data="nqDropdownMenu(false)" x-modelable="open" class="contents"><button data-slot="dropdown-menu-trigger"
     type="button"                         x-bind="trigger" x-ref="trigger" x-bind:class="facetCount(&#039;status&#039;) ? &#039;&#039; : &#039;border-dashed text-muted-foreground&#039;" data-facet="status" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border bg-card text-foreground hover:bg-nq-hover h-control-sm px-2.5">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M2 5h20"/>
  <path d="M6 12h12"/>
  <path d="M9 19h6"/>
</svg>                        Status
                        <span data-slot="badge" x-show="facetCount('status')" x-text="facetSummary('status')" style="display: none"
                            class="-me-1 inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border border-border px-1.5 text-caption font-medium tabular-nums text-muted-foreground"></span></button>
                    <template x-teleport="body">
    <div data-slot="dropdown-menu-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open" x-anchor.bottom-start.offset.4="$refs.trigger"
        class="z-50 overflow-hidden rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none max-h-[var(--available-height)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0 min-w-48"><div data-slot="dropdown-menu-group" role="group" ><div data-slot="dropdown-menu-checkbox-item" role="menuitemcheckbox" x-data="{ checked: false }" x-modelable="checked" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) checked = ! checked"
    x-bind:aria-checked="checked ? 'true' : 'false'" x-bind:data-checked="checked ? '' : undefined" x-bind:data-unchecked="checked ? undefined : ''"
     data-keep-open         x-model="facet[&#039;status|Open&#039;]" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="checked" class="contents"  style="display:none" ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></span>
    </span>
    Open
</div>
                                                            <div data-slot="dropdown-menu-checkbox-item" role="menuitemcheckbox" x-data="{ checked: false }" x-modelable="checked" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) checked = ! checked"
    x-bind:aria-checked="checked ? 'true' : 'false'" x-bind:data-checked="checked ? '' : undefined" x-bind:data-unchecked="checked ? undefined : ''"
     data-keep-open         x-model="facet[&#039;status|In progress&#039;]" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="checked" class="contents"  style="display:none" ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></span>
    </span>
    In progress
</div>
                                                            <div data-slot="dropdown-menu-checkbox-item" role="menuitemcheckbox" x-data="{ checked: false }" x-modelable="checked" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) checked = ! checked"
    x-bind:aria-checked="checked ? 'true' : 'false'" x-bind:data-checked="checked ? '' : undefined" x-bind:data-unchecked="checked ? undefined : ''"
     data-keep-open         x-model="facet[&#039;status|Done&#039;]" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="checked" class="contents"  style="display:none" ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></span>
    </span>
    Done
</div></div>
                        <div x-show="facetCount('status')" style="display: none">
                            <div data-slot="dropdown-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
                            <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="resetFacet(&#039;status&#039;)" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground">Reset</div>
                        </div></div>
</template></div>
                            <div data-slot="dropdown-menu" x-data="nqDropdownMenu(false)" x-modelable="open" class="contents"><button data-slot="dropdown-menu-trigger"
     type="button"                         x-bind="trigger" x-ref="trigger" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border bg-card text-foreground hover:bg-nq-hover h-control-sm px-2.5 ms-auto">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M14 17H5"/>
  <path d="M19 7h-9"/>
  <circle cx="17" cy="17" r="3"/>
  <circle cx="7" cy="7" r="3"/>
</svg>                        View</button>
                    <template x-teleport="body">
    <div data-slot="dropdown-menu-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open" x-anchor.bottom-end.offset.4="$refs.trigger"
        class="z-50 overflow-hidden rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none max-h-[var(--available-height)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0 min-w-48"><div data-slot="dropdown-menu-group" role="group" ><div data-slot="dropdown-menu-label" role="presentation" class="px-2.5 pt-1.5 pb-1 text-caption font-medium text-muted-foreground">Columns</div>
                                                                    <div data-slot="dropdown-menu-checkbox-item" role="menuitemcheckbox" x-data="{ checked: false }" x-modelable="checked" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) checked = ! checked"
    x-bind:aria-checked="checked ? 'true' : 'false'" x-bind:data-checked="checked ? '' : undefined" x-bind:data-unchecked="checked ? undefined : ''"
     data-keep-open         x-model="shown[&#039;title&#039;]" x-bind:disabled="shown[&#039;title&#039;] &amp;&amp; shownCount() === 1 ? &#039;&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="checked" class="contents"  style="display:none" ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></span>
    </span>
    Title
</div>
                                                                    <div data-slot="dropdown-menu-checkbox-item" role="menuitemcheckbox" x-data="{ checked: false }" x-modelable="checked" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) checked = ! checked"
    x-bind:aria-checked="checked ? 'true' : 'false'" x-bind:data-checked="checked ? '' : undefined" x-bind:data-unchecked="checked ? undefined : ''"
     data-keep-open         x-model="shown[&#039;status&#039;]" x-bind:disabled="shown[&#039;status&#039;] &amp;&amp; shownCount() === 1 ? &#039;&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="checked" class="contents"  style="display:none" ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></span>
    </span>
    Status
</div>
                                                                    <div data-slot="dropdown-menu-checkbox-item" role="menuitemcheckbox" x-data="{ checked: false }" x-modelable="checked" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) checked = ! checked"
    x-bind:aria-checked="checked ? 'true' : 'false'" x-bind:data-checked="checked ? '' : undefined" x-bind:data-unchecked="checked ? undefined : ''"
     data-keep-open         x-model="shown[&#039;due&#039;]" x-bind:disabled="shown[&#039;due&#039;] &amp;&amp; shownCount() === 1 ? &#039;&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="checked" class="contents"  style="display:none" ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></span>
    </span>
    Due
</div></div></div>
</template></div>
                    </div>
            <div data-slot="data-table-bulk-actions" role="toolbar" x-bind:aria-label="selectedText()" x-bind:hidden="selectedCount() === 0" hidden
            class="flex flex-wrap items-center gap-2 rounded-control bg-nq-selected py-1 ps-3 pe-1">
            <span aria-live="polite" class="me-auto text-label tabular-nums text-foreground" x-text="selectedText()"></span>
                        <button type="button" aria-label="Clear selection" x-on:click="clearSelection()"
                class="inline-flex size-control-sm shrink-0 items-center justify-center rounded-control text-foreground outline-none hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus [&_svg]:size-4"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M18 6 6 18"/>
  <path d="m6 6 12 12"/>
</svg></button>
        </div>
    <div data-slot="table-container" role="region" tabindex="0" aria-label="Issues"                 class="relative w-full overflow-x-auto outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus">
        <div data-slot="table" role="table" aria-label="Issues"  x-bind:style="'grid-template-columns: repeat(' + (shownCount() + 2) + ', auto)'"  x-bind:data-density="density"               class="grid w-full min-w-max text-body-sm">
            <div data-slot="table-header" role="rowgroup" class="contents">
                <div role="row" data-slot="table-row" class="col-span-full grid grid-cols-subgrid border-b border-border">
                                            <div role="columnheader" data-slot="table-head"  x-bind:class="pad" class="flex items-center h-row w-10 pe-0 text-start align-middle text-caption font-medium whitespace-nowrap text-muted-foreground">
                            <button type="button" role="checkbox" data-slot="checkbox" aria-label="Select all rows on this page" x-on:click="togglePage()"
                                x-bind:aria-checked="pageSelection() === 'all' ? 'true' : (pageSelection() === 'some' ? 'mixed' : 'false')"
                                x-bind:data-checked="pageSelection() === 'all' ? '' : null" x-bind:data-indeterminate="pageSelection() === 'some' ? '' : null"
                                aria-checked="false" class="relative inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-nq-line-strong bg-card text-primary-foreground outline-none transition-colors duration-150 ease-nq data-checked:border-primary data-checked:bg-primary data-indeterminate:border-primary data-indeterminate:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus after:absolute after:-inset-1 align-middle">
                                <span data-slot="checkbox-indicator" class="flex items-center justify-center [&_svg]:size-3 [&_svg]:stroke-3" x-show="pageSelection() !== 'none'" style="display: none">
                                    <x-lucide-minus aria-hidden="true" x-show="pageSelection() === 'some'" style="display: none" />
                                    <x-lucide-check aria-hidden="true" x-show="pageSelection() === 'all'" style="display: none" />
                                </span>
                            </button>
                        </div>
                                                                                                            <div role="columnheader" data-slot="table-head" data-col="key" x-show="shown['key']"  x-bind:class="pad"  x-bind:aria-sort="ariaSort('key')"                             class="flex items-center h-row text-start align-middle text-caption font-medium whitespace-nowrap text-muted-foreground">
                                                            <button type="button"  x-on:click="toggleSort('key', $event.shiftKey)"
                                    x-bind:class="sortOf('key') ? 'text-foreground' : ''"
                                    class="-mx-1.5 inline-flex h-7 max-w-full items-center gap-1 rounded-control px-1.5 outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus ">
                                    <span >Key</span>
                                    <svg aria-hidden="true" x-show="! sortOf('key')" class="size-3.5 shrink-0 opacity-40" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m7 15 5 5 5-5"/>
  <path d="m7 9 5-5 5 5"/>
</svg>                                    <x-lucide-arrow-up aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('key') === 'asc'" style="display: none" />
                                    <x-lucide-arrow-down aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('key') === 'desc'" style="display: none" />
                                                                    </button>
                                                                                </div>
                                                                    <div role="columnheader" data-slot="table-head" data-col="title" x-show="shown['title']"  x-bind:class="pad"  x-bind:aria-sort="ariaSort('title')"                             class="flex items-center h-row text-start align-middle text-caption font-medium whitespace-nowrap text-muted-foreground">
                                                            <button type="button"  x-on:click="toggleSort('title', $event.shiftKey)"
                                    x-bind:class="sortOf('title') ? 'text-foreground' : ''"
                                    class="-mx-1.5 inline-flex h-7 max-w-full items-center gap-1 rounded-control px-1.5 outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus ">
                                    <span >Title</span>
                                    <svg aria-hidden="true" x-show="! sortOf('title')" class="size-3.5 shrink-0 opacity-40" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m7 15 5 5 5-5"/>
  <path d="m7 9 5-5 5 5"/>
</svg>                                    <x-lucide-arrow-up aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('title') === 'asc'" style="display: none" />
                                    <x-lucide-arrow-down aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('title') === 'desc'" style="display: none" />
                                                                    </button>
                                                                                </div>
                                                                    <div role="columnheader" data-slot="table-head" data-col="status" x-show="shown['status']"  x-bind:class="pad"                             class="flex items-center h-row text-start align-middle text-caption font-medium whitespace-nowrap text-muted-foreground">
                                                            Status
                                                                                </div>
                                                                    <div role="columnheader" data-slot="table-head" data-col="due" x-show="shown['due']"  x-bind:class="pad"  x-bind:aria-sort="ariaSort('due')"                             class="flex items-center h-row text-end justify-end align-middle text-caption font-medium whitespace-nowrap text-muted-foreground">
                                                            <button type="button"  x-on:click="toggleSort('due', $event.shiftKey)"
                                    x-bind:class="sortOf('due') ? 'text-foreground' : ''"
                                    class="-mx-1.5 inline-flex h-7 max-w-full items-center gap-1 rounded-control px-1.5 outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus flex-row-reverse">
                                    <span >Due</span>
                                    <svg aria-hidden="true" x-show="! sortOf('due')" class="size-3.5 shrink-0 opacity-40" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m7 15 5 5 5-5"/>
  <path d="m7 9 5-5 5 5"/>
</svg>                                    <x-lucide-arrow-up aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('due') === 'asc'" style="display: none" />
                                    <x-lucide-arrow-down aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('due') === 'desc'" style="display: none" />
                                                                    </button>
                                                                                </div>
                                                                <div role="columnheader" data-slot="table-head"  x-bind:class="pad" class="flex items-center h-row w-12 text-start align-middle text-caption font-medium whitespace-nowrap text-muted-foreground"><span class="sr-only">Actions</span></div>
                                    </div>
            </div>
                            <div role="rowgroup" class="contents" data-slot="table-body" x-show="rowCount === 0" style="display: none">
                    <div role="row" data-slot="table-row" class="col-span-full grid grid-cols-subgrid border-0">
                        <div role="cell" data-slot="table-cell" class="col-span-full h-auto p-0 whitespace-normal">
                            <div x-show="isFiltered" style="display: none">
                                <div data-slot="empty-state" class="flex flex-col items-center justify-center gap-3 border-dashed border-border px-6 py-12 text-center rounded-card border-0">
            <span data-slot="state-icon" class="inline-flex size-10 items-center justify-center rounded-control border border-border bg-card [&amp;_svg]:size-5 text-muted-foreground">
            <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m21 21-4.34-4.34"/>
  <circle cx="11" cy="11" r="8"/>
</svg>        </span>
        <div class="flex max-w-sm flex-col gap-1">
        <p class="text-label text-foreground">No matching results</p>
                    <p class="text-body-sm text-muted-foreground">Try a different search or clear the filters.</p>
            </div>
    <button type="button" x-on:click="resetFilters()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-border bg-card text-foreground font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 h-control-sm px-2.5">Clear filters</button>
    </div>
                            </div>
                            <div x-show="! isFiltered" style="display: none">
                                <div data-slot="empty-state" class="flex flex-col items-center justify-center gap-3 border-dashed border-border px-6 py-12 text-center rounded-card border-0">
            <span data-slot="state-icon" class="inline-flex size-10 items-center justify-center rounded-control border border-border bg-card [&amp;_svg]:size-5 text-muted-foreground">
            <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/>
  <path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/>
</svg>        </span>
        <div class="flex max-w-sm flex-col gap-1">
        <p class="text-label text-foreground">Nothing here yet</p>
            </div>
    </div>
                            </div>
                        </div>
                    </div>
                </div>
                <template x-for="(row, index) in pageRows" x-bind:key="rid(row)">
                    <div role="rowgroup" class="contents" data-slot="table-body">
                        <div role="row" data-slot="table-row" data-row tabindex="-1" x-bind:tabindex="index === Math.min(active, pageRows.length - 1) ? 0 : -1"
                            x-bind:data-state="isSelected(row) ? 'selected' : null" x-bind:aria-selected="isSelected(row) ? 'true' : null"
                            x-bind:aria-expanded="canExpand(row) ? String(isOpen(row)) : null" x-on:focus="if ($event.target === $event.currentTarget) active = index"
                            x-on:keydown="rowKey($event, row, index, false)"
                             x-on:contextmenu="rowContext(row, $event)" x-on:touchstart.passive="rowTouch(row, $event)" x-on:touchmove.passive="rowTouchEnd()" x-on:touchend="rowTouchEnd()" x-on:touchcancel="rowTouchEnd()"                                                         x-bind:class="(isOpen(row) ? 'border-b-0 ' : '') + (ctxOpen && ctxRow === row ? 'bg-nq-hover' : '')"
                            class="col-span-full grid grid-cols-subgrid group/row border-b border-border outline-none transition-colors duration-150 ease-nq focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-[state=selected]:bg-nq-selected hover:bg-nq-hover ">
                                                            <div role="cell" data-slot="table-cell"  x-bind:class="pad" class="flex items-center h-row w-10 pe-0 align-middle whitespace-nowrap">
                                    <button type="button" role="checkbox" data-slot="checkbox" x-bind:aria-label="say('selectRow', row)" x-on:click="toggleRow(row)"
                                        aria-checked="false" x-bind:aria-checked="isSelected(row) ? 'true' : 'false'" x-bind:data-checked="isSelected(row) ? '' : null" x-bind:data-unchecked="isSelected(row) ? null : ''"
                                        x-bind:tabindex="index === Math.min(active, pageRows.length - 1) ? 0 : -1" class="relative inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-nq-line-strong bg-card text-primary-foreground outline-none transition-colors duration-150 ease-nq data-checked:border-primary data-checked:bg-primary data-indeterminate:border-primary data-indeterminate:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus after:absolute after:-inset-1 align-middle">
                                        <span data-slot="checkbox-indicator" class="flex items-center justify-center [&_svg]:size-3 [&_svg]:stroke-3" x-show="isSelected(row)" style="display: none"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></span>
                                    </button>
                                </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="key" x-show="shown['key']"  x-bind:class="pad"
                                                                        class="flex items-center relative h-row align-middle whitespace-nowrap  ">
                                                                                                                    <span  class="flex min-w-0 items-center gap-1.5 " >
                                                                                            <span class="min-w-0 flex-1  " x-text="shownText(row, col(&#039;key&#039;))"></span>
                                                                                                                                </span>
                                                                    </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="title" x-show="shown['title']"  x-bind:class="pad"
                                                                        class="flex items-center relative h-row align-middle whitespace-nowrap  ">
                                                                                                                    <span  class="flex min-w-0 items-center gap-1.5 " >
                                                                                            <span class="min-w-0 flex-1  " x-text="shownText(row, col(&#039;title&#039;))"></span>
                                                                                                                                </span>
                                                                    </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="status" x-show="shown['status']"  x-bind:class="pad"
                                                                        class="flex items-center relative h-row align-middle whitespace-nowrap  ">
                                                                                                                    <span  class="flex min-w-0 items-center gap-1.5 " >
                                                                                                                                                <span data-slot="status" data-tone="neutral" x-show="shownText(row, col(&#039;status&#039;)) !== '' && tone(row, col(&#039;status&#039;)) === 'neutral'" style="display: none" class="inline-flex min-w-0 items-center gap-1.5 text-body-sm text-foreground">
                                                        <svg aria-hidden="true" class="size-3.5 shrink-0 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
</svg>                                                        <span class="truncate" x-text="shownText(row, col(&#039;status&#039;))"></span>
                                                    </span>
                                                                                                    <span data-slot="status" data-tone="info" x-show="shownText(row, col(&#039;status&#039;)) !== '' && tone(row, col(&#039;status&#039;)) === 'info'" style="display: none" class="inline-flex min-w-0 items-center gap-1.5 text-body-sm text-foreground">
                                                        <svg aria-hidden="true" class="size-3.5 shrink-0 text-nq-info-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <circle cx="12" cy="12" r="1"/>
</svg>                                                        <span class="truncate" x-text="shownText(row, col(&#039;status&#039;))"></span>
                                                    </span>
                                                                                                    <span data-slot="status" data-tone="success" x-show="shownText(row, col(&#039;status&#039;)) !== '' && tone(row, col(&#039;status&#039;)) === 'success'" style="display: none" class="inline-flex min-w-0 items-center gap-1.5 text-body-sm text-foreground">
                                                        <svg aria-hidden="true" class="size-3.5 shrink-0 text-nq-success-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <path d="m9 12 2 2 4-4"/>
</svg>                                                        <span class="truncate" x-text="shownText(row, col(&#039;status&#039;))"></span>
                                                    </span>
                                                                                                    <span data-slot="status" data-tone="warning" x-show="shownText(row, col(&#039;status&#039;)) !== '' && tone(row, col(&#039;status&#039;)) === 'warning'" style="display: none" class="inline-flex min-w-0 items-center gap-1.5 text-body-sm text-foreground">
                                                        <svg aria-hidden="true" class="size-3.5 shrink-0 text-nq-warning-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <line x1="12" x2="12" y1="8" y2="12"/>
  <line x1="12" x2="12.01" y1="16" y2="16"/>
</svg>                                                        <span class="truncate" x-text="shownText(row, col(&#039;status&#039;))"></span>
                                                    </span>
                                                                                                    <span data-slot="status" data-tone="danger" x-show="shownText(row, col(&#039;status&#039;)) !== '' && tone(row, col(&#039;status&#039;)) === 'danger'" style="display: none" class="inline-flex min-w-0 items-center gap-1.5 text-body-sm text-foreground">
                                                        <svg aria-hidden="true" class="size-3.5 shrink-0 text-nq-danger-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <path d="m15 9-6 6"/>
  <path d="m9 9 6 6"/>
</svg>                                                        <span class="truncate" x-text="shownText(row, col(&#039;status&#039;))"></span>
                                                    </span>
                                                                                                                                                                                </span>
                                                                    </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="due" x-show="shown['due']"  x-bind:class="pad"
                                                                        class="flex items-center relative h-row align-middle whitespace-nowrap text-end justify-end ">
                                                                                                                    <span  class="flex min-w-0 items-center gap-1.5 justify-end" >
                                                                                            <span class="min-w-0 flex-1  " x-text="shownText(row, col(&#039;due&#039;))"></span>
                                                                                                                                </span>
                                                                    </div>
                                                            <div role="cell" data-slot="table-cell"  x-bind:class="pad" class="flex items-center h-row w-12 pe-2 text-end align-middle whitespace-nowrap">
                                    <div data-slot="dropdown-menu" x-data="nqDropdownMenu(false)" x-modelable="open" class="contents"><button data-slot="data-table-row-actions"
     type="button"                         x-bind="trigger" x-ref="trigger" x-bind:aria-label="say(&#039;rowActions&#039;, row)" x-show="hasActions(row)" x-bind:tabindex="index === Math.min(active, pageRows.length - 1) ? 0 : -1" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 hover:bg-nq-hover size-control-sm p-0 text-muted-foreground opacity-0 group-hover/row:opacity-100 group-focus-within/row:opacity-100 group-data-[state=selected]/row:opacity-100 data-popup-open:opacity-100 pointer-coarse:opacity-100">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="1"/>
  <circle cx="19" cy="12" r="1"/>
  <circle cx="5" cy="12" r="1"/>
</svg></button>
                                        <template x-teleport="body">
    <div data-slot="dropdown-menu-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open" x-anchor.bottom-end.offset.4="$refs.trigger"
        class="z-50 overflow-hidden rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none max-h-[var(--available-height)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0 min-w-44"><div data-slot="dropdown-menu-group" role="group" ><template x-if="actionOn(row, 0)">
                                                        <div role="none" class="contents">
                                                                                                                        <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="act(&#039;edit&#039;, row)" x-bind:data-disabled="actionOff(row, 0) ? &#039;&#039; : null" x-bind:aria-disabled="actionOff(row, 0) ? &#039;true&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/>
  <path d="m15 5 4 4"/>
</svg>                                                                Edit</div>
                                                        </div>
                                                    </template>
                                                                                                    <template x-if="actionOn(row, 1)">
                                                        <div role="none" class="contents">
                                                            <template x-if="sepBefore(row, 1)"><div data-slot="dropdown-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
</template>                                                            <div data-slot="dropdown-menu-item" role="menuitem" data-variant="danger" x-bind="item"
        x-on:click="act(&#039;delete&#039;, row)" x-bind:data-disabled="actionOff(row, 1) ? &#039;&#039; : null" x-bind:aria-disabled="actionOff(row, 1) ? &#039;true&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 text-nq-danger-text [&_svg]:text-current"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M10 11v6"/>
  <path d="M14 11v6"/>
  <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
  <path d="M3 6h18"/>
  <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
</svg>                                                                Delete</div>
                                                        </div>
                                                    </template></div></div>
</template></div>
                                </div>
                                                    </div>
                                            </div>
                </template>
                    </div>
    </div>
            <nav data-slot="data-table-pagination" aria-label="Pagination" x-show="paged" style="display: none" class="flex flex-wrap items-center justify-end gap-2">
                        <span class="text-caption tabular-nums text-muted-foreground" aria-live="polite" x-text="rangeText()"></span>
            <button type="button" aria-label="Previous page" x-bind:disabled="page === 0 ? '' : null" x-on:click="setPage(page - 1)"
                class="inline-flex size-control-sm shrink-0 items-center justify-center rounded-control text-foreground outline-none hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4"><svg aria-hidden="true" class="rtl:-scale-x-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m15 18-6-6 6-6"/>
</svg></button>
            <button type="button" aria-label="Next page" x-bind:disabled="page >= pageCount - 1 ? '' : null" x-on:click="setPage(page + 1)"
                class="inline-flex size-control-sm shrink-0 items-center justify-center rounded-control text-foreground outline-none hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4"><svg aria-hidden="true" class="rtl:-scale-x-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m9 18 6-6-6-6"/>
</svg></button>
        </nav>
                <div data-slot="data-table-context-menu" x-data="nqContextMenu()" x-effect="menuClosed(open)" class="contents">
            <template x-teleport="body">
    <div data-slot="context-menu-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open"
        class="fixed z-50 overflow-hidden rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none max-h-[var(--available-height)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0 min-w-44"><template x-if="ctxRow && actionOn(ctxRow, 0)">
                        <div role="none" class="contents">
                                                        <div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="act(&#039;edit&#039;, ctxRow)" x-bind:data-disabled="actionOff(ctxRow, 0) ? &#039;&#039; : null" x-bind:aria-disabled="actionOff(ctxRow, 0) ? &#039;true&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/>
  <path d="m15 5 4 4"/>
</svg>                                Edit</div>
                        </div>
                    </template>
                                    <template x-if="ctxRow && actionOn(ctxRow, 1)">
                        <div role="none" class="contents">
                            <template x-if="sepBefore(ctxRow, 1)"><div data-slot="context-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
</template>                            <div data-slot="context-menu-item" role="menuitem" data-variant="danger" x-bind="item"
        x-on:click="act(&#039;delete&#039;, ctxRow)" x-bind:data-disabled="actionOff(ctxRow, 1) ? &#039;&#039; : null" x-bind:aria-disabled="actionOff(ctxRow, 1) ? &#039;true&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 text-nq-danger-text [&_svg]:text-current"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M10 11v6"/>
  <path d="M14 11v6"/>
  <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
  <path d="M3 6h18"/>
  <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
</svg>                                Delete</div>
                        </div>
                    </template></div>
</template>
        </div>
        <span role="status" aria-live="polite" class="sr-only" x-text="announce"></span>
</div>
<div data-slot="data-table" x-data="nqDataTable(JSON.parse('[{\u0022id\u0022:\u0022d1\u0022,\u0022service\u0022:\u0022checkout-api\u0022,\u0022region\u0022:\u0022eu-west\u0022,\u0022owner\u0022:\u0022Layla\u0022,\u0022requests\u0022:18400,\u0022deployed\u0022:\u00222026-10-01\u0022,\u0022status\u0022:\u0022live\u0022,\u0022notes\u0022:\u0022Rolled out behind the new flag.\u0022},{\u0022id\u0022:\u0022d2\u0022,\u0022service\u0022:\u0022invoice-worker\u0022,\u0022region\u0022:\u0022me-central\u0022,\u0022owner\u0022:\u0022Omar\u0022,\u0022requests\u0022:9200,\u0022deployed\u0022:\u00222026-09-26\u0022,\u0022status\u0022:\u0022degraded\u0022,\u0022notes\u0022:\u0022Queue depth is above target.\u0022},{\u0022id\u0022:\u0022d3\u0022,\u0022service\u0022:\u0022search-index\u0022,\u0022region\u0022:\u0022eu-west\u0022,\u0022owner\u0022:\u0022Layla\u0022,\u0022requests\u0022:4100,\u0022deployed\u0022:\u00222026-09-30\u0022,\u0022status\u0022:\u0022live\u0022,\u0022notes\u0022:\u0022\u0022},{\u0022id\u0022:\u0022d4\u0022,\u0022service\u0022:\u0022notifier\u0022,\u0022region\u0022:\u0022us-east\u0022,\u0022owner\u0022:\u0022Sara\u0022,\u0022requests\u0022:18400,\u0022deployed\u0022:\u00222026-09-18\u0022,\u0022status\u0022:\u0022live\u0022,\u0022notes\u0022:\u0022Retries capped at three.\u0022}]'), JSON.parse('[{\u0022id\u0022:\u0022service\u0022,\u0022header\u0022:\u0022Service\u0022,\u0022sortable\u0022:true,\u0022searchable\u0022:true,\u0022pin\u0022:\u0022start\u0022,\u0022size\u0022:180,\u0022hideable\u0022:false,\u0022type\u0022:\u0022text\u0022},{\u0022id\u0022:\u0022region\u0022,\u0022header\u0022:\u0022Region\u0022,\u0022sortable\u0022:true,\u0022size\u0022:140,\u0022type\u0022:\u0022text\u0022},{\u0022id\u0022:\u0022owner\u0022,\u0022header\u0022:\u0022Owner\u0022,\u0022sortable\u0022:true,\u0022size\u0022:160,\u0022type\u0022:\u0022text\u0022},{\u0022id\u0022:\u0022requests\u0022,\u0022header\u0022:\u0022Requests\u0022,\u0022type\u0022:\u0022number\u0022,\u0022sortable\u0022:true,\u0022range\u0022:true,\u0022align\u0022:\u0022end\u0022,\u0022size\u0022:140},{\u0022id\u0022:\u0022deployed\u0022,\u0022header\u0022:\u0022Deployed\u0022,\u0022type\u0022:\u0022date\u0022,\u0022sortable\u0022:true,\u0022range\u0022:true,\u0022size\u0022:150},{\u0022id\u0022:\u0022status\u0022,\u0022header\u0022:\u0022Status\u0022,\u0022type\u0022:\u0022status\u0022,\u0022filter\u0022:true,\u0022resizable\u0022:false,\u0022options\u0022:[{\u0022value\u0022:\u0022live\u0022,\u0022label\u0022:\u0022Live\u0022,\u0022tone\u0022:\u0022success\u0022},{\u0022value\u0022:\u0022degraded\u0022,\u0022label\u0022:\u0022Degraded\u0022,\u0022tone\u0022:\u0022warning\u0022}]}]'), JSON.parse('{\u0022nameKey\u0022:\u0022service\u0022,\u0022selectable\u0022:true,\u0022multiSort\u0022:true,\u0022locale\u0022:\u0022en\u0022,\u0022expandSlot\u0022:true,\u0022expandWhen\u0022:{\u0022field\u0022:\u0022notes\u0022,\u0022empty\u0022:false},\u0022pinning\u0022:true,\u0022resizable\u0022:true,\u0022actions\u0022:[],\u0022labels\u0022:{\u0022selectRow\u0022:\u0022Select {name}\u0022,\u0022rowActions\u0022:\u0022Actions for {name}\u0022,\u0022selected\u0022:\u0022{n} selected\u0022,\u0022range\u0022:\u0022{from}\\u2013{to} of {total}\u0022,\u0022editCell\u0022:\u0022{column}, {row}\u0022,\u0022invalidNumber\u0022:\u0022Enter a number\u0022,\u0022invalidDate\u0022:\u0022Enter a date\u0022,\u0022saving\u0022:\u0022Saving\\u2026\u0022,\u0022saved\u0022:\u0022Saved\u0022,\u0022saveFailed\u0022:\u0022Couldn\\u0027t save the change\u0022,\u0022saveFailedFor\u0022:\u0022Couldn\\u0027t save: {message}\u0022,\u0022expandRow\u0022:\u0022Show details for {name}\u0022,\u0022details\u0022:\u0022Details for {name}\u0022,\u0022ascending\u0022:\u0022ascending\u0022,\u0022descending\u0022:\u0022descending\u0022,\u0022rangeAtLeast\u0022:\u0022\\u2265 {v}\u0022,\u0022rangeAtMost\u0022:\u0022\\u2264 {v}\u0022,\u0022sortPriority\u0022:\u0022sort {n}, {dir}\u0022}}'))" x-modelable="rows"
    class="flex min-w-0 flex-col gap-3 mt-8">
            <div data-slot="data-table-toolbar" class="flex flex-wrap items-center gap-2">
                            <div data-slot="data-table-search" class="relative w-full sm:w-64">
                    <svg aria-hidden="true" class="pointer-events-none absolute start-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m21 21-4.34-4.34"/>
  <circle cx="11" cy="11" r="8"/>
</svg>                    <input data-slot="input" type="search"
                    x-model="query" x-on:keydown.escape="if (query) { $event.preventDefault(); query = &#039;&#039; }" placeholder="Search deployments…" aria-label="Search deployments…" class="w-full min-w-0 rounded-control border border-input bg-card px-3 text-foreground min-h-[var(--nq-touch-min,0px)] transition-colors duration-150 ease-nq outline-none placeholder:text-muted-foreground focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px] h-control-sm ps-8 pe-8 text-body-sm [&::-webkit-search-cancel-button]:hidden">
                    <button type="button" x-show="query" aria-label="Clear search" x-on:click="query = ''" style="display: none"
                        class="absolute end-1.5 top-1/2 inline-flex size-5 -translate-y-1/2 items-center justify-center rounded-full text-muted-foreground outline-none hover:bg-nq-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus">
                        <svg aria-hidden="true" class="size-3.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M18 6 6 18"/>
  <path d="m6 6 12 12"/>
</svg>                    </button>
                </div>
                            <div data-slot="dropdown-menu" x-data="nqDropdownMenu(false)" x-modelable="open" class="contents"><button data-slot="dropdown-menu-trigger"
     type="button"                         x-bind="trigger" x-ref="trigger" x-bind:class="facetCount(&#039;status&#039;) ? &#039;&#039; : &#039;border-dashed text-muted-foreground&#039;" data-facet="status" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border bg-card text-foreground hover:bg-nq-hover h-control-sm px-2.5">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M2 5h20"/>
  <path d="M6 12h12"/>
  <path d="M9 19h6"/>
</svg>                        Status
                        <span data-slot="badge" x-show="facetCount('status')" x-text="facetSummary('status')" style="display: none"
                            class="-me-1 inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border border-border px-1.5 text-caption font-medium tabular-nums text-muted-foreground"></span></button>
                    <template x-teleport="body">
    <div data-slot="dropdown-menu-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open" x-anchor.bottom-start.offset.4="$refs.trigger"
        class="z-50 overflow-hidden rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none max-h-[var(--available-height)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0 min-w-48"><div data-slot="dropdown-menu-group" role="group" ><div data-slot="dropdown-menu-checkbox-item" role="menuitemcheckbox" x-data="{ checked: false }" x-modelable="checked" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) checked = ! checked"
    x-bind:aria-checked="checked ? 'true' : 'false'" x-bind:data-checked="checked ? '' : undefined" x-bind:data-unchecked="checked ? undefined : ''"
     data-keep-open         x-model="facet[&#039;status|live&#039;]" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="checked" class="contents"  style="display:none" ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></span>
    </span>
    Live
</div>
                                                            <div data-slot="dropdown-menu-checkbox-item" role="menuitemcheckbox" x-data="{ checked: false }" x-modelable="checked" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) checked = ! checked"
    x-bind:aria-checked="checked ? 'true' : 'false'" x-bind:data-checked="checked ? '' : undefined" x-bind:data-unchecked="checked ? undefined : ''"
     data-keep-open         x-model="facet[&#039;status|degraded&#039;]" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="checked" class="contents"  style="display:none" ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></span>
    </span>
    Degraded
</div></div>
                        <div x-show="facetCount('status')" style="display: none">
                            <div data-slot="dropdown-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
                            <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="resetFacet(&#039;status&#039;)" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground">Reset</div>
                        </div></div>
</template></div>
                                            <div data-slot="popover" x-data="nqPopover(false)" x-modelable="open" x-id="['nq-popover']" class="contents">
    <button data-slot="data-table-range-filter"
     type="button"                         x-bind:data-popup-open="open ? &#039;&#039; : undefined" x-ref="trigger" aria-haspopup="dialog" x-on:click="toggle()" :aria-expanded="open" x-bind:class="rangeActive(&#039;requests&#039;) ? &#039;&#039; : &#039;border-dashed text-muted-foreground&#039;" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border bg-card text-foreground hover:bg-nq-hover h-control-sm px-2.5">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M10 5H3"/>
  <path d="M12 19H3"/>
  <path d="M14 3v4"/>
  <path d="M16 17v4"/>
  <path d="M21 12h-9"/>
  <path d="M21 19h-5"/>
  <path d="M21 5h-7"/>
  <path d="M8 10v4"/>
  <path d="M8 12H3"/>
</svg>                        Requests
                        <span data-slot="badge" x-show="rangeActive('requests')" x-text="rangeSummary('requests')" style="display: none"
                            class="-me-1 inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border border-border px-1.5 text-caption font-medium tabular-nums text-muted-foreground"></span></button>
                    <template x-teleport="body">
    <div data-slot="popover-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open" x-anchor.bottom-start.offset.6="$refs.trigger"
        class="z-50 max-w-[var(--available-width)] rounded-floating border border-border bg-popover p-4 text-body-sm text-popover-foreground shadow-floating outline-none transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0 w-64"><fieldset class="grid gap-3">
                            <legend class="mb-2 text-label text-foreground">Requests</legend>
                            <div class="grid grid-cols-2 gap-2">
                                                                    <div class="grid gap-1">
                                        <label class="text-caption text-muted-foreground">From
                                            <input type="number"  inputmode="decimal"  data-range="requests-min"
                                                x-bind:value="rangeOf('requests').min ?? ''" x-on:input="setRangeEdge('requests', 'min', $event.target.value)"
                                                class="w-full min-w-0 rounded-control border border-input bg-card px-2 text-body-sm text-foreground outline-none transition-colors duration-150 ease-nq focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus h-control-sm mt-1 tabular-nums">
                                        </label>
                                    </div>
                                                                    <div class="grid gap-1">
                                        <label class="text-caption text-muted-foreground">To
                                            <input type="number"  inputmode="decimal"  data-range="requests-max"
                                                x-bind:value="rangeOf('requests').max ?? ''" x-on:input="setRangeEdge('requests', 'max', $event.target.value)"
                                                class="w-full min-w-0 rounded-control border border-input bg-card px-2 text-body-sm text-foreground outline-none transition-colors duration-150 ease-nq focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus h-control-sm mt-1 tabular-nums">
                                        </label>
                                    </div>
                                                            </div>
                            <button type="button" x-show="rangeActive('requests')" x-on:click="resetRange('requests')" style="display: none"
                                class="inline-flex h-control-sm items-center justify-self-start rounded-control px-2.5 text-label text-foreground outline-none hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-nq-focus">Reset</button>
                        </fieldset></div>
</template>
</div>
                                            <div data-slot="popover" x-data="nqPopover(false)" x-modelable="open" x-id="['nq-popover']" class="contents">
    <button data-slot="data-table-range-filter"
     type="button"                         x-bind:data-popup-open="open ? &#039;&#039; : undefined" x-ref="trigger" aria-haspopup="dialog" x-on:click="toggle()" :aria-expanded="open" x-bind:class="rangeActive(&#039;deployed&#039;) ? &#039;&#039; : &#039;border-dashed text-muted-foreground&#039;" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border bg-card text-foreground hover:bg-nq-hover h-control-sm px-2.5">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M10 5H3"/>
  <path d="M12 19H3"/>
  <path d="M14 3v4"/>
  <path d="M16 17v4"/>
  <path d="M21 12h-9"/>
  <path d="M21 19h-5"/>
  <path d="M21 5h-7"/>
  <path d="M8 10v4"/>
  <path d="M8 12H3"/>
</svg>                        Deployed
                        <span data-slot="badge" x-show="rangeActive('deployed')" x-text="rangeSummary('deployed')" style="display: none"
                            class="-me-1 inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border border-border px-1.5 text-caption font-medium tabular-nums text-muted-foreground"></span></button>
                    <template x-teleport="body">
    <div data-slot="popover-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open" x-anchor.bottom-start.offset.6="$refs.trigger"
        class="z-50 max-w-[var(--available-width)] rounded-floating border border-border bg-popover p-4 text-body-sm text-popover-foreground shadow-floating outline-none transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0 w-64"><fieldset class="grid gap-3">
                            <legend class="mb-2 text-label text-foreground">Deployed</legend>
                            <div class="grid grid-cols-2 gap-2">
                                                                    <div class="grid gap-1">
                                        <label class="text-caption text-muted-foreground">From
                                            <input type="date"  data-range="deployed-min"
                                                x-bind:value="rangeOf('deployed').min ?? ''" x-on:input="setRangeEdge('deployed', 'min', $event.target.value)"
                                                class="w-full min-w-0 rounded-control border border-input bg-card px-2 text-body-sm text-foreground outline-none transition-colors duration-150 ease-nq focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus h-control-sm mt-1 tabular-nums">
                                        </label>
                                    </div>
                                                                    <div class="grid gap-1">
                                        <label class="text-caption text-muted-foreground">To
                                            <input type="date"  data-range="deployed-max"
                                                x-bind:value="rangeOf('deployed').max ?? ''" x-on:input="setRangeEdge('deployed', 'max', $event.target.value)"
                                                class="w-full min-w-0 rounded-control border border-input bg-card px-2 text-body-sm text-foreground outline-none transition-colors duration-150 ease-nq focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus h-control-sm mt-1 tabular-nums">
                                        </label>
                                    </div>
                                                            </div>
                            <button type="button" x-show="rangeActive('deployed')" x-on:click="resetRange('deployed')" style="display: none"
                                class="inline-flex h-control-sm items-center justify-self-start rounded-control px-2.5 text-label text-foreground outline-none hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-nq-focus">Reset</button>
                        </fieldset></div>
</template>
</div>
                            <div data-slot="dropdown-menu" x-data="nqDropdownMenu(false)" x-modelable="open" class="contents"><button data-slot="dropdown-menu-trigger"
     type="button"                         x-bind="trigger" x-ref="trigger" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border bg-card text-foreground hover:bg-nq-hover h-control-sm px-2.5 ms-auto">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M14 17H5"/>
  <path d="M19 7h-9"/>
  <circle cx="17" cy="17" r="3"/>
  <circle cx="7" cy="7" r="3"/>
</svg>                        View</button>
                    <template x-teleport="body">
    <div data-slot="dropdown-menu-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open" x-anchor.bottom-end.offset.4="$refs.trigger"
        class="z-50 overflow-hidden rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none max-h-[var(--available-height)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0 min-w-48"><div data-slot="dropdown-menu-group" role="group" ><div data-slot="dropdown-menu-label" role="presentation" class="px-2.5 pt-1.5 pb-1 text-caption font-medium text-muted-foreground">Columns</div>
                                                                    <div data-slot="dropdown-menu-checkbox-item" role="menuitemcheckbox" x-data="{ checked: false }" x-modelable="checked" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) checked = ! checked"
    x-bind:aria-checked="checked ? 'true' : 'false'" x-bind:data-checked="checked ? '' : undefined" x-bind:data-unchecked="checked ? undefined : ''"
     data-keep-open         x-model="shown[&#039;region&#039;]" x-bind:disabled="shown[&#039;region&#039;] &amp;&amp; shownCount() === 1 ? &#039;&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="checked" class="contents"  style="display:none" ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></span>
    </span>
    Region
</div>
                                                                    <div data-slot="dropdown-menu-checkbox-item" role="menuitemcheckbox" x-data="{ checked: false }" x-modelable="checked" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) checked = ! checked"
    x-bind:aria-checked="checked ? 'true' : 'false'" x-bind:data-checked="checked ? '' : undefined" x-bind:data-unchecked="checked ? undefined : ''"
     data-keep-open         x-model="shown[&#039;owner&#039;]" x-bind:disabled="shown[&#039;owner&#039;] &amp;&amp; shownCount() === 1 ? &#039;&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="checked" class="contents"  style="display:none" ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></span>
    </span>
    Owner
</div>
                                                                    <div data-slot="dropdown-menu-checkbox-item" role="menuitemcheckbox" x-data="{ checked: false }" x-modelable="checked" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) checked = ! checked"
    x-bind:aria-checked="checked ? 'true' : 'false'" x-bind:data-checked="checked ? '' : undefined" x-bind:data-unchecked="checked ? undefined : ''"
     data-keep-open         x-model="shown[&#039;requests&#039;]" x-bind:disabled="shown[&#039;requests&#039;] &amp;&amp; shownCount() === 1 ? &#039;&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="checked" class="contents"  style="display:none" ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></span>
    </span>
    Requests
</div>
                                                                    <div data-slot="dropdown-menu-checkbox-item" role="menuitemcheckbox" x-data="{ checked: false }" x-modelable="checked" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) checked = ! checked"
    x-bind:aria-checked="checked ? 'true' : 'false'" x-bind:data-checked="checked ? '' : undefined" x-bind:data-unchecked="checked ? undefined : ''"
     data-keep-open         x-model="shown[&#039;deployed&#039;]" x-bind:disabled="shown[&#039;deployed&#039;] &amp;&amp; shownCount() === 1 ? &#039;&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="checked" class="contents"  style="display:none" ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></span>
    </span>
    Deployed
</div>
                                                                    <div data-slot="dropdown-menu-checkbox-item" role="menuitemcheckbox" x-data="{ checked: false }" x-modelable="checked" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) checked = ! checked"
    x-bind:aria-checked="checked ? 'true' : 'false'" x-bind:data-checked="checked ? '' : undefined" x-bind:data-unchecked="checked ? undefined : ''"
     data-keep-open         x-model="shown[&#039;status&#039;]" x-bind:disabled="shown[&#039;status&#039;] &amp;&amp; shownCount() === 1 ? &#039;&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="checked" class="contents"  style="display:none" ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></span>
    </span>
    Status
</div></div>
                                                                            <div data-slot="dropdown-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
                            <div data-slot="dropdown-menu-group" role="group" ><div data-slot="dropdown-menu-label" role="presentation" class="px-2.5 pt-1.5 pb-1 text-caption font-medium text-muted-foreground">Pin</div>
                                                                    <div x-show="shown['service']" role="none" class="contents" data-pin-column="service">
                                        <div data-slot="dropdown-menu-sub" role="none" x-data="nqDropdownSub()" class="contents"><div data-slot="dropdown-menu-sub-trigger" role="menuitem" x-ref="subtrigger" x-bind="subTrigger"
        class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground data-popup-open:bg-nq-selected"><span class="min-w-0 flex-1 truncate">Service</span>
                                                <span class="text-caption text-muted-foreground" x-show="pinOf('service')" x-text="pinOf('service') === 'start' ? &#039;Pin to start&#039; : &#039;Pin to end&#039;" style="display: none"></span><svg data-slot="icon" aria-hidden="true" class="rtl:-scale-x-100 ms-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m9 18 6-6-6-6"/>
</svg></div>
                                            <template x-teleport="body">
    <div data-slot="dropdown-menu-sub-content" x-bind="subPopup" x-init="subPopupEl = $el" x-nq-presence="subOpen" x-anchor.right-start.offset.-4="$refs.subtrigger"
        class="z-50 overflow-hidden rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none max-h-[var(--available-height)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0 min-w-40"><div data-slot="dropdown-menu-radio-group" role="group" x-data="{ value: 'start' }" x-modelable="value" x-model="pinSel['service']"><div data-slot="dropdown-menu-radio-item" role="menuitemradio" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) value = 'start'"
    x-bind:aria-checked="value === 'start' ? 'true' : 'false'" x-bind:data-checked="value === 'start' ? '' : undefined" x-bind:data-unchecked="value === 'start' ? undefined : ''"
     data-keep-open         class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="value === 'start'" style="display:none" class="block size-1.5 rounded-full bg-current"></span>
    </span>
    Pin to start
</div>
                                                    <div data-slot="dropdown-menu-radio-item" role="menuitemradio" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) value = 'end'"
    x-bind:aria-checked="value === 'end' ? 'true' : 'false'" x-bind:data-checked="value === 'end' ? '' : undefined" x-bind:data-unchecked="value === 'end' ? undefined : ''"
     data-keep-open         class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="value === 'end'" style="display:none" class="block size-1.5 rounded-full bg-current"></span>
    </span>
    Pin to end
</div>
                                                    <div data-slot="dropdown-menu-radio-item" role="menuitemradio" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) value = 'none'"
    x-bind:aria-checked="value === 'none' ? 'true' : 'false'" x-bind:data-checked="value === 'none' ? '' : undefined" x-bind:data-unchecked="value === 'none' ? undefined : ''"
     data-keep-open         class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="value === 'none'" style="display:none" class="block size-1.5 rounded-full bg-current"></span>
    </span>
    Unpin
</div></div></div>
</template></div>
                                    </div>
                                                                    <div x-show="shown['region']" role="none" class="contents" data-pin-column="region">
                                        <div data-slot="dropdown-menu-sub" role="none" x-data="nqDropdownSub()" class="contents"><div data-slot="dropdown-menu-sub-trigger" role="menuitem" x-ref="subtrigger" x-bind="subTrigger"
        class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground data-popup-open:bg-nq-selected"><span class="min-w-0 flex-1 truncate">Region</span>
                                                <span class="text-caption text-muted-foreground" x-show="pinOf('region')" x-text="pinOf('region') === 'start' ? &#039;Pin to start&#039; : &#039;Pin to end&#039;" style="display: none"></span><svg data-slot="icon" aria-hidden="true" class="rtl:-scale-x-100 ms-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m9 18 6-6-6-6"/>
</svg></div>
                                            <template x-teleport="body">
    <div data-slot="dropdown-menu-sub-content" x-bind="subPopup" x-init="subPopupEl = $el" x-nq-presence="subOpen" x-anchor.right-start.offset.-4="$refs.subtrigger"
        class="z-50 overflow-hidden rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none max-h-[var(--available-height)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0 min-w-40"><div data-slot="dropdown-menu-radio-group" role="group" x-data="{ value: 'none' }" x-modelable="value" x-model="pinSel['region']"><div data-slot="dropdown-menu-radio-item" role="menuitemradio" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) value = 'start'"
    x-bind:aria-checked="value === 'start' ? 'true' : 'false'" x-bind:data-checked="value === 'start' ? '' : undefined" x-bind:data-unchecked="value === 'start' ? undefined : ''"
     data-keep-open         class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="value === 'start'" style="display:none" class="block size-1.5 rounded-full bg-current"></span>
    </span>
    Pin to start
</div>
                                                    <div data-slot="dropdown-menu-radio-item" role="menuitemradio" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) value = 'end'"
    x-bind:aria-checked="value === 'end' ? 'true' : 'false'" x-bind:data-checked="value === 'end' ? '' : undefined" x-bind:data-unchecked="value === 'end' ? undefined : ''"
     data-keep-open         class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="value === 'end'" style="display:none" class="block size-1.5 rounded-full bg-current"></span>
    </span>
    Pin to end
</div>
                                                    <div data-slot="dropdown-menu-radio-item" role="menuitemradio" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) value = 'none'"
    x-bind:aria-checked="value === 'none' ? 'true' : 'false'" x-bind:data-checked="value === 'none' ? '' : undefined" x-bind:data-unchecked="value === 'none' ? undefined : ''"
     data-keep-open         class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="value === 'none'" style="display:none" class="block size-1.5 rounded-full bg-current"></span>
    </span>
    Unpin
</div></div></div>
</template></div>
                                    </div>
                                                                    <div x-show="shown['owner']" role="none" class="contents" data-pin-column="owner">
                                        <div data-slot="dropdown-menu-sub" role="none" x-data="nqDropdownSub()" class="contents"><div data-slot="dropdown-menu-sub-trigger" role="menuitem" x-ref="subtrigger" x-bind="subTrigger"
        class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground data-popup-open:bg-nq-selected"><span class="min-w-0 flex-1 truncate">Owner</span>
                                                <span class="text-caption text-muted-foreground" x-show="pinOf('owner')" x-text="pinOf('owner') === 'start' ? &#039;Pin to start&#039; : &#039;Pin to end&#039;" style="display: none"></span><svg data-slot="icon" aria-hidden="true" class="rtl:-scale-x-100 ms-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m9 18 6-6-6-6"/>
</svg></div>
                                            <template x-teleport="body">
    <div data-slot="dropdown-menu-sub-content" x-bind="subPopup" x-init="subPopupEl = $el" x-nq-presence="subOpen" x-anchor.right-start.offset.-4="$refs.subtrigger"
        class="z-50 overflow-hidden rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none max-h-[var(--available-height)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0 min-w-40"><div data-slot="dropdown-menu-radio-group" role="group" x-data="{ value: 'none' }" x-modelable="value" x-model="pinSel['owner']"><div data-slot="dropdown-menu-radio-item" role="menuitemradio" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) value = 'start'"
    x-bind:aria-checked="value === 'start' ? 'true' : 'false'" x-bind:data-checked="value === 'start' ? '' : undefined" x-bind:data-unchecked="value === 'start' ? undefined : ''"
     data-keep-open         class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="value === 'start'" style="display:none" class="block size-1.5 rounded-full bg-current"></span>
    </span>
    Pin to start
</div>
                                                    <div data-slot="dropdown-menu-radio-item" role="menuitemradio" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) value = 'end'"
    x-bind:aria-checked="value === 'end' ? 'true' : 'false'" x-bind:data-checked="value === 'end' ? '' : undefined" x-bind:data-unchecked="value === 'end' ? undefined : ''"
     data-keep-open         class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="value === 'end'" style="display:none" class="block size-1.5 rounded-full bg-current"></span>
    </span>
    Pin to end
</div>
                                                    <div data-slot="dropdown-menu-radio-item" role="menuitemradio" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) value = 'none'"
    x-bind:aria-checked="value === 'none' ? 'true' : 'false'" x-bind:data-checked="value === 'none' ? '' : undefined" x-bind:data-unchecked="value === 'none' ? undefined : ''"
     data-keep-open         class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="value === 'none'" style="display:none" class="block size-1.5 rounded-full bg-current"></span>
    </span>
    Unpin
</div></div></div>
</template></div>
                                    </div>
                                                                    <div x-show="shown['requests']" role="none" class="contents" data-pin-column="requests">
                                        <div data-slot="dropdown-menu-sub" role="none" x-data="nqDropdownSub()" class="contents"><div data-slot="dropdown-menu-sub-trigger" role="menuitem" x-ref="subtrigger" x-bind="subTrigger"
        class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground data-popup-open:bg-nq-selected"><span class="min-w-0 flex-1 truncate">Requests</span>
                                                <span class="text-caption text-muted-foreground" x-show="pinOf('requests')" x-text="pinOf('requests') === 'start' ? &#039;Pin to start&#039; : &#039;Pin to end&#039;" style="display: none"></span><svg data-slot="icon" aria-hidden="true" class="rtl:-scale-x-100 ms-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m9 18 6-6-6-6"/>
</svg></div>
                                            <template x-teleport="body">
    <div data-slot="dropdown-menu-sub-content" x-bind="subPopup" x-init="subPopupEl = $el" x-nq-presence="subOpen" x-anchor.right-start.offset.-4="$refs.subtrigger"
        class="z-50 overflow-hidden rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none max-h-[var(--available-height)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0 min-w-40"><div data-slot="dropdown-menu-radio-group" role="group" x-data="{ value: 'none' }" x-modelable="value" x-model="pinSel['requests']"><div data-slot="dropdown-menu-radio-item" role="menuitemradio" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) value = 'start'"
    x-bind:aria-checked="value === 'start' ? 'true' : 'false'" x-bind:data-checked="value === 'start' ? '' : undefined" x-bind:data-unchecked="value === 'start' ? undefined : ''"
     data-keep-open         class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="value === 'start'" style="display:none" class="block size-1.5 rounded-full bg-current"></span>
    </span>
    Pin to start
</div>
                                                    <div data-slot="dropdown-menu-radio-item" role="menuitemradio" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) value = 'end'"
    x-bind:aria-checked="value === 'end' ? 'true' : 'false'" x-bind:data-checked="value === 'end' ? '' : undefined" x-bind:data-unchecked="value === 'end' ? undefined : ''"
     data-keep-open         class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="value === 'end'" style="display:none" class="block size-1.5 rounded-full bg-current"></span>
    </span>
    Pin to end
</div>
                                                    <div data-slot="dropdown-menu-radio-item" role="menuitemradio" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) value = 'none'"
    x-bind:aria-checked="value === 'none' ? 'true' : 'false'" x-bind:data-checked="value === 'none' ? '' : undefined" x-bind:data-unchecked="value === 'none' ? undefined : ''"
     data-keep-open         class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="value === 'none'" style="display:none" class="block size-1.5 rounded-full bg-current"></span>
    </span>
    Unpin
</div></div></div>
</template></div>
                                    </div>
                                                                    <div x-show="shown['deployed']" role="none" class="contents" data-pin-column="deployed">
                                        <div data-slot="dropdown-menu-sub" role="none" x-data="nqDropdownSub()" class="contents"><div data-slot="dropdown-menu-sub-trigger" role="menuitem" x-ref="subtrigger" x-bind="subTrigger"
        class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground data-popup-open:bg-nq-selected"><span class="min-w-0 flex-1 truncate">Deployed</span>
                                                <span class="text-caption text-muted-foreground" x-show="pinOf('deployed')" x-text="pinOf('deployed') === 'start' ? &#039;Pin to start&#039; : &#039;Pin to end&#039;" style="display: none"></span><svg data-slot="icon" aria-hidden="true" class="rtl:-scale-x-100 ms-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m9 18 6-6-6-6"/>
</svg></div>
                                            <template x-teleport="body">
    <div data-slot="dropdown-menu-sub-content" x-bind="subPopup" x-init="subPopupEl = $el" x-nq-presence="subOpen" x-anchor.right-start.offset.-4="$refs.subtrigger"
        class="z-50 overflow-hidden rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none max-h-[var(--available-height)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0 min-w-40"><div data-slot="dropdown-menu-radio-group" role="group" x-data="{ value: 'none' }" x-modelable="value" x-model="pinSel['deployed']"><div data-slot="dropdown-menu-radio-item" role="menuitemradio" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) value = 'start'"
    x-bind:aria-checked="value === 'start' ? 'true' : 'false'" x-bind:data-checked="value === 'start' ? '' : undefined" x-bind:data-unchecked="value === 'start' ? undefined : ''"
     data-keep-open         class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="value === 'start'" style="display:none" class="block size-1.5 rounded-full bg-current"></span>
    </span>
    Pin to start
</div>
                                                    <div data-slot="dropdown-menu-radio-item" role="menuitemradio" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) value = 'end'"
    x-bind:aria-checked="value === 'end' ? 'true' : 'false'" x-bind:data-checked="value === 'end' ? '' : undefined" x-bind:data-unchecked="value === 'end' ? undefined : ''"
     data-keep-open         class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="value === 'end'" style="display:none" class="block size-1.5 rounded-full bg-current"></span>
    </span>
    Pin to end
</div>
                                                    <div data-slot="dropdown-menu-radio-item" role="menuitemradio" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) value = 'none'"
    x-bind:aria-checked="value === 'none' ? 'true' : 'false'" x-bind:data-checked="value === 'none' ? '' : undefined" x-bind:data-unchecked="value === 'none' ? undefined : ''"
     data-keep-open         class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="value === 'none'" style="display:none" class="block size-1.5 rounded-full bg-current"></span>
    </span>
    Unpin
</div></div></div>
</template></div>
                                    </div>
                                                                    <div x-show="shown['status']" role="none" class="contents" data-pin-column="status">
                                        <div data-slot="dropdown-menu-sub" role="none" x-data="nqDropdownSub()" class="contents"><div data-slot="dropdown-menu-sub-trigger" role="menuitem" x-ref="subtrigger" x-bind="subTrigger"
        class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground data-popup-open:bg-nq-selected"><span class="min-w-0 flex-1 truncate">Status</span>
                                                <span class="text-caption text-muted-foreground" x-show="pinOf('status')" x-text="pinOf('status') === 'start' ? &#039;Pin to start&#039; : &#039;Pin to end&#039;" style="display: none"></span><svg data-slot="icon" aria-hidden="true" class="rtl:-scale-x-100 ms-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m9 18 6-6-6-6"/>
</svg></div>
                                            <template x-teleport="body">
    <div data-slot="dropdown-menu-sub-content" x-bind="subPopup" x-init="subPopupEl = $el" x-nq-presence="subOpen" x-anchor.right-start.offset.-4="$refs.subtrigger"
        class="z-50 overflow-hidden rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none max-h-[var(--available-height)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0 min-w-40"><div data-slot="dropdown-menu-radio-group" role="group" x-data="{ value: 'none' }" x-modelable="value" x-model="pinSel['status']"><div data-slot="dropdown-menu-radio-item" role="menuitemradio" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) value = 'start'"
    x-bind:aria-checked="value === 'start' ? 'true' : 'false'" x-bind:data-checked="value === 'start' ? '' : undefined" x-bind:data-unchecked="value === 'start' ? undefined : ''"
     data-keep-open         class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="value === 'start'" style="display:none" class="block size-1.5 rounded-full bg-current"></span>
    </span>
    Pin to start
</div>
                                                    <div data-slot="dropdown-menu-radio-item" role="menuitemradio" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) value = 'end'"
    x-bind:aria-checked="value === 'end' ? 'true' : 'false'" x-bind:data-checked="value === 'end' ? '' : undefined" x-bind:data-unchecked="value === 'end' ? undefined : ''"
     data-keep-open         class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="value === 'end'" style="display:none" class="block size-1.5 rounded-full bg-current"></span>
    </span>
    Pin to end
</div>
                                                    <div data-slot="dropdown-menu-radio-item" role="menuitemradio" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) value = 'none'"
    x-bind:aria-checked="value === 'none' ? 'true' : 'false'" x-bind:data-checked="value === 'none' ? '' : undefined" x-bind:data-unchecked="value === 'none' ? undefined : ''"
     data-keep-open         class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="value === 'none'" style="display:none" class="block size-1.5 rounded-full bg-current"></span>
    </span>
    Unpin
</div></div></div>
</template></div>
                                    </div></div></div>
</template></div>
                    </div>
            <div data-slot="data-table-bulk-actions" role="toolbar" x-bind:aria-label="selectedText()" x-bind:hidden="selectedCount() === 0" hidden
            class="flex flex-wrap items-center gap-2 rounded-control bg-nq-selected py-1 ps-3 pe-1">
            <span aria-live="polite" class="me-auto text-label tabular-nums text-foreground" x-text="selectedText()"></span>
                        <button type="button" aria-label="Clear selection" x-on:click="clearSelection()"
                class="inline-flex size-control-sm shrink-0 items-center justify-center rounded-control text-foreground outline-none hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus [&_svg]:size-4"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M18 6 6 18"/>
  <path d="m6 6 12 12"/>
</svg></button>
        </div>
    <div data-slot="table-container" role="region" tabindex="0" aria-label="Deployments"          style="--nq-data-table-pin-bg: var(--background); --nq-data-table-head-tint: color-mix(in oklab, var(--secondary) 50%, transparent); --nq-data-table-stripe: color-mix(in oklab, var(--secondary) 40%, transparent)"         class="relative w-full overflow-x-auto outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus">
        <div data-slot="table" role="table" aria-label="Deployments"  x-bind:style="gridCols()"  x-bind:data-density="density"    data-striped             class="grid w-full min-w-max text-body-sm [&amp;_[role=cell]]:overflow-hidden">
            <div data-slot="table-header" role="rowgroup" class="contents">
                <div role="row" data-slot="table-row" class="col-span-full grid grid-cols-subgrid border-b border-border">
                                            <div role="columnheader" data-slot="table-head" data-col="__nq-select" x-bind:data-pin="pinFor('__nq-select')" x-bind:data-edge="edgeOf('__nq-select')" x-bind:style="cellStyle('__nq-select')" x-bind:class="pad" class="data-[pin]:sticky data-[pin]:z-[1] data-[pin]:bg-[var(--nq-data-table-pin-bg)] data-[edge]:after:pointer-events-none data-[edge]:after:absolute data-[edge]:after:inset-y-0 data-[edge]:after:w-px data-[edge]:after:bg-border data-[edge=start]:after:end-0 data-[edge=end]:after:start-0 flex items-center h-row w-10 pe-0 text-start align-middle text-caption font-medium whitespace-nowrap text-muted-foreground">
                            <button type="button" role="checkbox" data-slot="checkbox" aria-label="Select all rows on this page" x-on:click="togglePage()"
                                x-bind:aria-checked="pageSelection() === 'all' ? 'true' : (pageSelection() === 'some' ? 'mixed' : 'false')"
                                x-bind:data-checked="pageSelection() === 'all' ? '' : null" x-bind:data-indeterminate="pageSelection() === 'some' ? '' : null"
                                aria-checked="false" class="relative inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-nq-line-strong bg-card text-primary-foreground outline-none transition-colors duration-150 ease-nq data-checked:border-primary data-checked:bg-primary data-indeterminate:border-primary data-indeterminate:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus after:absolute after:-inset-1 align-middle">
                                <span data-slot="checkbox-indicator" class="flex items-center justify-center [&_svg]:size-3 [&_svg]:stroke-3" x-show="pageSelection() !== 'none'" style="display: none">
                                    <x-lucide-minus aria-hidden="true" x-show="pageSelection() === 'some'" style="display: none" />
                                    <x-lucide-check aria-hidden="true" x-show="pageSelection() === 'all'" style="display: none" />
                                </span>
                            </button>
                        </div>
                                                                <div role="columnheader" data-slot="table-head" data-col="__nq-expand" x-bind:data-pin="pinFor('__nq-expand')" x-bind:data-edge="edgeOf('__nq-expand')" x-bind:style="cellStyle('__nq-expand')" x-bind:class="pad" class="data-[pin]:sticky data-[pin]:z-[1] data-[pin]:bg-[var(--nq-data-table-pin-bg)] data-[edge]:after:pointer-events-none data-[edge]:after:absolute data-[edge]:after:inset-y-0 data-[edge]:after:w-px data-[edge]:after:bg-border data-[edge=start]:after:end-0 data-[edge=end]:after:start-0 flex items-center h-row w-10 pe-0 text-start align-middle text-caption font-medium whitespace-nowrap text-muted-foreground"><span class="sr-only">Details for </span></div>
                                                                                        <div role="columnheader" data-slot="table-head" data-col="service" x-show="shown['service']" x-bind:data-pin="pinFor('service')" x-bind:data-edge="edgeOf('service')" x-bind:style="cellStyle('service')" x-bind:class="pad"  x-bind:aria-sort="ariaSort('service')"                             class="data-[pin]:sticky data-[pin]:z-[1] data-[pin]:bg-[var(--nq-data-table-pin-bg)] data-[edge]:after:pointer-events-none data-[edge]:after:absolute data-[edge]:after:inset-y-0 data-[edge]:after:w-px data-[edge]:after:bg-border data-[edge=start]:after:end-0 data-[edge=end]:after:start-0 relative flex items-center h-row text-start align-middle text-caption font-medium whitespace-nowrap text-muted-foreground">
                                                            <button type="button"  title="Shift-click to sort by more columns"  x-on:click="toggleSort('service', $event.shiftKey)"
                                    x-bind:class="sortOf('service') ? 'text-foreground' : ''"
                                    class="-mx-1.5 inline-flex h-7 max-w-full items-center gap-1 rounded-control px-1.5 outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus ">
                                    <span  class="truncate" >Service</span>
                                    <svg aria-hidden="true" x-show="! sortOf('service')" class="size-3.5 shrink-0 opacity-40" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m7 15 5 5 5-5"/>
  <path d="m7 9 5-5 5 5"/>
</svg>                                    <x-lucide-arrow-up aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('service') === 'asc'" style="display: none" />
                                    <x-lucide-arrow-down aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('service') === 'desc'" style="display: none" />
                                                                            <span aria-hidden="true" data-slot="data-table-sort-index" x-show="sorting.length > 1 && sortIndex('service') >= 0" x-text="sortIndex('service') + 1" style="display: none"
                                            class="text-[10px] leading-none tabular-nums text-muted-foreground"></span>
                                        <span class="sr-only" x-text="sortPriorityText('service')"></span>
                                                                    </button>
                                                                                        <div role="separator" aria-orientation="vertical" aria-label="Resize Service" tabindex="0" data-slot="data-table-resize-handle"
                                    aria-valuemin="48" aria-valuemax="960" x-bind:aria-valuenow="sizes['service'] ? Math.round(sizes['service']) : null"
                                    x-on:pointerdown="resizeStart($event, 'service')" x-on:pointermove="resizeMove($event, 'service')" x-on:pointerup="resizeEnd()" x-on:pointercancel="resizeEnd()"
                                    x-on:click.stop x-on:dblclick="setColumnSize('service', null)" x-on:keydown="resizeKey($event, 'service')"
                                    class="absolute inset-y-0 end-0 z-[2] w-2 cursor-col-resize touch-none outline-none after:absolute after:inset-y-2 after:end-0 after:w-px after:bg-border after:transition-colors after:duration-150 hover:after:bg-primary focus-visible:after:w-0.5 focus-visible:after:bg-nq-focus"></div>
                                                    </div>
                                                                    <div role="columnheader" data-slot="table-head" data-col="region" x-show="shown['region']" x-bind:data-pin="pinFor('region')" x-bind:data-edge="edgeOf('region')" x-bind:style="cellStyle('region')" x-bind:class="pad"  x-bind:aria-sort="ariaSort('region')"                             class="data-[pin]:sticky data-[pin]:z-[1] data-[pin]:bg-[var(--nq-data-table-pin-bg)] data-[edge]:after:pointer-events-none data-[edge]:after:absolute data-[edge]:after:inset-y-0 data-[edge]:after:w-px data-[edge]:after:bg-border data-[edge=start]:after:end-0 data-[edge=end]:after:start-0 relative flex items-center h-row text-start align-middle text-caption font-medium whitespace-nowrap text-muted-foreground">
                                                            <button type="button"  title="Shift-click to sort by more columns"  x-on:click="toggleSort('region', $event.shiftKey)"
                                    x-bind:class="sortOf('region') ? 'text-foreground' : ''"
                                    class="-mx-1.5 inline-flex h-7 max-w-full items-center gap-1 rounded-control px-1.5 outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus ">
                                    <span  class="truncate" >Region</span>
                                    <svg aria-hidden="true" x-show="! sortOf('region')" class="size-3.5 shrink-0 opacity-40" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m7 15 5 5 5-5"/>
  <path d="m7 9 5-5 5 5"/>
</svg>                                    <x-lucide-arrow-up aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('region') === 'asc'" style="display: none" />
                                    <x-lucide-arrow-down aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('region') === 'desc'" style="display: none" />
                                                                            <span aria-hidden="true" data-slot="data-table-sort-index" x-show="sorting.length > 1 && sortIndex('region') >= 0" x-text="sortIndex('region') + 1" style="display: none"
                                            class="text-[10px] leading-none tabular-nums text-muted-foreground"></span>
                                        <span class="sr-only" x-text="sortPriorityText('region')"></span>
                                                                    </button>
                                                                                        <div role="separator" aria-orientation="vertical" aria-label="Resize Region" tabindex="0" data-slot="data-table-resize-handle"
                                    aria-valuemin="48" aria-valuemax="960" x-bind:aria-valuenow="sizes['region'] ? Math.round(sizes['region']) : null"
                                    x-on:pointerdown="resizeStart($event, 'region')" x-on:pointermove="resizeMove($event, 'region')" x-on:pointerup="resizeEnd()" x-on:pointercancel="resizeEnd()"
                                    x-on:click.stop x-on:dblclick="setColumnSize('region', null)" x-on:keydown="resizeKey($event, 'region')"
                                    class="absolute inset-y-0 end-0 z-[2] w-2 cursor-col-resize touch-none outline-none after:absolute after:inset-y-2 after:end-0 after:w-px after:bg-border after:transition-colors after:duration-150 hover:after:bg-primary focus-visible:after:w-0.5 focus-visible:after:bg-nq-focus"></div>
                                                    </div>
                                                                    <div role="columnheader" data-slot="table-head" data-col="owner" x-show="shown['owner']" x-bind:data-pin="pinFor('owner')" x-bind:data-edge="edgeOf('owner')" x-bind:style="cellStyle('owner')" x-bind:class="pad"  x-bind:aria-sort="ariaSort('owner')"                             class="data-[pin]:sticky data-[pin]:z-[1] data-[pin]:bg-[var(--nq-data-table-pin-bg)] data-[edge]:after:pointer-events-none data-[edge]:after:absolute data-[edge]:after:inset-y-0 data-[edge]:after:w-px data-[edge]:after:bg-border data-[edge=start]:after:end-0 data-[edge=end]:after:start-0 relative flex items-center h-row text-start align-middle text-caption font-medium whitespace-nowrap text-muted-foreground">
                                                            <button type="button"  title="Shift-click to sort by more columns"  x-on:click="toggleSort('owner', $event.shiftKey)"
                                    x-bind:class="sortOf('owner') ? 'text-foreground' : ''"
                                    class="-mx-1.5 inline-flex h-7 max-w-full items-center gap-1 rounded-control px-1.5 outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus ">
                                    <span  class="truncate" >Owner</span>
                                    <svg aria-hidden="true" x-show="! sortOf('owner')" class="size-3.5 shrink-0 opacity-40" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m7 15 5 5 5-5"/>
  <path d="m7 9 5-5 5 5"/>
</svg>                                    <x-lucide-arrow-up aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('owner') === 'asc'" style="display: none" />
                                    <x-lucide-arrow-down aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('owner') === 'desc'" style="display: none" />
                                                                            <span aria-hidden="true" data-slot="data-table-sort-index" x-show="sorting.length > 1 && sortIndex('owner') >= 0" x-text="sortIndex('owner') + 1" style="display: none"
                                            class="text-[10px] leading-none tabular-nums text-muted-foreground"></span>
                                        <span class="sr-only" x-text="sortPriorityText('owner')"></span>
                                                                    </button>
                                                                                        <div role="separator" aria-orientation="vertical" aria-label="Resize Owner" tabindex="0" data-slot="data-table-resize-handle"
                                    aria-valuemin="48" aria-valuemax="960" x-bind:aria-valuenow="sizes['owner'] ? Math.round(sizes['owner']) : null"
                                    x-on:pointerdown="resizeStart($event, 'owner')" x-on:pointermove="resizeMove($event, 'owner')" x-on:pointerup="resizeEnd()" x-on:pointercancel="resizeEnd()"
                                    x-on:click.stop x-on:dblclick="setColumnSize('owner', null)" x-on:keydown="resizeKey($event, 'owner')"
                                    class="absolute inset-y-0 end-0 z-[2] w-2 cursor-col-resize touch-none outline-none after:absolute after:inset-y-2 after:end-0 after:w-px after:bg-border after:transition-colors after:duration-150 hover:after:bg-primary focus-visible:after:w-0.5 focus-visible:after:bg-nq-focus"></div>
                                                    </div>
                                                                    <div role="columnheader" data-slot="table-head" data-col="requests" x-show="shown['requests']" x-bind:data-pin="pinFor('requests')" x-bind:data-edge="edgeOf('requests')" x-bind:style="cellStyle('requests')" x-bind:class="pad"  x-bind:aria-sort="ariaSort('requests')"                             class="data-[pin]:sticky data-[pin]:z-[1] data-[pin]:bg-[var(--nq-data-table-pin-bg)] data-[edge]:after:pointer-events-none data-[edge]:after:absolute data-[edge]:after:inset-y-0 data-[edge]:after:w-px data-[edge]:after:bg-border data-[edge=start]:after:end-0 data-[edge=end]:after:start-0 relative flex items-center h-row text-end justify-end align-middle text-caption font-medium whitespace-nowrap text-muted-foreground">
                                                            <button type="button"  title="Shift-click to sort by more columns"  x-on:click="toggleSort('requests', $event.shiftKey)"
                                    x-bind:class="sortOf('requests') ? 'text-foreground' : ''"
                                    class="-mx-1.5 inline-flex h-7 max-w-full items-center gap-1 rounded-control px-1.5 outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus flex-row-reverse">
                                    <span  class="truncate" >Requests</span>
                                    <svg aria-hidden="true" x-show="! sortOf('requests')" class="size-3.5 shrink-0 opacity-40" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m7 15 5 5 5-5"/>
  <path d="m7 9 5-5 5 5"/>
</svg>                                    <x-lucide-arrow-up aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('requests') === 'asc'" style="display: none" />
                                    <x-lucide-arrow-down aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('requests') === 'desc'" style="display: none" />
                                                                            <span aria-hidden="true" data-slot="data-table-sort-index" x-show="sorting.length > 1 && sortIndex('requests') >= 0" x-text="sortIndex('requests') + 1" style="display: none"
                                            class="text-[10px] leading-none tabular-nums text-muted-foreground"></span>
                                        <span class="sr-only" x-text="sortPriorityText('requests')"></span>
                                                                    </button>
                                                                                        <div role="separator" aria-orientation="vertical" aria-label="Resize Requests" tabindex="0" data-slot="data-table-resize-handle"
                                    aria-valuemin="48" aria-valuemax="960" x-bind:aria-valuenow="sizes['requests'] ? Math.round(sizes['requests']) : null"
                                    x-on:pointerdown="resizeStart($event, 'requests')" x-on:pointermove="resizeMove($event, 'requests')" x-on:pointerup="resizeEnd()" x-on:pointercancel="resizeEnd()"
                                    x-on:click.stop x-on:dblclick="setColumnSize('requests', null)" x-on:keydown="resizeKey($event, 'requests')"
                                    class="absolute inset-y-0 end-0 z-[2] w-2 cursor-col-resize touch-none outline-none after:absolute after:inset-y-2 after:end-0 after:w-px after:bg-border after:transition-colors after:duration-150 hover:after:bg-primary focus-visible:after:w-0.5 focus-visible:after:bg-nq-focus"></div>
                                                    </div>
                                                                    <div role="columnheader" data-slot="table-head" data-col="deployed" x-show="shown['deployed']" x-bind:data-pin="pinFor('deployed')" x-bind:data-edge="edgeOf('deployed')" x-bind:style="cellStyle('deployed')" x-bind:class="pad"  x-bind:aria-sort="ariaSort('deployed')"                             class="data-[pin]:sticky data-[pin]:z-[1] data-[pin]:bg-[var(--nq-data-table-pin-bg)] data-[edge]:after:pointer-events-none data-[edge]:after:absolute data-[edge]:after:inset-y-0 data-[edge]:after:w-px data-[edge]:after:bg-border data-[edge=start]:after:end-0 data-[edge=end]:after:start-0 relative flex items-center h-row text-start align-middle text-caption font-medium whitespace-nowrap text-muted-foreground">
                                                            <button type="button"  title="Shift-click to sort by more columns"  x-on:click="toggleSort('deployed', $event.shiftKey)"
                                    x-bind:class="sortOf('deployed') ? 'text-foreground' : ''"
                                    class="-mx-1.5 inline-flex h-7 max-w-full items-center gap-1 rounded-control px-1.5 outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus ">
                                    <span  class="truncate" >Deployed</span>
                                    <svg aria-hidden="true" x-show="! sortOf('deployed')" class="size-3.5 shrink-0 opacity-40" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m7 15 5 5 5-5"/>
  <path d="m7 9 5-5 5 5"/>
</svg>                                    <x-lucide-arrow-up aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('deployed') === 'asc'" style="display: none" />
                                    <x-lucide-arrow-down aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('deployed') === 'desc'" style="display: none" />
                                                                            <span aria-hidden="true" data-slot="data-table-sort-index" x-show="sorting.length > 1 && sortIndex('deployed') >= 0" x-text="sortIndex('deployed') + 1" style="display: none"
                                            class="text-[10px] leading-none tabular-nums text-muted-foreground"></span>
                                        <span class="sr-only" x-text="sortPriorityText('deployed')"></span>
                                                                    </button>
                                                                                        <div role="separator" aria-orientation="vertical" aria-label="Resize Deployed" tabindex="0" data-slot="data-table-resize-handle"
                                    aria-valuemin="48" aria-valuemax="960" x-bind:aria-valuenow="sizes['deployed'] ? Math.round(sizes['deployed']) : null"
                                    x-on:pointerdown="resizeStart($event, 'deployed')" x-on:pointermove="resizeMove($event, 'deployed')" x-on:pointerup="resizeEnd()" x-on:pointercancel="resizeEnd()"
                                    x-on:click.stop x-on:dblclick="setColumnSize('deployed', null)" x-on:keydown="resizeKey($event, 'deployed')"
                                    class="absolute inset-y-0 end-0 z-[2] w-2 cursor-col-resize touch-none outline-none after:absolute after:inset-y-2 after:end-0 after:w-px after:bg-border after:transition-colors after:duration-150 hover:after:bg-primary focus-visible:after:w-0.5 focus-visible:after:bg-nq-focus"></div>
                                                    </div>
                                                                    <div role="columnheader" data-slot="table-head" data-col="status" x-show="shown['status']" x-bind:data-pin="pinFor('status')" x-bind:data-edge="edgeOf('status')" x-bind:style="cellStyle('status')" x-bind:class="pad"                             class="data-[pin]:sticky data-[pin]:z-[1] data-[pin]:bg-[var(--nq-data-table-pin-bg)] data-[edge]:after:pointer-events-none data-[edge]:after:absolute data-[edge]:after:inset-y-0 data-[edge]:after:w-px data-[edge]:after:bg-border data-[edge=start]:after:end-0 data-[edge=end]:after:start-0 flex items-center h-row text-start align-middle text-caption font-medium whitespace-nowrap text-muted-foreground">
                                                            <span class="min-w-0 truncate">Status</span>
                                                                                </div>
                                                        </div>
            </div>
                            <div role="rowgroup" class="contents" data-slot="table-body" x-show="rowCount === 0" style="display: none">
                    <div role="row" data-slot="table-row" class="col-span-full grid grid-cols-subgrid border-0">
                        <div role="cell" data-slot="table-cell" class="col-span-full h-auto p-0 whitespace-normal">
                            <div x-show="isFiltered" style="display: none">
                                <div data-slot="empty-state" class="flex flex-col items-center justify-center gap-3 border-dashed border-border px-6 py-12 text-center rounded-card border-0">
            <span data-slot="state-icon" class="inline-flex size-10 items-center justify-center rounded-control border border-border bg-card [&amp;_svg]:size-5 text-muted-foreground">
            <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m21 21-4.34-4.34"/>
  <circle cx="11" cy="11" r="8"/>
</svg>        </span>
        <div class="flex max-w-sm flex-col gap-1">
        <p class="text-label text-foreground">No matching results</p>
                    <p class="text-body-sm text-muted-foreground">Try a different search or clear the filters.</p>
            </div>
    <button type="button" x-on:click="resetFilters()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-border bg-card text-foreground font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 h-control-sm px-2.5">Clear filters</button>
    </div>
                            </div>
                            <div x-show="! isFiltered" style="display: none">
                                <div data-slot="empty-state" class="flex flex-col items-center justify-center gap-3 border-dashed border-border px-6 py-12 text-center rounded-card border-0">
            <span data-slot="state-icon" class="inline-flex size-10 items-center justify-center rounded-control border border-border bg-card [&amp;_svg]:size-5 text-muted-foreground">
            <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/>
  <path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/>
</svg>        </span>
        <div class="flex max-w-sm flex-col gap-1">
        <p class="text-label text-foreground">Nothing here yet</p>
            </div>
    </div>
                            </div>
                        </div>
                    </div>
                </div>
                <template x-for="(row, index) in pageRows" x-bind:key="rid(row)">
                    <div role="rowgroup" class="contents" data-slot="table-body">
                        <div role="row" data-slot="table-row" data-row tabindex="-1" x-bind:tabindex="index === Math.min(active, pageRows.length - 1) ? 0 : -1"
                            x-bind:data-state="isSelected(row) ? 'selected' : null" x-bind:aria-selected="isSelected(row) ? 'true' : null"
                            x-bind:aria-expanded="canExpand(row) ? String(isOpen(row)) : null" x-on:focus="if ($event.target === $event.currentTarget) active = index"
                            x-on:keydown="rowKey($event, row, index, false)"
                                                                                    x-bind:class="(index % 2 === 1 ? &#039;bg-secondary/40 is-stripe &#039; : &#039;&#039;) + (isOpen(row) ? 'border-b-0 ' : '') + (ctxOpen && ctxRow === row ? 'bg-nq-hover' : '')"
                            class="col-span-full grid grid-cols-subgrid group/row border-b border-border outline-none transition-colors duration-150 ease-nq focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-[state=selected]:bg-nq-selected hover:bg-nq-hover ">
                                                            <div role="cell" data-slot="table-cell" x-bind:data-pin="pinFor('__nq-select')" x-bind:data-edge="edgeOf('__nq-select')" x-bind:style="cellStyle('__nq-select')" x-bind:class="pad" class="data-[pin]:sticky data-[pin]:z-[1] data-[pin]:bg-[var(--nq-data-table-pin-bg)] group-[.is-stripe]/row:data-[pin]:bg-[image:linear-gradient(var(--nq-data-table-stripe),var(--nq-data-table-stripe))] group-hover/row:data-[pin]:bg-[image:linear-gradient(var(--nq-hover),var(--nq-hover))] group-data-[state=selected]/row:data-[pin]:bg-[image:linear-gradient(var(--nq-selected),var(--nq-selected))] data-[edge]:after:pointer-events-none data-[edge]:after:absolute data-[edge]:after:inset-y-0 data-[edge]:after:w-px data-[edge]:after:bg-border data-[edge=start]:after:end-0 data-[edge=end]:after:start-0 flex items-center h-row w-10 pe-0 align-middle whitespace-nowrap">
                                    <button type="button" role="checkbox" data-slot="checkbox" x-bind:aria-label="say('selectRow', row)" x-on:click="toggleRow(row)"
                                        aria-checked="false" x-bind:aria-checked="isSelected(row) ? 'true' : 'false'" x-bind:data-checked="isSelected(row) ? '' : null" x-bind:data-unchecked="isSelected(row) ? null : ''"
                                        x-bind:tabindex="index === Math.min(active, pageRows.length - 1) ? 0 : -1" class="relative inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-nq-line-strong bg-card text-primary-foreground outline-none transition-colors duration-150 ease-nq data-checked:border-primary data-checked:bg-primary data-indeterminate:border-primary data-indeterminate:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus after:absolute after:-inset-1 align-middle">
                                        <span data-slot="checkbox-indicator" class="flex items-center justify-center [&_svg]:size-3 [&_svg]:stroke-3" x-show="isSelected(row)" style="display: none"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></span>
                                    </button>
                                </div>
                                                                                        <div role="cell" data-slot="table-cell" x-bind:data-pin="pinFor('__nq-expand')" x-bind:data-edge="edgeOf('__nq-expand')" x-bind:style="cellStyle('__nq-expand')" x-bind:class="pad" class="data-[pin]:sticky data-[pin]:z-[1] data-[pin]:bg-[var(--nq-data-table-pin-bg)] group-[.is-stripe]/row:data-[pin]:bg-[image:linear-gradient(var(--nq-data-table-stripe),var(--nq-data-table-stripe))] group-hover/row:data-[pin]:bg-[image:linear-gradient(var(--nq-hover),var(--nq-hover))] group-data-[state=selected]/row:data-[pin]:bg-[image:linear-gradient(var(--nq-selected),var(--nq-selected))] data-[edge]:after:pointer-events-none data-[edge]:after:absolute data-[edge]:after:inset-y-0 data-[edge]:after:w-px data-[edge]:after:bg-border data-[edge=start]:after:end-0 data-[edge=end]:after:start-0 flex items-center h-row w-10 pe-0 align-middle whitespace-nowrap">
                                    <button type="button" data-slot="data-table-expand" x-show="canExpand(row)" x-on:click="toggleExpanded(row)" x-bind:aria-expanded="String(isOpen(row))"
                                        x-bind:aria-label="say('expandRow', row)" x-bind:tabindex="index === Math.min(active, pageRows.length - 1) ? 0 : -1"
                                        class="inline-flex size-control-sm shrink-0 items-center justify-center rounded-control text-muted-foreground outline-none hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus [&_svg]:size-4">
                                        <svg aria-hidden="true" x-bind:class="isOpen(row) ? 'rotate-90 rtl:-rotate-90' : ''" class="transition-transform duration-150 ease-nq rtl:-scale-x-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m9 18 6-6-6-6"/>
</svg>                                    </button>
                                </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="service" x-show="shown['service']" x-bind:data-pin="pinFor('service')" x-bind:data-edge="edgeOf('service')" x-bind:style="cellStyle('service')" x-bind:class="pad"
                                                                        class="data-[pin]:sticky data-[pin]:z-[1] data-[pin]:bg-[var(--nq-data-table-pin-bg)] group-[.is-stripe]/row:data-[pin]:bg-[image:linear-gradient(var(--nq-data-table-stripe),var(--nq-data-table-stripe))] group-hover/row:data-[pin]:bg-[image:linear-gradient(var(--nq-hover),var(--nq-hover))] group-data-[state=selected]/row:data-[pin]:bg-[image:linear-gradient(var(--nq-selected),var(--nq-selected))] data-[edge]:after:pointer-events-none data-[edge]:after:absolute data-[edge]:after:inset-y-0 data-[edge]:after:w-px data-[edge]:after:bg-border data-[edge=start]:after:end-0 data-[edge=end]:after:start-0 flex items-center relative h-row align-middle whitespace-nowrap  ">
                                                                                                                    <span  class="flex min-w-0 items-center gap-1.5 " >
                                                                                            <span class="min-w-0 flex-1 truncate " x-text="shownText(row, col(&#039;service&#039;))"></span>
                                                                                                                                </span>
                                                                    </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="region" x-show="shown['region']" x-bind:data-pin="pinFor('region')" x-bind:data-edge="edgeOf('region')" x-bind:style="cellStyle('region')" x-bind:class="pad"
                                                                        class="data-[pin]:sticky data-[pin]:z-[1] data-[pin]:bg-[var(--nq-data-table-pin-bg)] group-[.is-stripe]/row:data-[pin]:bg-[image:linear-gradient(var(--nq-data-table-stripe),var(--nq-data-table-stripe))] group-hover/row:data-[pin]:bg-[image:linear-gradient(var(--nq-hover),var(--nq-hover))] group-data-[state=selected]/row:data-[pin]:bg-[image:linear-gradient(var(--nq-selected),var(--nq-selected))] data-[edge]:after:pointer-events-none data-[edge]:after:absolute data-[edge]:after:inset-y-0 data-[edge]:after:w-px data-[edge]:after:bg-border data-[edge=start]:after:end-0 data-[edge=end]:after:start-0 flex items-center relative h-row align-middle whitespace-nowrap  ">
                                                                                                                    <span  class="flex min-w-0 items-center gap-1.5 " >
                                                                                            <span class="min-w-0 flex-1 truncate " x-text="shownText(row, col(&#039;region&#039;))"></span>
                                                                                                                                </span>
                                                                    </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="owner" x-show="shown['owner']" x-bind:data-pin="pinFor('owner')" x-bind:data-edge="edgeOf('owner')" x-bind:style="cellStyle('owner')" x-bind:class="pad"
                                                                        class="data-[pin]:sticky data-[pin]:z-[1] data-[pin]:bg-[var(--nq-data-table-pin-bg)] group-[.is-stripe]/row:data-[pin]:bg-[image:linear-gradient(var(--nq-data-table-stripe),var(--nq-data-table-stripe))] group-hover/row:data-[pin]:bg-[image:linear-gradient(var(--nq-hover),var(--nq-hover))] group-data-[state=selected]/row:data-[pin]:bg-[image:linear-gradient(var(--nq-selected),var(--nq-selected))] data-[edge]:after:pointer-events-none data-[edge]:after:absolute data-[edge]:after:inset-y-0 data-[edge]:after:w-px data-[edge]:after:bg-border data-[edge=start]:after:end-0 data-[edge=end]:after:start-0 flex items-center relative h-row align-middle whitespace-nowrap  ">
                                                                                                                    <span  class="flex min-w-0 items-center gap-1.5 " >
                                                                                            <span class="min-w-0 flex-1 truncate " x-text="shownText(row, col(&#039;owner&#039;))"></span>
                                                                                                                                </span>
                                                                    </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="requests" x-show="shown['requests']" x-bind:data-pin="pinFor('requests')" x-bind:data-edge="edgeOf('requests')" x-bind:style="cellStyle('requests')" x-bind:class="pad"
                                                                        class="data-[pin]:sticky data-[pin]:z-[1] data-[pin]:bg-[var(--nq-data-table-pin-bg)] group-[.is-stripe]/row:data-[pin]:bg-[image:linear-gradient(var(--nq-data-table-stripe),var(--nq-data-table-stripe))] group-hover/row:data-[pin]:bg-[image:linear-gradient(var(--nq-hover),var(--nq-hover))] group-data-[state=selected]/row:data-[pin]:bg-[image:linear-gradient(var(--nq-selected),var(--nq-selected))] data-[edge]:after:pointer-events-none data-[edge]:after:absolute data-[edge]:after:inset-y-0 data-[edge]:after:w-px data-[edge]:after:bg-border data-[edge=start]:after:end-0 data-[edge=end]:after:start-0 flex items-center relative h-row align-middle whitespace-nowrap text-end justify-end ">
                                                                                                                    <span  class="flex min-w-0 items-center gap-1.5 justify-end" >
                                                                                            <span class="min-w-0 flex-1 truncate tabular-nums" x-text="shownText(row, col(&#039;requests&#039;))"></span>
                                                                                                                                </span>
                                                                    </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="deployed" x-show="shown['deployed']" x-bind:data-pin="pinFor('deployed')" x-bind:data-edge="edgeOf('deployed')" x-bind:style="cellStyle('deployed')" x-bind:class="pad"
                                                                        class="data-[pin]:sticky data-[pin]:z-[1] data-[pin]:bg-[var(--nq-data-table-pin-bg)] group-[.is-stripe]/row:data-[pin]:bg-[image:linear-gradient(var(--nq-data-table-stripe),var(--nq-data-table-stripe))] group-hover/row:data-[pin]:bg-[image:linear-gradient(var(--nq-hover),var(--nq-hover))] group-data-[state=selected]/row:data-[pin]:bg-[image:linear-gradient(var(--nq-selected),var(--nq-selected))] data-[edge]:after:pointer-events-none data-[edge]:after:absolute data-[edge]:after:inset-y-0 data-[edge]:after:w-px data-[edge]:after:bg-border data-[edge=start]:after:end-0 data-[edge=end]:after:start-0 flex items-center relative h-row align-middle whitespace-nowrap  ">
                                                                                                                    <span  class="flex min-w-0 items-center gap-1.5 " >
                                                                                            <span class="min-w-0 flex-1 truncate " x-text="shownText(row, col(&#039;deployed&#039;))"></span>
                                                                                                                                </span>
                                                                    </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="status" x-show="shown['status']" x-bind:data-pin="pinFor('status')" x-bind:data-edge="edgeOf('status')" x-bind:style="cellStyle('status')" x-bind:class="pad"
                                                                        class="data-[pin]:sticky data-[pin]:z-[1] data-[pin]:bg-[var(--nq-data-table-pin-bg)] group-[.is-stripe]/row:data-[pin]:bg-[image:linear-gradient(var(--nq-data-table-stripe),var(--nq-data-table-stripe))] group-hover/row:data-[pin]:bg-[image:linear-gradient(var(--nq-hover),var(--nq-hover))] group-data-[state=selected]/row:data-[pin]:bg-[image:linear-gradient(var(--nq-selected),var(--nq-selected))] data-[edge]:after:pointer-events-none data-[edge]:after:absolute data-[edge]:after:inset-y-0 data-[edge]:after:w-px data-[edge]:after:bg-border data-[edge=start]:after:end-0 data-[edge=end]:after:start-0 flex items-center relative h-row align-middle whitespace-nowrap  ">
                                                                                                                    <span  class="flex min-w-0 items-center gap-1.5 " >
                                                                                                                                                <span data-slot="status" data-tone="neutral" x-show="shownText(row, col(&#039;status&#039;)) !== '' && tone(row, col(&#039;status&#039;)) === 'neutral'" style="display: none" class="inline-flex min-w-0 items-center gap-1.5 text-body-sm text-foreground">
                                                        <svg aria-hidden="true" class="size-3.5 shrink-0 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
</svg>                                                        <span class="truncate" x-text="shownText(row, col(&#039;status&#039;))"></span>
                                                    </span>
                                                                                                    <span data-slot="status" data-tone="info" x-show="shownText(row, col(&#039;status&#039;)) !== '' && tone(row, col(&#039;status&#039;)) === 'info'" style="display: none" class="inline-flex min-w-0 items-center gap-1.5 text-body-sm text-foreground">
                                                        <svg aria-hidden="true" class="size-3.5 shrink-0 text-nq-info-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <circle cx="12" cy="12" r="1"/>
</svg>                                                        <span class="truncate" x-text="shownText(row, col(&#039;status&#039;))"></span>
                                                    </span>
                                                                                                    <span data-slot="status" data-tone="success" x-show="shownText(row, col(&#039;status&#039;)) !== '' && tone(row, col(&#039;status&#039;)) === 'success'" style="display: none" class="inline-flex min-w-0 items-center gap-1.5 text-body-sm text-foreground">
                                                        <svg aria-hidden="true" class="size-3.5 shrink-0 text-nq-success-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <path d="m9 12 2 2 4-4"/>
</svg>                                                        <span class="truncate" x-text="shownText(row, col(&#039;status&#039;))"></span>
                                                    </span>
                                                                                                    <span data-slot="status" data-tone="warning" x-show="shownText(row, col(&#039;status&#039;)) !== '' && tone(row, col(&#039;status&#039;)) === 'warning'" style="display: none" class="inline-flex min-w-0 items-center gap-1.5 text-body-sm text-foreground">
                                                        <svg aria-hidden="true" class="size-3.5 shrink-0 text-nq-warning-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <line x1="12" x2="12" y1="8" y2="12"/>
  <line x1="12" x2="12.01" y1="16" y2="16"/>
</svg>                                                        <span class="truncate" x-text="shownText(row, col(&#039;status&#039;))"></span>
                                                    </span>
                                                                                                    <span data-slot="status" data-tone="danger" x-show="shownText(row, col(&#039;status&#039;)) !== '' && tone(row, col(&#039;status&#039;)) === 'danger'" style="display: none" class="inline-flex min-w-0 items-center gap-1.5 text-body-sm text-foreground">
                                                        <svg aria-hidden="true" class="size-3.5 shrink-0 text-nq-danger-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <path d="m15 9-6 6"/>
  <path d="m9 9 6 6"/>
</svg>                                                        <span class="truncate" x-text="shownText(row, col(&#039;status&#039;))"></span>
                                                    </span>
                                                                                                                                                                                </span>
                                                                    </div>
                                                    </div>
                                                    <template x-if="isOpen(row)">
                                <div role="row" data-slot="data-table-expanded" class="col-span-full grid grid-cols-subgrid border-b border-border">
                                    <div role="cell" data-slot="table-cell" class="col-span-full h-auto p-0 whitespace-normal">
                                        <section x-bind:aria-label="say('details', row)" class="border-s-2 border-nq-action/50 bg-secondary/40 px-4 py-3 ps-14" ><p class="text-body-sm text-muted-foreground" x-text="row.notes"></p></section>
                                    </div>
                                </div>
                            </template>
                                            </div>
                </template>
                    </div>
    </div>
            <span role="status" aria-live="polite" class="sr-only" x-text="announce"></span>
</div>
```