# Host list
> Sortable table of the demo hosts with kind, address, occupied ports and live CPU, filtered by kind or by name, address or port.
- Element: `<sv-host-list>`
- React: `import { SvHostList } from "@/components/lumesec/sv-host-list"`
- Collection: Service Map (https://elements.lumesec.ai/components/service-map)
- Registry item: https://elements.lumesec.ai/r/sv-host-list.json
- Page: https://elements.lumesec.ai/components/service-map/host-list



Live preview: https://elements.lumesec.ai/view/sv-host-list

```html
<sv-host-list></sv-host-list>
```

## Installation

```bash
npx shadcn@latest add @lumesec/sv-host-list
```

First time with the @lumesec registry? Register it once, or install by URL:

```bash
npx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json
npx shadcn@latest add https://elements.lumesec.ai/r/sv-host-list.json
```

## Usage

React:

```tsx
import { SvHostList } from "@/components/lumesec/sv-host-list";

export function Example() {
  return (
    <SvHostList />
  );
}
```

HTML:

```html
<script type="module" src="https://elements.lumesec.ai/cdn/sv-host-list.js"></script>

<sv-host-list></sv-host-list>
```

## Behaviour

Every host in a sortable table with its occupied ports. Filter by kind, or search by name, address or port number.

## API reference

### Events

Events bubble and cross the shadow boundary unless the description says otherwise.

| Event    | React prop | Detail             | Description                                                            |
| -------- | ---------- | ------------------ | ---------------------------------------------------------------------- |
| `select` | `onSelect` | `{ host: string }` | Fires when a row is chosen by click, Enter or Space, with the host id. |

## Keyboard

| Keys                | Action                                                    |
| ------------------- | --------------------------------------------------------- |
| Enter / Space       | On a focused row: select the host.                        |
| ArrowDown / ArrowUp | On a focused row: move focus to the next or previous row. |

## Accessibility

* Rows are focusable (`tabindex="0"`) and carry `aria-selected`.
* The Host and CPU headers contain sort buttons; the active column has `aria-sort` (`ascending` for Host, `descending` for CPU).
* The search field is labelled Filter hosts. The kind filter is a `role="group"` labelled Kind with `aria-pressed` buttons.
* Reduced motion: no animation of its own; with reduced motion the CPU bar width transition is switched off. Values still update every 1.5 s.

## Theming

The element reads your shadcn theme tokens through its shadow root, so light and dark follow your theme. The accent comes from `--lumesec`. See [Theming](/docs/theming).

This component reads `--border`, `--foreground`, `--muted` and `--muted-foreground`.

To restyle only LumeSec elements, set the matching `--ui-*` overrides: `--ui-border`, `--ui-fg`, `--ui-mono`, `--ui-muted` and `--ui-raised`.

## Notes

* Shows the 9 hosts of the shared demo infrastructure `INFRA`; the Internet node is left out. No attribute selects a subset.
* Search matches host names and addresses by substring and ports by prefix, so `91` finds hosts with port 9100. Up to three ports are shown per row, then a +N chip.
* CPU values are simulated.
* The table is at least 560 px wide and scrolls horizontally in narrower containers.