mates-virtual

Virtualisation directives for the Mates framework.

Extracted from mates core to keep the main bundle lean. Only install this if you need virtual scrolling or masonry layouts.

Install

npm install mates-virtual

Peer dependency: mates >= 0.4.0

What's included

| Export | Description | |--------|-------------| | virtualList | Virtualised vertical/horizontal list — only visible rows render. Heights measured via ResizeObserver. | | virtualMasonry | Virtualised masonry grid — variable-height tiles, only visible ones in the DOM. | | virtualTable | Headless virtualised table (role="table"). Rows must have a stable id. Style via .mates-vtable*. | | masonryGrid | CSS multi-column masonry (not virtual — all items in the DOM). |

Usage

import { html } from "mates";
import {
  virtualList,
  virtualMasonry,
  virtualTable,
  masonryGrid,
} from "mates-virtual";

// Virtual list — wrap a fixed-height overflow:auto container
html`
  <div style="height:600px;overflow:auto">
    ${virtualList(
      items,
      (item) => item.id,
      (item) => html`<div class="row">${item.name}</div>`,
    )}
  </div>
`;

// Headless virtual table
html`
  ${virtualTable(rows, ["id", "name", "email"], { height: "480px" })}
`;

// CSS masonry grid
html`
  ${masonryGrid(
    photos,
    (p) => p.id,
    (p) => html`<img src="${p.src}" loading="lazy" />`,
    { columns: 3, gap: 8 },
  )}
`;

Bundle size

~25 KB minified + gzipped (virtualizer engine + directives).

License

MIT