@multiplatform.one/table 7.10.0 → 7.15.0

package/dist/esm/components/DataTable/DataTableCardControls.mjs

@@ -12,6 +12,90 @@ import { jsx, jsxs } from "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
+  } = useTranslation();
+  const {
+    knobProps
+  } = useResolvedKnobs({
+    component: "DataTable",
+    compact
+  });
+  const chrome = dataTableChrome(String(knobProps.sizeToken));
+  const [sortMenuOpen, setSortMenuOpen] = 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__ */jsxs(DropdownMenu, {
+    open: disabled ? false : sortMenuOpen,
+    onOpenChange: open => {
+      if (disabled) return;
+      setSortMenuOpen(open);
+    },
+    children: [/* @__PURE__ */jsx(DropdownMenu.Trigger, {
+      asChild: true,
+      children: /* @__PURE__ */jsx(Button, {
+        size: knobProps.sizeToken,
+        icon: /* @__PURE__ */jsx(CaretUpDownIcon, {
+          size: chrome.iconPx
+        }),
+        "aria-label": t("Sort rows"),
+        ...(contained ? {
+          minWidth: 0,
+          maxWidth: "100%",
+          "aria-description": activeSortColumn ? sortLabel : void 0
+        } : {}),
+        disabled,
+        children: sortLabel
+      })
+    }), /* @__PURE__ */jsxs(DropdownMenu.Content, {
+      children: [/* @__PURE__ */jsx(DropdownMenu.Label, {
+        children: t("Sort by")
+      }), sortableColumns.map(column => {
+        const sorted = column.getIsSorted();
+        return /* @__PURE__ */jsx(DropdownMenu.Item, {
+          closeOnSelect: false,
+          icon: sorted === "asc" ? /* @__PURE__ */jsx(CaretDownIcon, {
+            size: chrome.iconPx
+          }) : sorted === "desc" ? /* @__PURE__ */jsx(CaretDownIcon, {
+            size: chrome.iconPx,
+            style: {
+              transform: "rotate(180deg)"
+            }
+          }) : /* @__PURE__ */jsx(CaretUpDownIcon, {
+            size: chrome.iconPx
+          }),
+          "aria-label": 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__ */jsx(View, {
+    "data-table-card-sort": "",
+    flexBasis: "auto",
+    flexGrow: 0,
+    flexShrink: 1,
+    minWidth: 0,
+    maxWidth: "50%",
+    children: menu
+  }) : menu;
+}
 function DataTableCardControls({
   table,
   enableSorting = false,
@@ -24,18 +108,11 @@ function DataTableCardControls({
     t
   } = useTranslation();
   const {
-    knobProps,
     disabledState
   } = useResolvedKnobs({
     component: "DataTable",
     compact
   });
-  const chrome = dataTableChrome(String(knobProps.sizeToken));
-  const [sortMenuOpen, setSortMenuOpen] = 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__ */jsxs(XStack, {
     alignItems: "center",
@@ -44,52 +121,10 @@ function DataTableCardControls({
     paddingVertical: "$2",
     role: "toolbar",
     "aria-label": t("Card list controls"),
-    children: [enableSorting && sortableColumns.length > 0 && /* @__PURE__ */jsxs(DropdownMenu, {
-      open: disabled ? false : sortMenuOpen,
-      onOpenChange: open => {
-        if (disabled) return;
-        setSortMenuOpen(open);
-      },
-      children: [/* @__PURE__ */jsx(DropdownMenu.Trigger, {
-        asChild: true,
-        children: /* @__PURE__ */jsx(Button, {
-          size: knobProps.sizeToken,
-          icon: /* @__PURE__ */jsx(CaretUpDownIcon, {
-            size: chrome.iconPx
-          }),
-          "aria-label": t("Sort rows"),
-          disabled,
-          children: sortLabel
-        })
-      }), /* @__PURE__ */jsxs(DropdownMenu.Content, {
-        children: [/* @__PURE__ */jsx(DropdownMenu.Label, {
-          children: t("Sort by")
-        }), sortableColumns.map(column => {
-          const sorted = column.getIsSorted();
-          return /* @__PURE__ */jsx(DropdownMenu.Item, {
-            closeOnSelect: false,
-            icon: sorted === "asc" ? /* @__PURE__ */jsx(CaretDownIcon, {
-              size: chrome.iconPx
-            }) : sorted === "desc" ? /* @__PURE__ */jsx(CaretDownIcon, {
-              size: chrome.iconPx,
-              style: {
-                transform: "rotate(180deg)"
-              }
-            }) : /* @__PURE__ */jsx(CaretUpDownIcon, {
-              size: chrome.iconPx
-            }),
-            "aria-label": 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__ */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.
@@ -106,5 +141,5 @@ function DataTableCardControls({
     })]
   });
 }
-export { DataTableCardControls };
+export { DataTableCardControls, DataTableCardSortControl };
 //# sourceMappingURL=DataTableCardControls.mjs.map

package/dist/esm/components/DataTable/DataTableCardControls.mjs.map

@@ -1 +1 @@
-{"version":3,"names":["CaretDownIcon","CaretUpDownIcon","DropdownMenu","Button","useResolvedKnobs","useState","View","XStack","useTranslation","withInterp","DataTableFilters","dataTableChrome","jsx","jsxs","getColumnLabel","column","columnDef","header","id","DataTableCardControls","table","enableSorting","enableFiltering","availableColumns","compact","disabled","t","knobProps","disabledState","component","chrome","String","sizeToken","sortMenuOpen","setSortMenuOpen","sortableColumns","getVisibleLeafColumns","filter","col","getCanSort","activeSort","getState","sorting","activeSortColumn","getColumn","sortLabel","desc","alignItems","flexWrap","gap","paddingVertical","role","children","length","open","onOpenChange","Trigger","asChild","size","icon","iconPx","Content","Label","map","sorted","getIsSorted","Item","closeOnSelect","style","transform","onSelect","toggleSorting","clearSorting","chromeKnobProps","pointerEvents"],"sources":["../../../../src/components/DataTable/DataTableCardControls.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["CaretDownIcon","CaretUpDownIcon","DropdownMenu","Button","useResolvedKnobs","useState","View","XStack","useTranslation","withInterp","DataTableFilters","dataTableChrome","jsx","jsxs","getColumnLabel","column","columnDef","header","id","DataTableCardSortControl","table","compact","disabled","contained","t","knobProps","component","chrome","String","sizeToken","sortMenuOpen","setSortMenuOpen","sortableColumns","getVisibleLeafColumns","filter","col","getCanSort","activeSort","getState","sorting","activeSortColumn","getColumn","sortLabel","desc","length","menu","open","onOpenChange","children","Trigger","asChild","size","icon","iconPx","minWidth","maxWidth","Content","Label","map","sorted","getIsSorted","Item","closeOnSelect","style","transform","onSelect","toggleSorting","clearSorting","flexBasis","flexGrow","flexShrink","DataTableCardControls","enableSorting","enableFiltering","availableColumns","disabledState","alignItems","flexWrap","gap","paddingVertical","role","chromeKnobProps","pointerEvents"],"sources":["../../../../src/components/DataTable/DataTableCardControls.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

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

@@ -12,34 +12,112 @@ import { dataTableChrome } from "./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
   } = useTranslation();
   var {
-    knobProps,
-    disabledState
+    knobProps
   } = useResolvedKnobs({
     component: "DataTable",
     compact
   });
   var chrome = dataTableChrome(String(knobProps.sizeToken));
   var [sortMenuOpen, setSortMenuOpen] = 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__ */_jsxs(DropdownMenu, {
+    open: disabled ? false : sortMenuOpen,
+    onOpenChange: function onOpenChange(open) {
+      if (disabled) return;
+      setSortMenuOpen(open);
+    },
+    children: [/* @__PURE__ */_jsx(DropdownMenu.Trigger, {
+      asChild: true,
+      children: /* @__PURE__ */_jsx(Button, {
+        size: knobProps.sizeToken,
+        icon: /* @__PURE__ */_jsx(CaretUpDownIcon, {
+          size: chrome.iconPx
+        }),
+        "aria-label": t("Sort rows"),
+        ...(contained ? {
+          minWidth: 0,
+          maxWidth: "100%",
+          "aria-description": activeSortColumn ? sortLabel : void 0
+        } : {}),
+        disabled,
+        children: sortLabel
+      })
+    }), /* @__PURE__ */_jsxs(DropdownMenu.Content, {
+      children: [/* @__PURE__ */_jsx(DropdownMenu.Label, {
+        children: t("Sort by")
+      }), sortableColumns.map(function (column) {
+        var sorted = column.getIsSorted();
+        return /* @__PURE__ */_jsx(DropdownMenu.Item, {
+          closeOnSelect: false,
+          icon: sorted === "asc" ? /* @__PURE__ */_jsx(CaretDownIcon, {
+            size: chrome.iconPx
+          }) : sorted === "desc" ? /* @__PURE__ */_jsx(CaretDownIcon, {
+            size: chrome.iconPx,
+            style: {
+              transform: "rotate(180deg)"
+            }
+          }) : /* @__PURE__ */_jsx(CaretUpDownIcon, {
+            size: chrome.iconPx
+          }),
+          "aria-label": 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__ */_jsx(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
+  } = useTranslation();
+  var {
+    disabledState
+  } = useResolvedKnobs({
+    component: "DataTable",
+    compact
+  });
   if (!enableSorting && !enableFiltering) return null;
   return /* @__PURE__ */_jsxs(XStack, {
     alignItems: "center",
@@ -48,52 +126,10 @@ function DataTableCardControls(param) {
     paddingVertical: "$2",
     role: "toolbar",
     "aria-label": t("Card list controls"),
-    children: [enableSorting && sortableColumns.length > 0 && /* @__PURE__ */_jsxs(DropdownMenu, {
-      open: disabled ? false : sortMenuOpen,
-      onOpenChange: function onOpenChange(open) {
-        if (disabled) return;
-        setSortMenuOpen(open);
-      },
-      children: [/* @__PURE__ */_jsx(DropdownMenu.Trigger, {
-        asChild: true,
-        children: /* @__PURE__ */_jsx(Button, {
-          size: knobProps.sizeToken,
-          icon: /* @__PURE__ */_jsx(CaretUpDownIcon, {
-            size: chrome.iconPx
-          }),
-          "aria-label": t("Sort rows"),
-          disabled,
-          children: sortLabel
-        })
-      }), /* @__PURE__ */_jsxs(DropdownMenu.Content, {
-        children: [/* @__PURE__ */_jsx(DropdownMenu.Label, {
-          children: t("Sort by")
-        }), sortableColumns.map(function (column) {
-          var sorted = column.getIsSorted();
-          return /* @__PURE__ */_jsx(DropdownMenu.Item, {
-            closeOnSelect: false,
-            icon: sorted === "asc" ? /* @__PURE__ */_jsx(CaretDownIcon, {
-              size: chrome.iconPx
-            }) : sorted === "desc" ? /* @__PURE__ */_jsx(CaretDownIcon, {
-              size: chrome.iconPx,
-              style: {
-                transform: "rotate(180deg)"
-              }
-            }) : /* @__PURE__ */_jsx(CaretUpDownIcon, {
-              size: chrome.iconPx
-            }),
-            "aria-label": 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__ */_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.
@@ -110,5 +146,5 @@ function DataTableCardControls(param) {
     })]
   });
 }
-export { DataTableCardControls };
+export { DataTableCardControls, DataTableCardSortControl };
 //# sourceMappingURL=DataTableCardControls.native.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","CaretDownIcon","CaretUpDownIcon","DropdownMenu","Button","useResolvedKnobs","useState","View","XStack","useTranslation","withInterp","DataTableFilters","dataTableChrome","getColumnLabel","column","columnDef","header","id","DataTableCardControls","param","table","enableSorting","enableFiltering","availableColumns","compact","disabled","_table_getState_sorting","t","knobProps","disabledState","component","chrome","String","sizeToken","sortMenuOpen","setSortMenuOpen","sortableColumns","getVisibleLeafColumns","filter","col","getCanSort","activeSort","getState","sorting","activeSortColumn","getColumn","sortLabel","desc","alignItems","flexWrap","gap","paddingVertical","role","children","length","open","onOpenChange","Trigger","asChild","size","icon","iconPx","Content","Label","map","sorted","getIsSorted","Item","closeOnSelect","style","transform","onSelect","toggleSorting","clearSorting","chromeKnobProps","pointerEvents"],"sources":["../../../../src/components/DataTable/DataTableCardControls.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","CaretDownIcon","CaretUpDownIcon","DropdownMenu","Button","useResolvedKnobs","useState","View","XStack","useTranslation","withInterp","DataTableFilters","dataTableChrome","getColumnLabel","column","columnDef","header","id","DataTableCardSortControl","param","table","compact","disabled","contained","_table_getState_sorting","t","knobProps","component","chrome","String","sizeToken","sortMenuOpen","setSortMenuOpen","sortableColumns","getVisibleLeafColumns","filter","col","getCanSort","activeSort","getState","sorting","activeSortColumn","getColumn","sortLabel","desc","length","menu","open","onOpenChange","children","Trigger","asChild","size","icon","iconPx","minWidth","maxWidth","Content","Label","map","sorted","getIsSorted","Item","closeOnSelect","style","transform","onSelect","toggleSorting","clearSorting","flexBasis","flexGrow","flexShrink","DataTableCardControls","enableSorting","enableFiltering","availableColumns","disabledState","alignItems","flexWrap","gap","paddingVertical","role","chromeKnobProps"],"sources":["../../../../src/components/DataTable/DataTableCardControls.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/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))
               })]
             })