# list-window — Examples

## basic — fixed-size rows

```html
<list-window-ui item-size="40" overscan="3" style="height:320px">
</list-window-ui>
<script>
  const el = document.querySelector('list-window-ui');
  el.renderRow = (item) => {
    const row = document.createElement('list-item-ui');
    row.setAttribute('text', item.text);
    return row;
  };
  el.items = Array.from({ length: 1000 }, (_, i) => ({
    id: `b-${i}`,
    text: `Row ${i + 1}`,
  }));
</script>
```

## 10,000 rows

```html
<list-window-ui item-size="32" overscan="5" style="height:320px">
</list-window-ui>
<script>
  const el = document.querySelector('list-window-ui');
  el.items = Array.from({ length: 10_000 }, (_, i) => ({
    id: `lg-${i}`,
    text: `Log line ${i}`,
  }));
</script>
```

## pin-bottom — chat-thread / log-tail

```html
<list-window-ui item-size="28" pin-bottom style="height:240px">
</list-window-ui>
<script>
  const el = document.querySelector('list-window-ui');
  el.items = initialMessages;
  // Appending keeps scroll pinned at the bottom.
  el.items = [...el.items, ...newMessages];
</script>
```

## variable-height — feed cards

```html
<list-window-ui estimated-size="120" overscan="2" style="height:360px">
</list-window-ui>
<script>
  const el = document.querySelector('list-window-ui');
  el.renderRow = (item) => buildCardElement(item);
  el.items = cards;
</script>
```

## loading state

```html
<list-window-ui item-size="48" loading style="height:240px"></list-window-ui>
```

## empty state

```html
<list-window-ui item-size="40" style="height:160px">
  <div slot="empty">No items to display.</div>
</list-window-ui>
```
