# Device list
> Sortable, searchable table of every device at the demo site, with a status filter and a live throughput sparkline on each row.
- Element: `<ln-device-list>`
- React: `import { LnDeviceList } from "@/components/lumesec/ln-device-list"`
- Collection: Network (https://elements.lumesec.ai/components/network)
- Registry item: https://elements.lumesec.ai/r/ln-device-list.json
- Page: https://elements.lumesec.ai/components/network/device-list



Live preview: https://elements.lumesec.ai/view/ln-device-list

```html
<ln-device-list></ln-device-list>
```

## Installation

```bash
npx shadcn@latest add @lumesec/ln-device-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/ln-device-list.json
```

## Usage

React:

```tsx
import { LnDeviceList } from "@/components/lumesec/ln-device-list";

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

HTML:

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

<ln-device-list></ln-device-list>
```

## Behaviour

Every device at the site in a sortable table. Search by name, address or model and filter by status. Offline devices show a dash instead of a flat line.

## API reference

### Events

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

| Event    | React prop | Detail               | Description                                                                                  |
| -------- | ---------- | -------------------- | -------------------------------------------------------------------------------------------- |
| `select` | `onSelect` | `{ device: string }` | Fires when a row is clicked or Enter is pressed on a focused row. `device` is the device id. |

## Keyboard

| Keys                | Action                                                    |
| ------------------- | --------------------------------------------------------- |
| Enter               | On a focused row: fire `select` for that device.          |
| ArrowDown / ArrowUp | On a focused row: move focus to the next or previous row. |

## Accessibility

* The search field is a `type="search"` input labelled "Search devices".
* The status filter is a `role="group"` labelled Status with `aria-pressed` buttons (All, Online, Offline).
* Sortable column headers contain buttons; the active column carries `aria-sort` (`ascending` or `descending`).
* Rows are focusable with `tabindex="0"`. Sparklines are `aria-hidden`.
* Reduced motion: there is no animation beyond hover transitions, which reduced motion removes.

## 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 `--background`, `--border`, `--card`, `--foreground`, `--input`, `--muted` and `--muted-foreground`.

To restyle only LumeSec elements, set the matching `--ui-*` overrides: `--ui-border`, `--ui-border-strong`, `--ui-border-subtle`, `--ui-fg`, `--ui-fg2`, `--ui-mono`, `--ui-muted`, `--ui-surface` and `--ui-track`.

## Notes

* Lists the built-in demo devices of the network engine without the two internet uplinks (11 devices). No attribute selects other data; throughput is simulated and refreshes every 1.5 s while the element is on screen.
* Search matches name, IP address and model. Sorting by Uptime or Throughput starts descending; other columns start ascending, and a second click reverses the order.
* Uses a container query: below 640px the MAC and Uptime columns hide, below 470px the IP column and the sparklines hide.