@svelte-lean/table 0.1.1 → 0.3.0

package/dist/table/navigation.js

@@ -13,11 +13,29 @@ export function horizontalCell(cell, delta) {
     const cells = dataCells(row);
     return cells[cells.indexOf(cell) + delta];
 }
+/**
+ * The row after or before `row` in the table body, crossing from one `<tbody>` to the next (grid
+ * layout renders the body in sections).
+ */
+function adjacentRow(row, delta) {
+    const sibling = delta > 0 ? 'nextElementSibling' : 'previousElementSibling';
+    const next = row[sibling];
+    if (next)
+        return next;
+    for (let section = row.parentElement?.[sibling]; section; section = section[sibling]) {
+        if (section.tagName !== 'TBODY')
+            continue;
+        const edge = delta > 0 ? section.firstElementChild : section.lastElementChild;
+        if (edge)
+            return edge;
+    }
+    return null;
+}
 /** The nearest cell with the same `data-column` in a following or preceding row. */
 export function verticalCell(cell, delta) {
     const column = cell.dataset.column;
-    const sibling = delta > 0 ? 'nextElementSibling' : 'previousElementSibling';
-    for (let row = cell.parentElement?.[sibling]; row; row = row[sibling]) {
+    const start = cell.parentElement;
+    for (let row = start && adjacentRow(start, delta); row; row = adjacentRow(row, delta)) {
         const target = dataCells(row).find((candidate) => candidate.dataset.column === column);
         if (target)
             return target;

package/dist/table.svelte.js

@@ -30,8 +30,41 @@ export function createTable(options) {
             searchText: options.searchText,
             locale: resolve(options.locale)
         };
-        return (options.getRowModel ?? createRowModel)(context);
+        return stabilize((options.getRowModel ?? createRowModel)(context));
     });
+    /**
+     * Row node identity across models. Every state change builds a new model; a node whose row,
+     * depth and children are unchanged is handed back as the same object, so a renderer keyed by
+     * row id sees nothing to redraw for it after a sort, a selection or an expansion. Only
+     * bookkeeping: the previous nodes by id, replaced by each model.
+     */
+    let previous = new Map();
+    function same(a, b) {
+        return (a.kind === 'row' &&
+            a.data === b.data &&
+            a.depth === b.depth &&
+            a.children.length === b.children.length &&
+            a.children.every((child, i) => child === b.children[i]));
+    }
+    function stabilize(next) {
+        const kept = new Map();
+        const reuse = (node) => {
+            const known = kept.get(node.id);
+            if (known)
+                return known;
+            // Children first: a parent is the same only when its children are the same objects.
+            const children = node.children.length ? node.children.map(reuse) : node.children;
+            const candidate = children === node.children ? node : { ...node, children };
+            const old = previous.get(node.id);
+            const result = old && same(old, candidate) ? old : candidate;
+            kept.set(node.id, result);
+            return result;
+        };
+        const rows = next.rows.map(reuse);
+        const all = next.all.map(reuse);
+        previous = kept;
+        return { ...next, rows, all };
+    }
     const selected = $derived(new Set(state.selection));
     const expanded = $derived(new Set(state.expanded));
     const mode = $derived(resolve(options.selection) ?? 'multiple');

package/dist/types.d.ts

@@ -236,6 +236,15 @@ export interface TableProps<T> {
     title?: Snippet<[RowModel<T>]>;
     showHeader?: boolean;
     tableLayout?: 'auto' | 'fixed';
+    /**
+     * `table` (default): native table layout. `grid`: the same elements laid out as CSS grid rows
+     * with explicit ARIA roles; body rows stand in sections the browser skips while off screen
+     * (`content-visibility: auto`), and column widths are measured from the content once and kept.
+     * For long pages (hundreds of rows) where layout and paint of every row would dominate. In grid
+     * layout `width` is a column's minimum, `maxWidth` caps a measured width (default 480), `span`
+     * is not applied, and `tableLayout` has no effect.
+     */
+    layout?: 'table' | 'grid';
     searchable?: boolean;
     /** Milliseconds between the last keystroke in the search box or a filter input and the state change. */
     searchDelay?: number;
@@ -273,20 +282,31 @@ export interface TableProps<T> {
     /**
      * Keeps the header row in view. With `height` it sticks inside the scroll region; without, it
      * sticks to the page while the table fits its width (`--slean-table-sticky-top` offsets it below
-     * a fixed application bar) and inside the region once the table scrolls sideways.
+     * a fixed application bar). A table wider than its container scrolls sideways in the region,
+     * which captures sticky positioning: the header then scrolls with the rows, unless the region
+     * also scrolls down (a `height`, or a `max-height` from CSS).
      */
     stickyHeader?: boolean;
     height?: string;
     /**
-     * Progressive mounting for large pages. When at least this many new rows arrive after the table
-     * has mounted (a fetch, a page change), the first batch renders at once and the rest follow in
-     * slices of about one frame each, so the main thread never blocks on the whole set. `true` means
-     * 100. The first render (server output, hydration) is always complete. Default `false`.
+     * Progressive mounting for large pages. When at least a first batch of rows the table has not
+     * drawn arrives (the first render in the browser, a fetch, a page change), that batch renders at
+     * once and the rest follow in slices sized from the measured cost of a row, one macrotask apart,
+     * so the main thread never blocks on the whole set. `true` makes the first batch one screenful; a
+     * number sets it. Server output and its hydration are always complete. Default `false`.
      */
     progressive?: boolean | number;
     pagination?: boolean;
     /** Page sizes offered by the pager; the current size is always included. */
     pageSizeOptions?: number[];
+    /**
+     * The page-size control. `native` (default): a native `<select>`. `custom`: the Select primitive
+     * of `@svelte-lean/primitives` (a trigger button and a listbox popup drawn the same in every
+     * engine), around the same native `<select>`, which keeps the value and works without scripts.
+     * `custom` needs the select behavior (`import '@svelte-lean/primitives/select/register'`) and
+     * its styles (`@svelte-lean/styles/select.css`) in the application.
+     */
+    pageSizeSelect?: 'native' | 'custom';
     /** Text of an empty value (`null`, `undefined`, `''`, or `format` returning `null`/`''`). */
     placeholder?: string;
     rowHoverable?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svelte-lean/table",
-  "version": "0.1.1",
+  "version": "0.3.0",
   "description": "A Svelte-native table and data-grid engine that ships only the features you use.",
   "license": "MIT",
   "author": "Ömer Say",
@@ -58,7 +58,7 @@
     "access": "public"
   },
   "peerDependencies": {
-    "svelte": "^5.0.0"
+    "svelte": "^5.20.0"
   },
   "scripts": {
     "build": "yarn run -T svelte-kit sync && yarn run -T svelte-package && node scripts/types.mjs && yarn run -T publint && yarn run -T attw --pack . --profile esm-only --exclude-entrypoints ./style.css --format table-flipped --no-emoji",
@@ -89,5 +89,8 @@
     "pagination",
     "typescript",
     "headless"
-  ]
+  ],
+  "dependencies": {
+    "esm-env": "^1.2.2"
+  }
 }