@scattered-light/loomiere-base-ui 0.11.0 → 0.13.0

package/README.md

@@ -166,6 +166,16 @@ Pieces for pages that read like an accountant's working paper. They use the them
 
 Totals in a plain table are rows: `<tr data-total="subtotal">` rules a line above, `<tr data-total="grand">` adds a double rule under. Put `data-rule="none"` on label and blank cells so the rules only run under the figures. In a DataTable, `totalStyle="subtotal"` or `"grand"` does the same to the footer (the default, `"band"`, keeps the header tray).
 
+A tree in a DataTable (`getSubRows`) has options for a register of parents and children, such as clients and their Entities:
+
+- `useCollection({ pageBy: 'top-level', pageSize: 5 })` pages by parents, so a page holds whole parents with their children. The pager counts parents: pass `collection.pageTotal` as `total`. `collection.pageRows` is the leaf rows of the page, children of collapsed parents included.
+- `totalRows={[{ scope: 'page', label }, { scope: 'all', label }]}` writes several footer rows. A `page` row totals the current page and is ruled as a subtotal; an `all` row totals every filtered row and is ruled as the grand total. `label` is text or a function of the collection, such as `(c) => \`Page ${c.page} of ${c.pageCount} subtotal\``.
+- A `rowHeader` column's `cell` now draws the row's name: put a second line or a count beside it. The row's link or button keeps the plain name as its accessible name.
+- `treeLines` also gives parent, child and total rows their own heights, from `collection.tree-row-height-parent`, `tree-row-height-child`, `total-row-height-subtotal` and `total-row-height-grand` (all the dense row until a brand sets them), and starts the elbow `collection.tree-line-offset` in. With `disclosure="small"` the chevron takes `collection.disclosure-color`. A row with `onRowActivate` or `getRowHref` shows a pointer. `table.row-hover-color` is the text color on the hovered row.
+- `CollectionToolbar` takes `searchWidth="fixed"` (the search keeps `collection.search-fixed-width`), `meta` and `metaEnd` (quiet text beside the search and at the far end of the row) and `framed` (padding and a rule under it, inside a Sheet).
+- `treeLines` draws an elbow from each child's name back up to its parent. `disclosure="small"` shrinks the expand button so a parent is as tall as its children. `getRowKind={(row) => 'link'}` marks a row (`data-kind="link"`) whose name reads as a link, for a row such as "3 more Entities".
+
+
 ### App bar: AppBar, PickerButton and a segmented ToggleGroup
 
 `AppBar` is the bar across the top of an app window: one row on a line in the rule color, so an ink-rule brand gets the working-paper rule under it. `AppBarSpacer` pushes what follows it to the end, and a vertical `Separator` is a short divider between icon actions. Icon actions are quiet `Button`s holding only an icon, with an `aria-label`.

package/dist/custom/collection/index.d.ts

