@multiplatform.one/table 7.10.0 → 7.15.0

package/dist/jsx/components/DataTable/DataTableCardControls.native.js

@@ -24,7 +24,8 @@ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
 }), mod);
 var DataTableCardControls_exports = {};
 __export(DataTableCardControls_exports, {
-  DataTableCardControls: () => DataTableCardControls
+  DataTableCardControls: () => DataTableCardControls,
+  DataTableCardSortControl: () => DataTableCardSortControl
 });
 module.exports = __toCommonJS(DataTableCardControls_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -41,34 +42,112 @@ var import_dataTableChrome = require("./dataTableChrome.native.js");
 function getColumnLabel(column) {
   return typeof column.columnDef.header === "string" ? column.columnDef.header : column.id;
 }
-function DataTableCardControls(param) {
+function DataTableCardSortControl(param) {
   var {
     table,
-    enableSorting = false,
-    enableFiltering = false,
-    availableColumns = [],
     compact = false,
-    disabled = false
+    disabled = false,
+    contained = false
   } = param;
   var _table_getState_sorting;
   var {
     t
   } = (0, import_react_i18next.useTranslation)();
   var {
-    knobProps,
-    disabledState
+    knobProps
   } = (0, import_theme.useResolvedKnobs)({
     component: "DataTable",
     compact
   });
   var chrome = (0, import_dataTableChrome.dataTableChrome)(String(knobProps.sizeToken));
   var [sortMenuOpen, setSortMenuOpen] = (0, import_react2.useState)(false);
-  var sortableColumns = enableSorting ? table.getVisibleLeafColumns().filter(function (col) {
+  var sortableColumns = table.getVisibleLeafColumns().filter(function (col) {
     return col.getCanSort();
-  }) : [];
+  });
   var activeSort = (_table_getState_sorting = table.getState().sorting) === null || _table_getState_sorting === void 0 ? void 0 : _table_getState_sorting[0];
   var activeSortColumn = activeSort ? table.getColumn(activeSort.id) : void 0;
   var sortLabel = activeSortColumn ? `${getColumnLabel(activeSortColumn)} ${activeSort.desc ? "\u2193" : "\u2191"}` : t("Sort");
+  if (!sortableColumns.length) return null;
+  var menu = /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.DropdownMenu, {
+    open: disabled ? false : sortMenuOpen,
+    onOpenChange: function onOpenChange(open) {
+      if (disabled) return;
+      setSortMenuOpen(open);
+    },
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.DropdownMenu.Trigger, {
+      asChild: true,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+        size: knobProps.sizeToken,
+        icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CaretUpDownIcon, {
+          size: chrome.iconPx
+        }),
+        "aria-label": t("Sort rows"),
+        ...(contained ? {
+          minWidth: 0,
+          maxWidth: "100%",
+          "aria-description": activeSortColumn ? sortLabel : void 0
+        } : {}),
+        disabled,
+        children: sortLabel
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.DropdownMenu.Content, {
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.DropdownMenu.Label, {
+        children: t("Sort by")
+      }), sortableColumns.map(function (column) {
+        var sorted = column.getIsSorted();
+        return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.DropdownMenu.Item, {
+          closeOnSelect: false,
+          icon: sorted === "asc" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CaretDownIcon, {
+            size: chrome.iconPx
+          }) : sorted === "desc" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CaretDownIcon, {
+            size: chrome.iconPx,
+            style: {
+              transform: "rotate(180deg)"
+            }
+          }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CaretUpDownIcon, {
+            size: chrome.iconPx
+          }),
+          "aria-label": (0, import_withInterp.withInterp)(t("Sort by {{column}}", {
+            column: getColumnLabel(column)
+          }), {
+            column: getColumnLabel(column)
+          }),
+          onSelect: function onSelect() {
+            if (sorted === false) column.toggleSorting(false);else if (sorted === "asc") column.toggleSorting(true);else column.clearSorting();
+          },
+          children: getColumnLabel(column)
+        }, column.id);
+      })]
+    })]
+  });
+  return contained ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+    "data-table-card-sort": "",
+    flexBasis: "auto",
+    flexGrow: 0,
+    flexShrink: 1,
+    minWidth: 0,
+    maxWidth: "50%",
+    children: menu
+  }) : menu;
+}
+function DataTableCardControls(param) {
+  var {
+    table,
+    enableSorting = false,
+    enableFiltering = false,
+    availableColumns = [],
+    compact = false,
+    disabled = false
+  } = param;
+  var {
+    t
+  } = (0, import_react_i18next.useTranslation)();
+  var {
+    disabledState
+  } = (0, import_theme.useResolvedKnobs)({
+    component: "DataTable",
+    compact
+  });
   if (!enableSorting && !enableFiltering) return null;
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
     alignItems: "center",
@@ -77,52 +156,10 @@ function DataTableCardControls(param) {
     paddingVertical: "$2",
     role: "toolbar",
     "aria-label": t("Card list controls"),
-    children: [enableSorting && sortableColumns.length > 0 && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.DropdownMenu, {
-      open: disabled ? false : sortMenuOpen,
-      onOpenChange: function onOpenChange(open) {
-        if (disabled) return;
-        setSortMenuOpen(open);
-      },
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.DropdownMenu.Trigger, {
-        asChild: true,
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-          size: knobProps.sizeToken,
-          icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CaretUpDownIcon, {
-            size: chrome.iconPx
-          }),
-          "aria-label": t("Sort rows"),
-          disabled,
-          children: sortLabel
-        })
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.DropdownMenu.Content, {
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.DropdownMenu.Label, {
-          children: t("Sort by")
-        }), sortableColumns.map(function (column) {
-          var sorted = column.getIsSorted();
-          return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.DropdownMenu.Item, {
-            closeOnSelect: false,
-            icon: sorted === "asc" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CaretDownIcon, {
-              size: chrome.iconPx
-            }) : sorted === "desc" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CaretDownIcon, {
-              size: chrome.iconPx,
-              style: {
-                transform: "rotate(180deg)"
-              }
-            }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CaretUpDownIcon, {
-              size: chrome.iconPx
-            }),
-            "aria-label": (0, import_withInterp.withInterp)(t("Sort by {{column}}", {
-              column: getColumnLabel(column)
-            }), {
-              column: getColumnLabel(column)
-            }),
-            onSelect: function onSelect() {
-              if (sorted === false) column.toggleSorting(false);else if (sorted === "asc") column.toggleSorting(true);else column.clearSorting();
-            },
-            children: getColumnLabel(column)
-          }, column.id);
-        })]
-      })]
+    children: [enableSorting && /* @__PURE__ */(0, import_jsx_runtime.jsx)(DataTableCardSortControl, {
+      table,
+      compact,
+      disabled
     }), enableFiltering && availableColumns.length > 0 &&
     // DataTableFilters (chrome) has no disabled API — the wrapper is the
     // LC-40 carrier and interaction gate for the disabled table.

package/dist/jsx/components/DataTable/DataTableCardControls.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable","__copyProps","to","from","except","desc","key","call","__toCommonJS","mod","value","DataTableCardControls_exports","DataTableCardControls","module","exports","import_jsx_runtime","require","import_react","import_components","import_forms","import_theme","import_react2","import_tamagui","import_react_i18next","import_withInterp","import_DataTableFilters","import_dataTableChrome","getColumnLabel","column","columnDef","header","id","param","table","enableSorting","enableFiltering","availableColumns","compact","disabled","_table_getState_sorting","t","useTranslation","knobProps","disabledState","useResolvedKnobs","component","chrome","dataTableChrome","String","sizeToken","sortMenuOpen","setSortMenuOpen","useState","sortableColumns","getVisibleLeafColumns","filter","col","getCanSort","activeSort","getState","sorting","activeSortColumn","getColumn","sortLabel","jsxs","XStack","alignItems","flexWrap","gap","paddingVertical","role","children","length","DropdownMenu","open","onOpenChange","jsx","Trigger","asChild","Button","size","icon","CaretUpDownIcon","iconPx","Content","Label","map","sorted","getIsSorted","Item","closeOnSelect","CaretDownIcon","style","transform","withInterp"],"sources":["../../../../src/components/DataTable/DataTableCardControls.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable","__copyProps","to","from","except","desc","key","call","__toCommonJS","mod","value","DataTableCardControls_exports","DataTableCardControls","DataTableCardSortControl","module","exports","import_jsx_runtime","require","import_react","import_components","import_forms","import_theme","import_react2","import_tamagui","import_react_i18next","import_withInterp","import_DataTableFilters","import_dataTableChrome","getColumnLabel","column","columnDef","header","id","param","table","compact","disabled","contained","_table_getState_sorting","t","useTranslation","knobProps","useResolvedKnobs","component","chrome","dataTableChrome","String","sizeToken","sortMenuOpen","setSortMenuOpen","useState","sortableColumns","getVisibleLeafColumns","filter","col","getCanSort","activeSort","getState","sorting","activeSortColumn","getColumn","sortLabel","length","menu","jsxs","DropdownMenu","open","onOpenChange","children","jsx","Trigger","asChild","Button","size","icon","CaretUpDownIcon","iconPx","minWidth","maxWidth","Content","Label","map","sorted","getIsSorted","Item","closeOnSelect","CaretDownIcon","style","transform","withInterp","onSelect","toggleSorting","clearSorting","View","flexBasis","flexGrow","flexShrink","enableSorting","enableFiltering","availableColumns"],"sources":["../../../../src/components/DataTable/DataTableCardControls.tsx"],"sourcesContent":[null],"mappings":"AAYA,YAAS;;AACT,IAAAA,SAAS,GAAAC,MAAA,CAAAC,cAAoB;AAC7B,IAAAC,gBAAS,GAAcF,MAAA,CAAAG,wBAAA;AACvB,IAAAC,iBAAS,GAAAJ,MAAA,CAAAK,mBAAwB;AACjC,IAAAC,YAAS,GAAAN,MAAgB,CAAAO,SAAA,CAAAC,cAAA;AACzB,IAAAC,QAAS,GAAMA,CAAAC,MAAA,EAAAC,GAAA,KAAc;EAC7B,SAASC,IAAA,IAAAD,GAAA,EAETZ,SAAS,CAAAW,MAAA,EAAAE,IAAA,EAAkB;IAAAC,GAAA,EAAAF,GAAA,CAAAC,IAAA;IAAAE,UAAA;EAAA;AAC3B;AACA,IAAAC,WAAS,GAAAA,CAAAC,EAAA,EAAAC,IAAA,EAAAC,MAAuB,EAAAC,IAAA;EAoDhB,IAAAF,IAAA,IAcV,OAAAA,IAAA,KAdU,mBAAAA,IAAA;IAhChB,KAAS,IAAAG,GAAA,IAAAhB,iBAAoC,CAAAa,IAAA,GAC3C,IAAO,CAAAX,YAAc,CAAAe,IAAA,CAAAL,EAAA,EAAUI,GAAA,KAAAA,GAAW,KAAAF,MAAW,EACvDnB,SAAA,CAAAiB,EAAA,EAAAI,GAAA;MAAAP,GAAA,EAAAA,CAAA,KAAAI,IAAA,CAAAG,GAAA;MAAAN,UAAA,IAAAK,IAAA,GAAAjB,gBAAA,CAAAe,IAAA,EAAAG,GAAA,MAAAD,IAAA,CAAAL;IAAA;EAEO;EACL,OAAAE,EAAA;AAAA;AACU,IACVM,YAAW,GAAAC,GAAA,IAAAR,WAAA,CAAAhB,SAAA;EAAAyB,KAAA;AAAA,IAAAD,GAAA;AAAA,IACXE,6BAAY;AACdhB,QAAiG,CAAAgB,6BAAA;EAC/FC,qBAAc,EAAAA,CAAA,KAAeA,qBAAA;EAC7BC,wBAAsB,EAAAA,CAAA,KAAAA;AACtB;AACAC,MAAA,CAAAC,OAAO,GAAAP,YAAc,CAAAG,6BAAiC;AACtD,IAAAK,kBAAM,GAAAC,OAAwB;AAC9B,IAAAC,YAAM,GAAAD,OAAa,CAAM,uBAAsB;AAC/C,IAAAE,iBAAM,GAAAF,OAAmB,gCAA6B;AACtD,IAAAG,YAAM,GAAAH,OAAY,2BACX;AAEP,IAAAI,YAAK,GAAAJ,OAAgB,2BAAe;AACpC,IAAAK,aACE,GAAAL,OAAA;AAAA,IAACM,cAAA,GAAAN,OAAA;AAAA,IAAAO,oBAAA,GAAAP,OAAA;AAAA,IAAAQ,iBACO,GAAWR,OAAQ;AAAA,IAAAS,uBACV,GAAkBT,OAAA;AAC/B,IAAAU,sBAAc,GAAAV,OAAA;AACd,SAAAW,eAAgBC,MAAI;EAAA,OACtB,OAAAA,MAAA,CAAAC,SAAA,CAAAC,MAAA,gBAAAF,MAAA,CAAAC,SAAA,CAAAC,MAAA,GAAAF,MAAA,CAAAG,EAAA;AAAA;AAEA,SAAAnB,wBAACA,CAAAoB,KAAA,EAAa;EACZ;IAAAC,KAAC;IAAAC,OAAA;IAAAC,QAAA;IAAAC,SAAA;EAAA,IAAAJ,KAAA;EAAA,IAAAK,uBAAA;EAAA;IAAAC;EAAA,IACC,IAAMf,oBAAU,CAAAgB,cAAA;EAAA;IAAAC;EACV,QAAApB,YAAC,CAAAqB,gBAAA,EAAgB;IAAqBC,SAC5C,aAAY;IAAaR;EAErB;EACY,IAAAS,MAAA,GACV,IAAAjB,sBAAU,CAAAkB,eAAA,EAAAC,MAAA,CAAAL,SAAA,CAAAM,SAAA;EAAA,KAAAC,YACV,EAAAC,eAAoB,QAAA3B,aAAmB,CAAA4B,QAAY;EAAA,IAAAC,eAEpD,GAAAjB,KAAA,CAAAkB,qBAAA,GAAAC,MAAA,WAAAC,GAAA;IAAA,OAAAA,GACL,CAAAC,UAAA;EAAA;EAEC,IAAAC,UAAA,IAAAlB,uBAAA,GAAAJ,KAAA,CAAAuB,QAAA,GAAAC,OAAA,cAAApB,uBAAA,uBAAAA,uBAAA;EAAA,IAAAqB,gBAEL,GAAAH,UAAA,GAAAtB,KAAA,CAAA0B,SAAA,CAAAJ,UAAA,CAAAxB,EAAA;EAAA,IAAA6B,SACA,GAAAF,gBAAC,MAAA/B,cACC,CAAA+B,gBAAA,KAAAH,UAAA,CAAAnD,IAAA,2BAAAkC,CAAA;EAAA,KAAAY,eAAA,CAAAW,MAAA,EAAC;EAAiC,IAAAC,IACjC,kBAAgB,CAAI,CAAC,EAAA/C,kBAAgB,CAAAgD,IAAA,EAAA7C,iBAAA,CAAA8C,YAAA;IACpCC,IAAA,EAAA9B,QAAM,WAASY,YAAO;IACtBmB,YAAA,WACEA,aAAAD,IAAA;MAAA,IAAA9B,QAAC;MAAaa,eAAb,CAAAiB,IAAA;IAAA;IAEgBE,QAAA,GAO2B,eAG1C,IAAApD,kBAAyB,CAAAqD,GAAA,EAAAlD,iBAAwB,CAAA8C,YAAQ,CAAAK,OAAA,EAAe;MAAYC,OAAA,MAClF;MAA6BH,QAC/B,EAAC,mBAAApD,kBAAA,CAAAqD,GAAA,EAAAjD,YAAA,CAAAoD,MAAA;QAAAC,IAAA,EACDhC,SAAA,CAAUM,SAAM;QAEd2B,IAAA,iBAAI,CAAW,GAAA1D,kBAAc,CAAAqD,GAAA,EAAAnD,YAAmB,CAAAyD,eAAA;UAAAF,IAAA,EAAA7B,MAAA,CAAAgC;QACI;QAC3B,YAC3B,EAAArC,CAAA;QAAA,IAAAF,SAEC;UAAqBwC,QAAA;UAAAC,QArBjB,EAAO;UAsBd,oBAAAnB,gBAAA,GAAAE,SAAA;QAEJ,CAAC;QAAAzB,QACH;QAAAgC,QAAA,EAAAP;MAAA;IACF,IAEF,eACE,IAAA7C,kBAAA,CAAAgD,IAAA,EAAA7C,iBAAA,CAAA8C,YAAA,CAAAc,OAAA;MAACX,QAAA,sBAAApD,kBAAA,CAAAqD,GAAA,EAAAlD,iBAAA,CAAA8C,YAAA,CAAAe,KAAA;QACCZ,QAAA,EAAA7B,CAAA,UAAqB;MACrB,IACAY,eAAU,CAAA8B,GAAA,WAAApD,MAAA;QACV,IAAAqD,MAAY,GAAArD,MAAA,CAAAsD,WAAA;QACZ,OAAU,mBAAAnE,kBAAA,CAAAqD,GAAA,EAAAlD,iBAAA,CAAA8C,YAAA,CAAAmB,IAAA;UACVC,aAAS;UAERX,IAAA,EAAAQ,MAAA,gCAAAlE,kBAAA,CAAAqD,GAAA,EAAAnD,YAAA,CAAAoE,aAAA;YAAAb,IAAA,EAAA7B,MAAA,CAAAgC;UAGH,KAAAM,MAAA,iCAAAlE,kBAAA,CAAAqD,GAAA,EAAAnD,YAAA,CAAAoE,aAAA;YAEJb,IAAA,EAAA7B,MAAA,CAAAgC,MAAA;YAEgBW,KAAA;cACdC,SAAA;YACA;UACA,oBAAkB,IAAAxE,kBAAA,CAAAqD,GAAA,EAAAnD,YAAA,CAAAyD,eAAA;YAClBF,IAAA,EAAoB7B,MAAA,CAAAgC;UACV;UACC,kBAAAnD,iBAAA,CAAAgE,UAAA,EAAAlD,CAAA;YACkBV,MAAA,EAAAD,cAAA,CAAAC,MAAA;UACnB,EAAI;YACNA,MAAA,EAAcD,cAAI,CAAAC,MAAiB;UACtC;UAEH6D,QAAA,WAAAA,SAAA;YAAC,IAAAR,MAAA,YAAArD,MAAA,CAAA8D,aAAA,iBAAAT,MAAA,YAAArD,MAAA,CAAA8D,aAAA,YACY9D,MAAA,CAAA+D,YAAA;UACX;UACIxB,QAAA,EAAAxC,cAAA,CAAAC,MAAA;QACJ,GAAAA,MAAA,CAAAG,EAAgB;MAChB,EAAK;IAGJ;EAC+E;EAElC,OAAAK,SAAA,sBAAArB,kBAAA,CAAAqD,GAAA,EAAA9C,cAAA,CAAAsE,IAAA;IAAA,sBAG5C;IAAAC,SAAC;IAAAC,QAAA;IAAAC,UACE,EAAI;IAEAnB,QAEL;IAA8DC,QAAA;IAAAV,QAChE,EAAAL;EAAA,KAAAA,IAAA;AAAA;AAAA,SAEJnD,sBAAAqB,KAAA;EAEJ;IAAAC,KAAA;IAAA+D,aAAA;IAAAC,eAAA;IAAAC,gBAAA;IAAAhE,OAAA;IAAAC,QAAA;EAAA,IAAAH,KAAA","ignoreList":[]}

package/dist/jsx/components/DataTable/DataTableRoot.mjs

@@ -12,7 +12,7 @@ import { useDragScroll } from "../../hooks/useDragScroll.mjs";
 import { useDataTableKeyboard } from "../../hooks/useDataTableKeyboard.mjs";
 import { DataTableColumnPinning } from "../DataTableColumnPinning/index.mjs";
 import { DataTablePagination } from "../DataTablePagination/index.mjs";
-import { DataTableToolbar } from "../DataTableToolbar/index.mjs";
+import { DataTableCardToolbar, DataTableToolbar } from "../DataTableToolbar/index.mjs";
 import { DataTableBulkActions } from "../DataTableBulkActions/index.mjs";
 import { DataTableCell } from "../DataTableCell/index.mjs";
 import { ColumnHeaderFilter } from "../ColumnHeaderFilter/index.mjs";
@@ -20,7 +20,7 @@ import { DataTableFilterChips } from "../DataTableFilterChips/index.mjs";
 import { Table } from "@multiplatform.one/table-primitives";
 import { DataTableContext } from "./DataTableContext.mjs";
 import { DataTableStateContext } from "./DataTableStateContext.mjs";
-import { DataTableCardControls } from "./DataTableCardControls.mjs";
+import { DataTableCardControls, DataTableCardSortControl } from "./DataTableCardControls.mjs";
 import { DataTableMobileCards } from "./DataTableMobileCards.mjs";
 import { DataTableDocumentList } from "./DataTableDocumentList.mjs";
 import { DataTableVirtualized } from "./DataTableVirtualized.mjs";
@@ -249,6 +249,7 @@ function DataTableRoot({
         flexBasis: "auto"
       };
     }
+    if (columnLayout === "equal" && !enableColumnResizing) return {};
     if (hasExplicitSize || enableColumnResizing || columnLayout === "scroll") {
       return {
         width: col.getSize()
@@ -332,14 +333,15 @@ function DataTableRoot({
         flexGrow: 0,
         flexShrink: 0,
         flexBasis: "auto",
-        minWidth: 80
+        minWidth: 0
       };
     }
     if (enableColumnResizing) {
       return {
         flexGrow: 0,
         flexShrink: 0,
-        flexBasis: "auto"
+        flexBasis: "auto",
+        minWidth: 0
       };
     }
     return {
@@ -807,6 +809,9 @@ function DataTableRoot({
     selectAllScope,
     filterUi
   }), [table, state, actions, computed, selectAllScope, filterUi]);
+  const hasCardSort = showCards && enableSorting && table.getVisibleLeafColumns().some(column => column.getCanSort());
+  const defaultCardToolbar = showCards && !renderToolbar;
+  const ToolbarComponent = defaultCardToolbar ? DataTableCardToolbar : DataTableToolbar;
   const renderToolbarComponent = () => {
     const activeFilterCount = table.getState().columnFilters?.length || 0;
     if (renderToolbar) {
@@ -823,10 +828,16 @@ function DataTableRoot({
         isFetching: Boolean(state.isFetching)
       });
     }
-    return /* @__PURE__ */jsx(DataTableToolbar, {
+    return /* @__PURE__ */jsx(ToolbarComponent, {
       globalFilter: state.globalFilter || "",
       onGlobalFilterChange: actions.setGlobalFilter,
       onClearFilters: actions.clearFilters,
+      customActions: defaultCardToolbar && hasCardSort ? /* @__PURE__ */jsx(DataTableCardSortControl, {
+        table,
+        compact: isCompact,
+        disabled,
+        contained: true
+      }) : void 0,
       activeFilterCount,
       onSaveView: actions.saveView,
       onLoadView: actions.loadView,
@@ -857,7 +868,7 @@ function DataTableRoot({
     });
   };
   const renderInner = (tableData, effectiveHandleAddRow, effectiveHandleDeleteRow, _effectiveHandleCellChange) => {
-    const hasToolbar = enableGlobalSearch || enableFiltering || enableViews;
+    const hasToolbar = enableGlobalSearch || enableFiltering || enableViews || defaultCardToolbar && hasCardSort;
     const scrollContainerRef = useRef(null);
     const tableBodyRef = useRef(null);
     const [bodyClipped, setBodyClipped] = useState(false);
@@ -964,7 +975,7 @@ function DataTableRoot({
               getRowPressProps
             } : {})
           }) : showCards ? /* @__PURE__ */jsxs(Fragment, {
-            children: [/* @__PURE__ */jsx(DataTableCardControls, {
+            children: [!defaultCardToolbar && /* @__PURE__ */jsx(DataTableCardControls, {
               table,
               enableSorting,
               enableFiltering,
@@ -1169,25 +1180,40 @@ function DataTableRoot({
                         } : {}),
                         children: [/* @__PURE__ */jsxs(View, {
                           flexDirection: "row",
+                          flexWrap: "wrap",
                           gap: "$2",
                           alignItems: "center",
                           justifyContent: isRightAligned ? "flex-end" : "space-between",
                           flex: 1,
+                          minWidth: 0,
                           children: [/* @__PURE__ */jsxs(View, {
                             flexDirection: "row",
                             gap: "$2",
                             alignItems: "center",
-                            flex: isRightAligned ? void 0 : 1,
+                            flexGrow: isRightAligned ? 0 : 1,
+                            flexShrink: 1,
+                            flexBasis: "auto",
+                            minWidth: 0,
                             justifyContent: isRightAligned ? "flex-end" : void 0,
                             children: [/* @__PURE__ */jsx(Text, {
                               fontSize: knobProps.sizeToken,
                               userSelect: "none",
+                              flexShrink: 1,
+                              minWidth: 0,
+                              textAlign: isRightAligned ? "right" : void 0,
+                              "data-header-label": "",
+                              ...(isWeb ? {
+                                style: {
+                                  overflowWrap: "anywhere"
+                                }
+                              } : {}),
                               children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())
                             }), isSortableHeader && /* @__PURE__ */jsx(Tooltip, {
                               content: sortDirection === "asc" ? t("Sorted ascending (click to sort descending)") : sortDirection === "desc" ? t("Sorted descending (click to clear)") : t("Click to sort (Shift+click for multi-sort)"),
                               children: /* @__PURE__ */jsxs(View, {
                                 "aria-hidden": true,
                                 role: "presentation",
+                                flexShrink: 0,
                                 children: [sortDirection === "asc" && /* @__PURE__ */jsx(CaretDownIcon, {
                                   size: chrome.iconPx,
                                   color: "var(--color11)"
@@ -1207,6 +1233,7 @@ function DataTableRoot({
                             flexDirection: "row",
                             gap: "$1",
                             alignItems: "center",
+                            flexShrink: 0,
                             children: [enableFiltering && header.column.getCanFilter() && /* @__PURE__ */jsx(ColumnHeaderFilter, {
                               columnId: header.column.id,
                               columnLabel: typeof header.column.columnDef.header === "string" ? header.column.columnDef.header : header.column.id,
@@ -1459,13 +1486,41 @@ function DataTableRoot({
                   }
                 })]
               }), hasFooter && /* @__PURE__ */jsx(Table.Foot, {
-                children: footerGroups.map(footerGroup => /* @__PURE__ */jsx(Table.Row, {
-                  children: footerGroup.headers.map(header => {
+                children: footerGroups.map(footerGroup => /* @__PURE__ */jsxs(Table.Row, {
+                  children: [enableRowSelection && /* @__PURE__ */jsx(Table.Cell, {
+                    cellWidth: selectionColWidth,
+                    cellHeight,
+                    cellLocation: "first"
+                  }), showRowNumbers && /* @__PURE__ */jsx(Table.Cell, {
+                    cellWidth: chrome.rowNumberCol,
+                    cellHeight,
+                    cellLocation: enableRowSelection ? "middle" : "first"
+                  }), enableRowExpansion && /* @__PURE__ */jsx(Table.Cell, {
+                    cellWidth: chrome.expandCol,
+                    cellHeight,
+                    cellLocation: enableRowSelection || showRowNumbers ? "middle" : "first"
+                  }), footerGroup.headers.map(header => {
+                    const stickyStyle = getStickyStyle(header.column.id);
                     const columnAlign = resolveColumnAlign({
                       ...header.column.columnDef,
                       id: header.column.id
                     });
                     return /* @__PURE__ */jsx(Table.Cell, {
+                      ...cellFlexProps,
+                      ...getColSizeProps(header.column),
+                      ...(isWeb && stickyStyle ? {
+                        style: {
+                          position: "sticky",
+                          ...("insetInlineStart" in stickyStyle && {
+                            insetInlineStart: stickyStyle.insetInlineStart
+                          }),
+                          ...("insetInlineEnd" in stickyStyle && {
+                            insetInlineEnd: stickyStyle.insetInlineEnd
+                          }),
+                          zIndex: 2,
+                          backgroundColor: "var(--color2)"
+                        }
+                      } : {}),
                       justifyContent: alignToFlex(columnAlign),
                       "data-align": columnAlign,
                       children: header.isPlaceholder ? null : /* @__PURE__ */jsx(View, {
@@ -1481,7 +1536,11 @@ function DataTableRoot({
                         children: flexRender(header.column.columnDef.footer, header.getContext())
                       })
                     }, header.id);
-                  })
+                  }), showDeleteRow && !readOnly && /* @__PURE__ */jsx(Table.Cell, {
+                    cellWidth: chrome.deleteCol,
+                    cellHeight,
+                    cellLocation: "last"
+                  })]
                 }, footerGroup.id))
               })]
             })