Virtualised Table — Self-scrolling

mates-virtual virtualList with scroller: true. The virtualizer host IS the scroll container — no wrapper div with overflow:auto needed. The parent only sets a height. 10 000 rows, sortable columns, only the visible rows are in the DOM.

Quick start

import { virtualList } from "mates-virtual";

// scroller: true  →  the host <div> itself scrolls.
// No parent wrapper with overflow:auto needed — just set a height.
html`
  <div style="height:500px">
    ${virtualList(rows, (c) => c.id, (c) => html`…row…`, { scroller: true })}
  </div>
`

10 000 rows — scroller: true, no overflow container

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>

`, { scroller: true })}