Device list
Sortable, searchable table of every device at the demo site, with a status filter and a live throughput sparkline on each row.
Installation
pnpm dlx shadcn@latest add @lumesec/ln-device-listFirst timeRegister the @lumesec registry once, or install by URL+
Adds @lumesec to your components.json:
pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.jsonOr skip the setup and install by URL:
npx shadcn@latest add https://elements.lumesec.ai/r/ln-device-list.jsonUsage
import { LnDeviceList } from "@/components/lumesec/ln-device-list";
export function Example() {
return (
<LnDeviceList />
);
}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.
selectReact proponSelectDetail{ 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 witharia-pressedbuttons (All, Online, Offline). - Sortable column headers contain buttons; the active column carries
aria-sort(ascendingordescending). - Rows are focusable with
tabindex="0". Sparklines arearia-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.
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.
Related
Was this page helpful?