# useTableRowStatus

## Usage

Hook that returns a TablePlugin which prepends a narrow column signaling per-row status. Return `{status, label}` for a semantic success, warning, or error: Table resolves the matching glyph and tone through the active theme. Return `{color, icon?, label}` for a custom marker: every color is paint-only, an omitted icon renders the stable 8px dot, and an explicit icon renders that caller-selected glyph. Named custom icons keep their released Icon color mapping; raw CSS custom icons inherit the caller's exact paint instead of the previous primary fallback. `label` is required and becomes the accessible image name plus supplemental hover tooltip; return `null` for no indicator. The column header is visually blank but carries a screen-reader-only localized name ("Row status", i18n key `@astryx.table.rowStatus.columnHeader`). Put `getStatus` inside a getter when it reads reactive state; the plugin calls it on every render.

```ts
import { useTableRowStatus } from '@astryx-vue/core/Table'
```

## Examples

### useTableRowStatus — Row Status

The mark at the start of a row is a themed semantic glyph for success, warning, or error, or a custom color dot. The label is the accessible name and the hover tooltip.

```vue
<script setup lang="ts">
import type { TableColumn, TableRowStatus } from '@astryx-vue/core/Table'
import { proportional, Table, useTableRowStatus } from '@astryx-vue/core/Table'

interface Check extends Record<string, unknown> {
  id: string
  name: string
  detail: string
  state: 'success' | 'warning' | 'error' | 'neutral'
}

const checks: Check[] = [
  { id: '1', name: 'Payments', detail: 'Settled', state: 'success' },
  { id: '2', name: 'Inventory', detail: 'Low stock', state: 'warning' },
  { id: '3', name: 'Mail', detail: 'Bounced', state: 'error' },
  { id: '4', name: 'Notes', detail: 'No signal', state: 'neutral' },
]

const columns: TableColumn<Check>[] = [
  { key: 'name', header: 'Service', width: proportional(1) },
  { key: 'detail', header: 'Detail', width: proportional(1) },
]

function statusFor(check: Check): TableRowStatus | null {
  if (check.state === 'neutral')
    return { color: 'gray', label: 'No signal' }
  if (check.state === 'success')
    return { status: 'success', label: 'Settled' }
  if (check.state === 'warning')
    return { status: 'warning', label: 'Low stock' }
  return { status: 'error', label: 'Bounced' }
}

const status = useTableRowStatus<Check>({ getStatus: statusFor })
</script>

<template>
  <Table
    :data="checks"
    :columns="columns"
    id-key="id"
    :plugins="{ status }"
  />
</template>
```

## Properties

The config is a `MaybeRefOrGetter`, so pass a getter or a ref to keep the plugin on the current values.

## Parameters

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `getStatus` | `(item: T) => TableRowStatus \| null` | — | Derive either a semantic outcome or a custom marker. `{status, label}` accepts the closed success/error/warning vocabulary and resolves its glyph and tone through the active theme. `{color, icon?, label}` preserves the stable custom-marker path: color always selects paint, no icon renders an 8px dot, and icon renders the explicit caller glyph. Even color values named success/error/warning remain dots without icon. Valid icon names: close, chevronDown, chevronLeft, chevronRight, chevronsLeft, chevronsRight, check, success, error, warning, info, calendar, clock, externalLink, menu, moreHorizontal, search, upload, arrowUp, arrowDown, arrowsUpDown, funnel, eyeSlash, viewColumns, copy, checkDouble, wrench, stop, microphone, image. The branches are exclusive, label is required and announced via `role="img"`, and `null` leaves the row status cell empty. |

| Field | Type | Description |
| --- | --- | --- |
| `status` | `'success' \| 'warning' \| 'error'` | Semantic outcome. The glyph and the tone come from the theme. Exclusive with `color`. |
| `color` | `'accent' \| 'success' \| 'error' \| 'warning' \| 'red' \| 'orange' \| 'green' \| 'yellow' \| 'blue' \| 'gray' \| (string & {})` | Paint for the marker. Without `icon` it paints the 8px dot; a raw CSS color is used as given. |
| `icon` | `string` | One of the icon names above, or an Iconify id with a `:` in it. Named colors keep their Icon color mapping; a raw CSS color overrides the paint exactly. |
| `label` | `string` | Accessible name for the marker, also shown as a tooltip on hover. |

## Returns

| Field | Type | Description |
| --- | --- | --- |
| `transformColumns` | `(columns: TableColumn[]) => TableColumn[]` | Prepends the status column. Its key is `__rowStatus`, its width is `pixel(28)` and it is not resizable. The header is visually blank and carries the localized name from the message table. |