@multiplatform.one/table 7.10.0 → 7.11.0

package/README.md

@@ -927,8 +927,68 @@ function ServerTable({ data, totalCount }) {
 
 ## 🎨 Customization
 
+### Column widths
+
+`DataTableColumn.width`, `minWidth` and `maxWidth` map to TanStack's `size`,
+`minSize` and `maxSize` before table defaults are applied. Each canonical property
+wins independently when supplied. Aliases accept finite nonnegative pixels,
+including fractions; invalid aliases are ignored. A zero width still respects
+the minimum, so it doesn't hide a column.
+
+```tsx
+const columns: DataTableColumn<Row>[] = [
+  { accessorKey: "rank", header: "Rank", width: 48 },
+  { accessorKey: "name", header: "Name", width: 320, minWidth: 200, maxWidth: 400 },
+  { accessorKey: "score", header: "Score", width: 80 },
+];
+
+<DataTable data={rows} columns={columns} layout="table" columnLayout="scroll" />;
+```
+
+| Column layout | Sizing behavior |
+| --- | --- |
+| `equal` (default), without resizing | Unpinned cells share available width and ignore declared sizes. A development warning names `columnLayout` when widths are supplied. |
+| `equal` with resizing | Resolved sizes set fixed cell widths. |
+| `scroll` | Header, body and footer use resolved widths, including widths below 80px. Web tables scroll horizontally when their total exceeds the container. |
+| `auto` | Keeps the existing table-layout algorithm on web. Resolved sizes are inputs, not a promise of measured content widths or last-column-only expansion. |
+
+Pinned cells keep their resolved size in every mode so sticky offsets match the
+boxes. A column with no sizing properties defaults to 150px in sized modes.
+Fixed scroll columns can leave unused space when their total is narrower than
+the container. Cards and list presentations keep their existing layout.
+
+Sizing state from resizing or a loaded view overrides the initial size, subject
+to the resolved min/max constraints. Resetting sizing reveals the declaration
+again. Definitions aren't mutated, and grouped leaf columns are normalized
+independently; a group width isn't distributed among its children.
+
+This activates formerly ignored aliases in sized layouts. Review tables that
+supplied them alongside canonical properties, especially mixed bounds such as
+`size: 180, maxWidth: 140`, which resolves to 140 unless `maxSize` is also supplied.
+
+Saved views still use `ColumnView.width`; their schema hasn't changed. Loading a
+prepared view applies its sizing state. The existing save path selects columns
+from visibility-state keys, so widths for other columns can be omitted. The
+view-options slider retains its mount-time width snapshot after external updates
+and its existing 50–300px editing range in 10px steps. General save/load round
+trips and slider synchronization aren't repaired by column-definition normalization.
+
 ### Custom Toolbar
 
+Default web cards keep the all-field **Filter** and **Sort** together in one
+primary row. Filter includes hidden and non-column `filterableFields`; its chips
+still reopen the same editor and can be removed or cleared. Search gets its own
+line. Saved views, Save and the fetching indicator occupy a separate wrapping
+group. A long active Sort label truncates within its row budget while its full
+column and direction remain in the button's accessible description.
+
+This composition is internal to the default cards path, including responsive
+`layout="auto"`. Public standalone toolbars, the grid and custom `renderToolbar`
+composition keep their existing layout. Custom toolbars retain the card Sort /
+Add Filter fallback. That fallback remains column-based; a custom toolbar must
+still mount `DataTableFilterButton` to host canonical hidden-field/chip editing.
+The existing custom-only missing-editor limitation isn't repaired here.
+
 `DataTableToolbar` composes a global-search section (the catalog `SearchInput` with a
 clear affordance) and, behind a toolbar divider, a roving-focus actions section:
 a filter button (when the table has filterable fields), your `customActions`, and view

package/dist/cjs/components/DataTable/DataTableCardControls.cjs

@@ -22,7 +22,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_react = require("@phosphor-icons/react");
@@ -39,6 +40,90 @@ var import_jsx_runtime = require("react/jsx-runtime");
 function getColumnLabel(column) {
   return typeof column.columnDef.header === "string" ? column.columnDef.header : column.id;
 }
+function DataTableCardSortControl({
+  table,
+  compact = false,
+  disabled = false,
+  contained = false
+}) {
+  const {
+    t
+  } = (0, import_react_i18next.useTranslation)();
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)({
+    component: "DataTable",
+    compact
+  });
+  const chrome = (0, import_dataTableChrome.dataTableChrome)(String(knobProps.sizeToken));
+  const [sortMenuOpen, setSortMenuOpen] = (0, import_react2.useState)(false);
+  const sortableColumns = table.getVisibleLeafColumns().filter(col => col.getCanSort());
+  const activeSort = table.getState().sorting?.[0];
+  const activeSortColumn = activeSort ? table.getColumn(activeSort.id) : void 0;
+  const sortLabel = activeSortColumn ? `${getColumnLabel(activeSortColumn)} ${activeSort.desc ? "\u2193" : "\u2191"}` : t("Sort");
+  if (!sortableColumns.length) return null;
+  const menu = /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.DropdownMenu, {
+    open: disabled ? false : sortMenuOpen,
+    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(column => {
+        const 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: () => {
+            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({
   table,
   enableSorting = false,
@@ -51,18 +136,11 @@ function DataTableCardControls({
     t
   } = (0, import_react_i18next.useTranslation)();
   const {
-    knobProps,
     disabledState
   } = (0, import_theme.useResolvedKnobs)({
     component: "DataTable",
     compact
   });
-  const chrome = (0, import_dataTableChrome.dataTableChrome)(String(knobProps.sizeToken));
-  const [sortMenuOpen, setSortMenuOpen] = (0, import_react2.useState)(false);
-  const sortableColumns = enableSorting ? table.getVisibleLeafColumns().filter(col => col.getCanSort()) : [];
-  const activeSort = table.getState().sorting?.[0];
-  const activeSortColumn = activeSort ? table.getColumn(activeSort.id) : void 0;
-  const sortLabel = activeSortColumn ? `${getColumnLabel(activeSortColumn)} ${activeSort.desc ? "\u2193" : "\u2191"}` : t("Sort");
   if (!enableSorting && !enableFiltering) return null;
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
     alignItems: "center",
@@ -71,52 +149,10 @@ function DataTableCardControls({
     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: 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(column => {
-          const 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: () => {
-              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/cjs/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/cjs/components/DataTable/DataTableCardControls.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","DataTableCardControls_exports","__export","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","desc","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","onSelect","toggleSorting","clearSorting","View","chromeKnobProps","pointerEvents"],"sources":["../../../../src/components/DataTable/DataTableCardControls.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","DataTableCardControls_exports","__export","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","desc","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","disabledState","XStack","alignItems","flexWrap","gap","paddingVertical","role"],"sources":["../../../../src/components/DataTable/DataTableCardControls.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/cjs/components/DataTable/DataTableRoot.cjs

@@ -287,6 +287,7 @@ function DataTableRoot({
         flexBasis: "auto"
       };
     }
+    if (columnLayout === "equal" && !enableColumnResizing) return {};
     if (hasExplicitSize || enableColumnResizing || columnLayout === "scroll") {
       return {
         width: col.getSize()
@@ -370,14 +371,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 {
@@ -845,6 +847,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 ? import_DataTableToolbar.DataTableCardToolbar : import_DataTableToolbar.DataTableToolbar;
   const renderToolbarComponent = () => {
     const activeFilterCount = table.getState().columnFilters?.length || 0;
     if (renderToolbar) {
@@ -861,10 +866,16 @@ function DataTableRoot({
         isFetching: Boolean(state.isFetching)
       });
     }
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_DataTableToolbar.DataTableToolbar, {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToolbarComponent, {
       globalFilter: state.globalFilter || "",
       onGlobalFilterChange: actions.setGlobalFilter,
       onClearFilters: actions.clearFilters,
+      customActions: defaultCardToolbar && hasCardSort ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_DataTableCardControls.DataTableCardSortControl, {
+        table,
+        compact: isCompact,
+        disabled,
+        contained: true
+      }) : void 0,
       activeFilterCount,
       onSaveView: actions.saveView,
       onLoadView: actions.loadView,
@@ -895,7 +906,7 @@ function DataTableRoot({
     });
   };
   const renderInner = (tableData, effectiveHandleAddRow, effectiveHandleDeleteRow, _effectiveHandleCellChange) => {
-    const hasToolbar = enableGlobalSearch || enableFiltering || enableViews;
+    const hasToolbar = enableGlobalSearch || enableFiltering || enableViews || defaultCardToolbar && hasCardSort;
     const scrollContainerRef = (0, import_react2.useRef)(null);
     const tableBodyRef = (0, import_react2.useRef)(null);
     const [bodyClipped, setBodyClipped] = (0, import_react2.useState)(false);
@@ -1002,7 +1013,7 @@ function DataTableRoot({
               getRowPressProps
             } : {})
           }) : showCards ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
-            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_DataTableCardControls.DataTableCardControls, {
+            children: [!defaultCardToolbar && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_DataTableCardControls.DataTableCardControls, {
               table,
               enableSorting,
               enableFiltering,
@@ -1497,13 +1508,41 @@ function DataTableRoot({
                   }
                 })]
               }), hasFooter && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Foot, {
-                children: footerGroups.map(footerGroup => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Row, {
-                  children: footerGroup.headers.map(header => {
+                children: footerGroups.map(footerGroup => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_table_primitives.Table.Row, {
+                  children: [enableRowSelection && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Cell, {
+                    cellWidth: selectionColWidth,
+                    cellHeight,
+                    cellLocation: "first"
+                  }), showRowNumbers && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Cell, {
+                    cellWidth: chrome.rowNumberCol,
+                    cellHeight,
+                    cellLocation: enableRowSelection ? "middle" : "first"
+                  }), enableRowExpansion && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.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__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Cell, {
+                      ...cellFlexProps,
+                      ...getColSizeProps(header.column),
+                      ...(import_tamagui.isWeb && stickyStyle ? {
+                        style: {
+                          position: "sticky",
+                          ...("insetInlineStart" in stickyStyle && {
+                            insetInlineStart: stickyStyle.insetInlineStart
+                          }),
+                          ...("insetInlineEnd" in stickyStyle && {
+                            insetInlineEnd: stickyStyle.insetInlineEnd
+                          }),
+                          zIndex: 2,
+                          backgroundColor: "var(--color2)"
+                        }
+                      } : {}),
                       justifyContent: (0, import_columnAlign.alignToFlex)(columnAlign),
                       "data-align": columnAlign,
                       children: header.isPlaceholder ? null : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
@@ -1519,7 +1558,11 @@ function DataTableRoot({
                         children: (0, import_react_table.flexRender)(header.column.columnDef.footer, header.getContext())
                       })
                     }, header.id);
-                  })
+                  }), showDeleteRow && !readOnly && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Cell, {
+                    cellWidth: chrome.deleteCol,
+                    cellHeight,
+                    cellLocation: "last"
+                  })]
                 }, footerGroup.id))
               })]
             })