@@ -280,6 +280,7 @@ interface CollectionMessages {
     selectAll: (count: number) => string;
     actionsFor: (name: string) => string;
     total: string;
+    pageSubtotal: string;
     selected: (count: number) => string;
     hiddenByFilters: (count: number) => string;
     noResults: string;
@@ -305,6 +306,13 @@ interface UseCollectionOptions<T> {
     pageSize?: number;
     groupBy?: string;
     getSubRows?: (row: T) => readonly T[] | undefined;
+    /**
+     * What a page counts. 'row' (the default) pages by rows, so a page can end partway through a
+     * parent's children. 'top-level' pages a tree by its top-level rows: each page holds whole
+     * parents with all their visible children, and the page size, page count and
+     * `pageTotal` all count parents.
+     */
+    pageBy?: 'row' | 'top-level';
     /** Groups and tree parents start open. Pass false to start them closed. */
     defaultExpanded?: boolean;
     /** Page sizes the control offers. A stored size outside this list is dropped. */
@@ -359,6 +367,10 @@ interface CollectionApi<T> {
     hiddenSelectedCount: number;
     filteredRows: T[];
     filteredCount: number;
+    /** What the pager counts: filtered rows, or the filtered top-level rows when `pageBy` is 'top-level'. */
+    pageTotal: number;
+    /** The leaf rows of this page. With `pageBy: 'top-level'` that includes children of collapsed parents. */
+    pageRows: T[];
     totalCount: number;
     totals: Record<string, string>;
     page: number;
@@ -437,12 +449,29 @@ interface DataTableProps<T> extends CollectionViewProps<T> {
      * a single line above it; 'grand' adds a double rule under it, as on a working paper.
      */
     totalStyle?: 'band' | 'subtotal' | 'grand';
+    /**
+     * Several footer rows, top to bottom, each totalling a scope: 'page' is the rows on this page,
+     * 'all' every filtered row. A 'page' row is ruled as a subtotal and an 'all' row as the grand
+     * total, so totalStyle is ignored. The label defaults to the messages for page subtotal and total.
+     */
+    totalRows?: DataTableTotalRow<T>[];
+    /** Draws an elbow connector from each child row's name back up to its parent. Use it with getSubRows. */
+    treeLines?: boolean;
+    /** 'small' shrinks the expand/collapse button so a parent row stays the height of its siblings. */
+    disclosure?: 'default' | 'small';
+    /** Names a row's kind, set as `data-kind` on the row. 'link' draws the row's name as a link, for a row that opens more rows or a page. */
+    getRowKind?: (row: T) => 'link' | (string & {}) | undefined;
+}
+interface DataTableTotalRow<T = unknown> {
+    scope: 'page' | 'all';
+    /** Text, or a function of the collection for a label such as "Page 2 of 5 subtotal". */
+    label?: React.ReactNode | ((collection: CollectionApi<T>) => React.ReactNode);
 }
 /**
  * A data table, the APG pattern: one tab stop for the rows, headers announce sort, and it is
  * not a grid. A grid would say this is a spreadsheet, and it is not. AG Grid is that tool.
  */
-declare function DataTable<T>({ collection, label, caption, onRowActivate, getRowHref, activeRowId, rowActions, empty, loading, stickyHeader, stickyRowHeader, narrow, size, totalStyle, rowNavigation, className, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
+declare function DataTable<T>({ collection, label, caption, onRowActivate, getRowHref, activeRowId, rowActions, empty, loading, stickyHeader, stickyRowHeader, narrow, size, totalStyle, totalRows, treeLines, disclosure, getRowKind, rowNavigation, className, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
 
 interface CollectionPaginationProps {
     /** 1-based. */
@@ -481,13 +510,21 @@ interface CollectionToolbarProps<T> {
     }>;
     actions?: React.ReactNode;
     bulkActions?: React.ReactNode;
+    /** 'fill' (the default) lets the search grow. 'fixed' gives it collection.search-fixed-width, so the meta beside it has room. */
+    searchWidth?: 'fill' | 'fixed';
+    /** Quiet text beside the search, such as "12 clients". */
+    meta?: React.ReactNode;
+    /** Quiet text at the far end of the row, such as "Sorted by most open". */
+    metaEnd?: React.ReactNode;
+    /** Pads the toolbar and rules it from the table below, for a toolbar inside a Sheet above an edge-to-edge table. */
+    framed?: boolean;
     className?: string;
 }
 /**
  * Tabs and search stay put while rows are selected. The trailing controls swap for the
  * selection bar, so the bar takes their place and the row does not grow.
  */
-declare function CollectionToolbarImpl<T>({ collection, searchLabel, searchLabelVisible, showSort, groupOptions, actions, bulkActions, className }: CollectionToolbarProps<T>): react_jsx_runtime.JSX.Element;
+declare function CollectionToolbarImpl<T>({ collection, searchLabel, searchLabelVisible, showSort, groupOptions, actions, bulkActions, searchWidth, meta, metaEnd, framed, className }: CollectionToolbarProps<T>): react_jsx_runtime.JSX.Element;
 declare function ToolbarTabs<T>({ collection, column }: {
     collection: CollectionApi<T>;
     column: CollectionColumn<T>;
@@ -542,4 +579,4 @@ declare const CollectionToolbar: typeof CollectionToolbarImpl & {
  */
 declare function totalText<T>(column: CollectionColumn<T>, rows: readonly T[], locale: string): string;
 
-export { type CellContext, type CollectionAlign, type CollectionApi, type CollectionColumn, type CollectionFilter, type CollectionKind, CollectionPagination, type CollectionPaginationProps, type CollectionSort, CollectionToolbar, type CollectionToolbarProps, DataList, type DataListProps, DataTable, type DataTableProps, type FilterKind, type FilterOption, type ListSlot, type UseCollectionOptions, balanceOf, collectionTableOptions, compareDecimal, countFacets, defineColumns, formatDate, formatMoney, headerLabel, hiddenSelectedCount, nextSort, pageBounds, pageFlat, searchMatches, selectableIds, sortRows, sumMoney, toMinor, totalText, treeVisibleIds, useCollection };
+export { type CellContext, type CollectionAlign, type CollectionApi, type CollectionColumn, type CollectionFilter, type CollectionKind, CollectionPagination, type CollectionPaginationProps, type CollectionSort, CollectionToolbar, type CollectionToolbarProps, DataList, type DataListProps, DataTable, type DataTableProps, type DataTableTotalRow, type FilterKind, type FilterOption, type ListSlot, type UseCollectionOptions, balanceOf, collectionTableOptions, compareDecimal, countFacets, defineColumns, formatDate, formatMoney, headerLabel, hiddenSelectedCount, nextSort, pageBounds, pageFlat, searchMatches, selectableIds, sortRows, sumMoney, toMinor, totalText, treeVisibleIds, useCollection };

package/dist/custom/collection/index.js

@@ -1,5 +1,5 @@
 import { Input, Tabs, Checkbox, Menu } from '../../chunk-Y2CPBMFJ.js';
-import { useUnderWidth, Button, cn, Select, Combobox, isEmptyValue, formatPercent, formatNumber, sumMoney, fractionDigitsOf, formatMoney, minorToDecimal, EmptyState, selectableIds, pageFlat, hiddenSelectedCount, nextSort, searchMatches, treeVisibleIds, isoDate, toMinor, comparePresent, collatorFor, formatDate, moneySearchForms, searchHaystack } from '../../chunk-M7KJASGK.js';
+import { useUnderWidth, Button, cn, Select, Combobox, isEmptyValue, formatPercent, formatNumber, sumMoney, fractionDigitsOf, formatMoney, minorToDecimal, EmptyState, selectableIds, pageFlat, hiddenSelectedCount, nextSort, pageBounds, searchMatches, treeVisibleIds, isoDate, toMinor, comparePresent, collatorFor, formatDate, moneySearchForms, searchHaystack } from '../../chunk-M7KJASGK.js';
 export { balanceOf, compareDecimal, countFacets, formatDate, formatMoney, hiddenSelectedCount, nextSort, pageBounds, pageFlat, searchMatches, selectableIds, sortRows, sumMoney, toMinor, treeVisibleIds } from '../../chunk-M7KJASGK.js';
 import * as React4 from 'react';
 import { useMemo, useRef, useState, useDeferredValue, useEffect } from 'react';
@@ -444,6 +444,10 @@ function DataTable({
   narrow = "scroll",
   size = "sm",
   totalStyle = "band",
+  totalRows,
+  treeLines,
+  disclosure = "default",
+  getRowKind,
   rowNavigation,
   className
 }) {
@@ -489,6 +493,10 @@ function DataTable({
       stickyRowHeader,
       size,
       totalStyle,
+      totalRows,
+      treeLines,
+      disclosure,
+      getRowKind,
       className,
       onRowActivate,
       getRowHref,
@@ -498,7 +506,7 @@ function DataTable({
   );
   return /* @__PURE__ */ jsx("div", { ref: narrowWidth.ref, className: cn("CollectionView", asList ? className : void 0), "data-narrow": narrowWidth.under ? "" : void 0, children: view });
 }
-function TableView({ collection, columns, label, caption, colSpan, leaves, navigate, allSelected, someSelected, loading, empty, stickyHeader, stickyRowHeader, size, totalStyle, className, onRowActivate, getRowHref, activeRowId, rowActions }) {
+function TableView({ collection, columns, label, caption, colSpan, leaves, navigate, allSelected, someSelected, loading, empty, stickyHeader, stickyRowHeader, size, totalStyle, totalRows, treeLines, disclosure, getRowKind, className, onRowActivate, getRowHref, activeRowId, rowActions }) {
   const roving = useRovingRows(leaves.length, navigate);
   const scrollerRef = React4.useRef(null);
   const [overflows, setOverflows] = React4.useState(false);
@@ -551,6 +559,8 @@ function TableView({ collection, columns, label, caption, colSpan, leaves, navig
             "data-grouped": collection.grouping ? "" : void 0,
             "data-sticky-header": stickyHeader ? "" : void 0,
             "data-sticky-row-header": stickyRowHeader ? "" : void 0,
+            "data-tree-lines": treeLines ? "" : void 0,
+            "data-disclosure": disclosure === "small" ? "small" : void 0,
             children: [
               caption ? /* @__PURE__ */ jsx("caption", { children: caption }) : null,
               /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
@@ -572,22 +582,28 @@ function TableView({ collection, columns, label, caption, colSpan, leaves, navig
                 }),
                 rowActions ? /* @__PURE__ */ jsx("th", { scope: "col", "data-width": "min", children: /* @__PURE__ */ jsx("span", { className: "visually-hidden", children: "Actions" }) }) : null
               ] }) }),
-              collection.pageEntries.some((entry) => entry.kind === "group") ? groupedBodies({ collection, columns, leaves, roving, navigate, onRowActivate, getRowHref, activeRowId, rowActions, colSpan, filteredEmpty, empty, loading }) : /* @__PURE__ */ jsx("tbody", { children: bodyRows({ collection, columns, leaves, roving, navigate, onRowActivate, getRowHref, activeRowId, rowActions, colSpan, filteredEmpty, empty, loading }) }),
-              Object.keys(collection.totals).length ? /* @__PURE__ */ jsx("tfoot", { children: /* @__PURE__ */ jsxs("tr", { "data-total": ruled ? totalStyle : void 0, children: [
-                collection.canSelect ? /* @__PURE__ */ jsx("td", { "data-rule": ruled ? "none" : void 0 }) : null,
-                columns.map((column, index) => (
-                  // Ruled totals draw their lines under the figures only, not the label or blank cells.
-                  /* @__PURE__ */ jsxs("td", { "data-align": alignOf(column), "data-rule": ruled && (index === 0 || !column.total) ? "none" : void 0, children: [
-                    index === 0 ? text.total : typeof column.total === "function" ? column.total(collection.filteredRows) : collection.totals[column.id] ?? "",
-                    index === 0 && collection.isFiltered ? /* @__PURE__ */ jsxs("span", { className: "visually-hidden", children: [
-                      " of ",
-                      collection.filteredCount,
-                      " filtered rows"
-                    ] }) : null
-                  ] }, column.id)
-                )),
-                rowActions ? /* @__PURE__ */ jsx("td", { "data-rule": ruled ? "none" : void 0 }) : null
-              ] }) }) : null
+              collection.pageEntries.some((entry) => entry.kind === "group") ? groupedBodies({ collection, columns, leaves, roving, navigate, onRowActivate, getRowHref, getRowKind, activeRowId, rowActions, colSpan, filteredEmpty, empty, loading }) : /* @__PURE__ */ jsx("tbody", { children: bodyRows({ collection, columns, leaves, roving, navigate, onRowActivate, getRowHref, getRowKind, activeRowId, rowActions, colSpan, filteredEmpty, empty, loading }) }),
+              Object.keys(collection.totals).length ? /* @__PURE__ */ jsx("tfoot", { children: (totalRows ?? [{ scope: "all" }]).map((total, rowIndex) => {
+                const custom = Boolean(totalRows);
+                const ruledRow = custom ? total.scope === "page" ? "subtotal" : "grand" : ruled ? totalStyle : void 0;
+                const rowsInScope = total.scope === "page" ? collection.pageRows : collection.filteredRows;
+                const label2 = total.label == null ? total.scope === "page" ? text.pageSubtotal : text.total : typeof total.label === "function" ? total.label(collection) : total.label;
+                return /* @__PURE__ */ jsxs("tr", { "data-total": ruledRow, children: [
+                  collection.canSelect ? /* @__PURE__ */ jsx("td", { "data-rule": ruledRow ? "none" : void 0 }) : null,
+                  columns.map((column, index) => (
+                    // Ruled totals draw their lines under the figures only, not the label or blank cells.
+                    /* @__PURE__ */ jsxs("td", { "data-align": alignOf(column), "data-rule": ruledRow && (index === 0 || !column.total) ? "none" : void 0, children: [
+                      index === 0 ? label2 : column.total ? typeof column.total === "function" ? column.total(rowsInScope) : totalText(column, rowsInScope, collection.locale) : "",
+                      index === 0 && total.scope === "all" && collection.isFiltered ? /* @__PURE__ */ jsxs("span", { className: "visually-hidden", children: [
+                        " of ",
+                        collection.filteredCount,
+                        " filtered rows"
+                      ] }) : null
+                    ] }, column.id)
+                  )),
+                  rowActions ? /* @__PURE__ */ jsx("td", { "data-rule": ruledRow ? "none" : void 0 }) : null
+                ] }, rowIndex);
+              }) }) : null
             ]
           }
         ),
@@ -664,7 +680,7 @@ function groupedBodies(args) {
   if (!groups.length) return /* @__PURE__ */ jsx("tbody", { children: bodyRows(args) });
   return groups;
 }
-function DataRow({ entry, index, collection, columns, roving, navigate, onRowActivate, getRowHref, activeRowId, rowActions }) {
+function DataRow({ entry, index, collection, columns, roving, navigate, onRowActivate, getRowHref, getRowKind, activeRowId, rowActions }) {
   const original = entry.row.original;
   const id = entry.row.id;
   const selected = collection.selectionSet.has(id);
@@ -673,6 +689,10 @@ function DataRow({ entry, index, collection, columns, roving, navigate, onRowAct
   const named = levelName(collection, entry.row, name);
   const canSelect = collection.canSelect?.(original) ?? false;
   const href = getRowHref?.(original);
+  const rowKind = getRowKind?.(original);
+  const headerColumn = columns.find((column) => column.rowHeader);
+  const headerContent = headerColumn?.cell ? headerColumn.cell(original, { view: "table", selected, active }) : name;
+  const customHeader = Boolean(headerColumn?.cell);
   const activate = () => onRowActivate?.(original);
   const toggle = canSelect ? () => entry.row.toggleSelected?.(!selected) : void 0;
   const tabIndex = navigate ? roving.cursor === index ? 0 : -1 : void 0;
@@ -684,7 +704,7 @@ function DataRow({ entry, index, collection, columns, roving, navigate, onRowAct
   }, children: /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined", "aria-hidden": "true", children: entry.row.getIsExpanded() ? "expand_more" : "chevron_right" }) }) : null;
   const header = href ? /* @__PURE__ */ jsx("a", { ref: (node) => {
     roving.refs.current[index] = node;
-  }, href, tabIndex, onKeyDown, onClick: () => roving.focusAt(index), children: name }) : /* @__PURE__ */ jsx(
+  }, href, tabIndex, "aria-label": customHeader ? named : void 0, onKeyDown, onClick: () => roving.focusAt(index), children: headerContent }) : /* @__PURE__ */ jsx(
     "button",
     {
       type: "button",
@@ -693,13 +713,13 @@ function DataRow({ entry, index, collection, columns, roving, navigate, onRowAct
         roving.refs.current[index] = node;
       },
       tabIndex,
-      "aria-label": named === name ? void 0 : named,
+      "aria-label": named === name && !customHeader ? void 0 : named,
       onKeyDown,
       onClick: () => {
         roving.focusAt(index);
         activate();
       },
-      children: name
+      children: headerContent
     }
   );
   return /* @__PURE__ */ jsxs(
@@ -708,6 +728,8 @@ function DataRow({ entry, index, collection, columns, roving, navigate, onRowAct
       "aria-selected": selected || void 0,
       "aria-current": active ? "true" : void 0,
       "data-depth": entry.row.depth || void 0,
+      "data-kind": rowKind,
+      "data-activates": href || onRowActivate ? "" : void 0,
       onClick: (event) => {
         const target = event.target;
         if (interactiveTarget(target) || selectingText()) return;
@@ -722,7 +744,7 @@ function DataRow({ entry, index, collection, columns, roving, navigate, onRowAct
         collection.canSelect ? /* @__PURE__ */ jsx("td", { "data-width": "min", children: canSelect ? /* @__PURE__ */ jsx(SelectBox, { checked: selected, label: `Select ${named}`, onChange: (checked) => entry.row.toggleSelected?.(checked) }) : null }) : null,
         columns.map((column) => {
           const Tag = column.rowHeader ? "th" : "td";
-          return /* @__PURE__ */ jsx(Tag, { scope: column.rowHeader ? "row" : void 0, "data-align": alignOf(column), style: column.rowHeader ? { paddingInlineStart: `calc(var(--sl-table-cell-padding-inline) + var(--sl-collection-tree-indent) * ${entry.row.depth})` } : void 0, children: column.rowHeader ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          return /* @__PURE__ */ jsx(Tag, { scope: column.rowHeader ? "row" : void 0, "data-align": alignOf(column), style: column.rowHeader ? { paddingInlineStart: `calc(var(--sl-table-cell-padding-inline) + var(--sl-collection-tree-indent) * ${entry.row.depth})`, "--row-depth": entry.row.depth } : void 0, children: column.rowHeader ? /* @__PURE__ */ jsxs(Fragment, { children: [
             disclosure,
             header
           ] }) : /* @__PURE__ */ jsx(CellValue, { column, row: original, locale: collection.locale, rows: collection.filteredRows, view: "table", selected, active }) }, column.id);
@@ -794,7 +816,7 @@ function CollectionPagination({
   ] });
 }
 var COMBOBOX_AT = 12;
-function CollectionToolbarImpl({ collection, searchLabel, searchLabelVisible, showSort, groupOptions, actions, bulkActions, className }) {
+function CollectionToolbarImpl({ collection, searchLabel, searchLabelVisible, showSort, groupOptions, actions, bulkActions, searchWidth = "fill", meta, metaEnd, framed, className }) {
   const tabs = collection.columns.find((column) => column.filter?.kind === "tabs");
   const selects = collection.columns.filter((column) => column.filter && column.filter.kind !== "tabs");
   const searchable = collection.columns.some((column) => column.searchable);
@@ -820,7 +842,7 @@ function CollectionToolbarImpl({ collection, searchLabel, searchLabelVisible, sh
   }, [collection.selection, collection.hiddenSelectedCount, collection.messages]);
   const selecting = collection.selection.length > 0;
   const narrow = useUnderWidth("--sl-collection-narrow-width");
-  return /* @__PURE__ */ jsxs("div", { ref: narrow.ref, className: cn("CollectionToolbar", className), "data-selecting": selecting ? "" : void 0, "data-narrow": narrow.under ? "" : void 0, children: [
+  return /* @__PURE__ */ jsxs("div", { ref: narrow.ref, className: cn("CollectionToolbar", className), "data-selecting": selecting ? "" : void 0, "data-narrow": narrow.under ? "" : void 0, "data-search": searchWidth === "fixed" ? "fixed" : void 0, "data-framed": framed ? "" : void 0, children: [
     tabs ? /* @__PURE__ */ jsx(ToolbarTabs, { collection, column: tabs }) : null,
     /* @__PURE__ */ jsxs("div", { className: "CollectionToolbarMain", children: [
       searchable ? /* @__PURE__ */ jsx(
@@ -833,6 +855,8 @@ function CollectionToolbarImpl({ collection, searchLabel, searchLabelVisible, sh
           clearLabel: collection.messages.clearSearch
         }
       ) : null,
+      meta ? /* @__PURE__ */ jsx("p", { className: "CollectionToolbarMeta", "aria-live": "polite", children: meta }) : null,
+      metaEnd ? /* @__PURE__ */ jsx("p", { className: "CollectionToolbarMeta CollectionToolbarMetaEnd", children: metaEnd }) : null,
       selecting ? /* @__PURE__ */ jsxs("div", { className: "CollectionSelectionBar", role: "region", "aria-label": "Selection", children: [
         /* @__PURE__ */ jsxs("p", { className: "CollectionCount", children: [
           collection.messages.selected(collection.selection.length),
@@ -1178,6 +1202,7 @@ var defaultMessages = {
   selectAll: (count) => `Select all ${count} filtered rows`,
   actionsFor: (name) => `Actions for ${name}`,
   total: "Total",
+  pageSubtotal: "Page subtotal",
   selected: (count) => `${count} selected`,
   hiddenByFilters: (count) => `${count} hidden by filters`,
   noResults: "No results",
@@ -1364,7 +1389,11 @@ function useCollection(options) {
   const filteredIds = new Set(filteredLeaves.map((row) => row.id));
   const topRows = table.getRowModel().rows;
   const flat = flattenVisible(topRows);
-  const paged = pageFlat(flat, page - 1, pageSize && pageSize > 0 ? pageSize : flat.filter((entry) => entry.kind === "leaf").length || 1);
+  const byTopLevel = options.pageBy === "top-level" && Boolean(options.getSubRows);
+  const parents = byTopLevel ? topRows.filter((row) => row.depth === 0) : [];
+  const paged = byTopLevel ? pageTopLevel(parents, page - 1, pageSize && pageSize > 0 ? pageSize : parents.length || 1) : pageFlat(flat, page - 1, pageSize && pageSize > 0 ? pageSize : flat.filter((entry) => entry.kind === "leaf").length || 1);
+  const pageTotal = byTopLevel ? parents.length : filteredRows.length;
+  const pageRows = byTopLevel ? parents.slice(paged.bounds.start, paged.bounds.end).flatMap((row) => leafRows(row)).map((row) => row.original) : paged.entries.filter((entry) => entry.kind === "leaf").map((entry) => entry.row.original);
   const totals = useMemo(() => {
     const rows = filteredModel.flatRows.filter((row) => !row.getIsGrouped?.() && !(options.getSubRows && row.subRows?.length)).map((row) => row.original);
     const result = {};
@@ -1420,6 +1449,8 @@ function useCollection(options) {
     hiddenSelectedCount: hiddenSelectedCount(selection, filteredIds),
     filteredRows,
     filteredCount: filteredRows.length,
+    pageTotal,
+    pageRows,
     totalCount: options.rows.length,
     totals,
     page: paged.bounds.pageIndex + 1,
@@ -1489,6 +1520,17 @@ function flattenVisible(rows, groupId, nested = false) {
   }
   return out;
 }
+function pageTopLevel(rows, pageIndex, pageSize) {
+  const bounds = pageBounds(pageIndex, pageSize, rows.length);
+  const entries = [];
+  for (const row of rows.slice(bounds.start, bounds.end)) entries.push(...flattenVisible([row]));
+  return { entries, leafCount: entries.filter((entry) => entry.kind === "leaf").length, bounds };
+}
+function leafRows(row) {
+  const children = row.subRows;
+  if (!children?.length) return [row];
+  return children.flatMap(leafRows);
+}
 
 export { CollectionPagination, CollectionToolbar, DataList, DataTable, collectionTableOptions, defineColumns, headerLabel, totalText, useCollection };
 //# sourceMappingURL=index.js.map