Virtualised Table — In a Container

mates-virtual virtualList inside a parent div with overflow:auto and a fixed height. The parent is the scroll container — no scroller: true needed. Use this pattern when embedding a table inside a card, panel, or layout area. 10 000 rows with sortable columns.

Quick start

import { virtualList } from "mates-virtual";

// No scroller: true  →  the parent div with overflow:auto owns the scroll.
html`
  <div style="height:400px;overflow:auto;border:1px solid …">
    ${virtualList(rows, (c) => c.id, (c) => html`…row…`)}
  </div>
`

10 000 rows inside a bordered panel — parent div scrolls

import { html, atom, renderApp } from 'mates';

import { virtualList } from 'mates-virtual';

import { Avatar } from 'mates-ui';

const ROWS = Array.from({ length: 500 }, (_, i) => ({

id: i,

name: "User " + (i + 1),

initials: String.fromCharCode(65 + (i % 26)) + String.fromCharCode(65 + ((i * 3) % 26)),

role: (["Admin", "Editor", "Viewer", "Developer"])[i % 4],

dept: (["Engineering", "Design", "Marketing", "Sales"])[i % 4],

score: (i * 37 + 13) % 100,

}));

const App = () => {

const rows = atom(ROWS);

return () => html`

${["Name", "Role", "Department", "Score"].map((h) => html`

`)}

</div>

${virtualList(rows(), (c) => c.id, (c) => html`

${Avatar({ initials: c.initials, size: "sm" })}

</div>

<span style="font-size:var(--md-text-sm);font-weight:600;color:${c.score >= 70 ? 'var(--md-color-success)' : c.score >= 40 ? 'var(--md-color-warning)' : 'var(--md-color-error)'};">${c.score}</span>

</div>

`)}