<baht-list>

Display list with the same server-side contract as baht-table.

Basic

<baht-list></baht-list>

<script>
  const el = document.querySelector('baht-list');
  el.items = [
    {
      "id": "a",
      "title": "Deploy pipeline",
      "subtitle": "Last run 2 min ago",
      "badge": "Running",
      "badgeTone": "success"
    },
    {
      "id": "b",
      "title": "Nightly backup",
      "subtitle": "Last run 6 h ago",
      "badge": "Idle",
      "badgeTone": "neutral"
    },
    {
      "id": "c",
      "title": "Invoice sync",
      "subtitle": "Last run failed",
      "badge": "Failed",
      "badgeTone": "danger"
    }
  ];
</script>

Props

Name	Type	Default	Description
`items`JS	`ListItem[]`	`[]`	{ id?, title, subtitle?, meta?, badge?, badgeTone? }
`loading`	`boolean`	`false`	Skeleton rows
`error`	`boolean`	`false`	Error state
`error-message`	`string`	`"Couldn't load data. Try again."`	Error text
`empty-message`	`string`	`'Nothing here yet.'`	Empty text
`skeleton-rows`	`number`	`5`	Skeletons while loading
`clickable`	`boolean`	`true`	Items clickable

Events

Event	detail	Description
`name`	CustomEvent
`baht-item-click`	`{ item, index, id? }`	Item activated