@scattered-light/loomiere-base-ui 0.7.1 → 0.8.0

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

@@ -432,12 +432,17 @@ interface DataTableProps<T> extends CollectionViewProps<T> {
     /** 'scroll' keeps the table. 'list' swaps in DataList when the table is narrower than collection.narrow-width. */
     narrow?: 'scroll' | 'list';
     size?: 'sm' | 'md';
+    /**
+     * How the footer's totals row looks. 'band' (the default) is the header tray. 'subtotal' rules
+     * a single line above it; 'grand' adds a double rule under it, as on a working paper.
+     */
+    totalStyle?: 'band' | 'subtotal' | 'grand';
 }
 /**
  * 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, 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, rowNavigation, className, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
 
 interface CollectionPaginationProps {
     /** 1-based. */

package/dist/custom/collection/index.js

@@ -443,6 +443,7 @@ function DataTable({
   stickyRowHeader = false,
   narrow = "scroll",
   size = "sm",
+  totalStyle = "band",
   rowNavigation,
   className
 }) {
@@ -487,6 +488,7 @@ function DataTable({
       stickyHeader,
       stickyRowHeader,
       size,
+      totalStyle,
       className,
       onRowActivate,
       getRowHref,
@@ -496,7 +498,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, className, onRowActivate, getRowHref, activeRowId, rowActions }) {
+function TableView({ collection, columns, label, caption, colSpan, leaves, navigate, allSelected, someSelected, loading, empty, stickyHeader, stickyRowHeader, size, totalStyle, className, onRowActivate, getRowHref, activeRowId, rowActions }) {
   const roving = useRovingRows(leaves.length, navigate);
   const scrollerRef = React4.useRef(null);
   const [overflows, setOverflows] = React4.useState(false);
@@ -524,6 +526,7 @@ function TableView({ collection, columns, label, caption, colSpan, leaves, navig
   }, [stickyHeader, leaves.length, columns.length]);
   const filteredEmpty = collection.totalCount > 0 && collection.filteredCount === 0;
   const text = collection.messages;
+  const ruled = totalStyle !== "band";
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -570,17 +573,20 @@ 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", { children: [
-                collection.canSelect ? /* @__PURE__ */ jsx("td", {}) : null,
-                columns.map((column, index) => /* @__PURE__ */ jsxs("td", { "data-align": alignOf(column), 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", {}) : null
+              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
             ]
           }