# Table Selection Toolbar

## Usage

`TableSelectionToolbar` is the bulk-action bar for a table with row selection. `useTableSelectionState` returns two pieces that go to matching consumers: `selectionConfig` to `useTableSelection`, `selectionState` to this bar. The bar reads the count from that state and clears every selected key, so it stays in step with the row checkboxes. Passing a plain `count` and handling `clear` yourself still works.

Product actions go in the `start` slot and the bar owns the count text and the clear command on the trailing side. The bar owns no table or sticky layout: place it in flow above the table, or pin it yourself with `class` or `style`.

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

## Best practices

| Guidance | Practices |
| --- | --- |
| Do | Pass `selectionState` straight from `useTableSelectionState`, so the count and the clear command stay synchronized with row selection. |
| Do | Provide product actions in the `start` slot instead of encoding them as configuration objects. |
| Don't | Inject the toolbar through the Table plugin or its horizontal scroll wrapper. |

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `count` | `number` | `0` | How many rows are selected. Used when `selection` is not given. |
| `selection` | `TableSelectionState` | — | The `selectionState` returned by `useTableSelectionState`. Takes over from `count` and drives the clear command. |
| `label` | `string` | Built-in copy | Accessible name for the action surface. Defaults to `Bulk actions`. |
| `clearLabel` | `string` | Built-in copy | Visible label of the command that clears the whole selection. Defaults to `Unselect All`. |
| `size` | `'sm' \| 'md' \| 'lg'` | `'sm'` | Height of the bar. The clear command follows it. |
| `variant` | `SectionVariant` | `'muted'` | Surface of the bar: `section` uses the surface colour, `muted` the muted background, `transparent` none. |

## Events

- `clear()`: fires when the clear command is clicked. With `selection` passed, the bar empties the selected keys itself before emitting.

## Slots

| Slot | Slot props | Description |
| --- | --- | --- |
| `start` | — | Product actions, aligned to the logical start. Child controls do not inherit `size`, so set it on them. |
| `default` | — | Same place as `start`. Kept for older code; `start` wins when both are given. |
| `label` | `{ count: number }` | Replaces the visible count text for localisation or domain-specific copy. |

## Native attributes

The root element is a `<div>` with `role="toolbar"` and `aria-orientation="horizontal"`.

The root element receives:

- HTML attributes.
- `aria-*` attributes.
- `data-*` attributes.
- `class`.
- `style`.
- Native event listeners.

Three strings come from the locale messages: the accessible name (`Bulk actions`), the count text (`{count} selected`), and the clear label (`Unselect All`). They switch to Chinese after `provideAstryxLocale('zh-CN')`, and `label`, `clearLabel`, and the `label` slot replace them one by one.

When `selection` is passed and nothing is selected, the bar renders nothing at all. The `count` form always renders, so a bar mounted for a fixed count keeps its place.

Two React-only props are not in the Vue API: `xstyle` becomes `class` or `style`, and the whole toolbar is placed by the surrounding layout. `renderSelectionLabel` and `startContent` become the `label` and `start` slots.