@dbcdk/react-components 0.0.197 → 0.0.199

package/dist/components/table/TanstackTable.js

@@ -1,14 +1,18 @@
 'use client';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import { useReactTable, getSortedRowModel, getCoreRowModel } from '@tanstack/react-table';
 import * as React from 'react';
-import ColumnResizer from './components/column-resizer/ColumnResizer';
-import { TableHeaderSettings } from './components/table-settings/TableHeaderSettings';
+import { useClientPagination } from './hooks/useClientPagination';
+import { useDistributedLayout } from './hooks/useDistributedLayout';
+import { useElementWidth } from './hooks/useElementWidth';
+import { useResizeHeaderExtras } from './hooks/useResizeHeaderExtras';
+import { useUiSorting } from './hooks/useUiSorting';
 import { Table } from './Table';
-import { DEFAULT_COLUMN_PX } from './table.utils';
-import { sortingEqual, buildColumnVisibilityFromVisibleIds, buildDistributedColumnWidths, mapDefsToColumnItems, getSortPropsFromSorting } from './tanstackTable.utils';
+import { DEFAULT_COLUMN_PX, DEFAULT_VIEW_MODE, getActionsReserve, showsExpandToggle } from './table.utils';
+import { buildColumnVisibilityFromVisibleIds, applyNeighborResize, getSortPropsFromSorting } from './tanstackTable.utils';
 
 function TanstackTable(props) {
+  var _a, _b;
   const {
     data,
     dataKey,
@@ -18,6 +22,11 @@ function TanstackTable(props) {
     optimisticSortingUi = true,
     visibleColumnIds: visibleColumnIdsProp,
     manualSorting,
+    clientPagination = false,
+    take: takeProp,
+    skip: skipProp,
+    totalItemsCount: totalItemsCountProp,
+    onPageChange,
     viewMode,
     striped,
     settings,
@@ -28,37 +37,50 @@ function TanstackTable(props) {
     ...tableProps
   } = props;
   const visibleColumnIds = visibleColumnIdsProp != null ? visibleColumnIdsProp : settings == null ? void 0 : settings.visibleColumnIds;
-  const isControlledSorting = controlledSorting != null;
-  const [uiSorting, setUiSorting] = React.useState(controlledSorting != null ? controlledSorting : []);
-  React.useEffect(() => {
-    if (!isControlledSorting) return;
-    if (sortingEqual(uiSorting, controlledSorting)) return;
-    setUiSorting(controlledSorting);
-  }, [isControlledSorting, controlledSorting, uiSorting]);
+  const [uiSorting, setUiSorting] = useUiSorting(controlledSorting);
+  const pagination = useClientPagination({
+    enabled: clientPagination,
+    rowCount: data.length,
+    take: takeProp,
+    skip: skipProp,
+    totalItemsCount: totalItemsCountProp,
+    onPageChange
+  });
+  const { resetPage } = pagination;
   const columnVisibility = React.useMemo(
     () => buildColumnVisibilityFromVisibleIds(columns, visibleColumnIds),
     [columns, visibleColumnIds]
   );
   const [columnSizing, setColumnSizing] = React.useState({});
+  const neighborResizeRef = React.useRef(null);
   const containerRef = React.useRef(null);
-  const [availableWidth, setAvailableWidth] = React.useState(void 0);
+  const availableWidth = useElementWidth(containerRef);
   const table = useReactTable({
     data,
     columns,
     state: {
       sorting: uiSorting,
       columnSizing,
-      columnVisibility
+      columnVisibility,
+      ...pagination.paginationState ? { pagination: pagination.paginationState } : {}
     },
     onSortingChange: (updater) => {
       const next = typeof updater === "function" ? updater(uiSorting) : updater;
       if (optimisticSortingUi) setUiSorting(next);
+      resetPage();
       onSortingChange == null ? void 0 : onSortingChange(next);
     },
-    onColumnSizingChange: setColumnSizing,
+    onColumnSizingChange: (updater) => {
+      setColumnSizing((prev) => {
+        const next = typeof updater === "function" ? updater(prev) : updater;
+        const resize = neighborResizeRef.current;
+        return resize && table.getState().columnSizingInfo.isResizingColumn === resize.columnId ? applyNeighborResize(next, resize) : next;
+      });
+    },
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: getSortedRowModel(),
     manualSorting: manualSorting != null ? manualSorting : false,
+    ...pagination.tableOptions,
     enableColumnResizing: true,
     columnResizeMode: "onChange",
     defaultColumn: {
@@ -67,116 +89,54 @@ function TanstackTable(props) {
       size: DEFAULT_COLUMN_PX
     }
   });
-  React.useLayoutEffect(() => {
-    const el = containerRef.current;
-    if (!el) return;
-    const updateWidth = () => {
-      const next = el.clientWidth;
-      setAvailableWidth(next > 0 ? next : void 0);
-    };
-    updateWidth();
-    if (typeof ResizeObserver === "undefined") {
-      window.addEventListener("resize", updateWidth);
-      return () => window.removeEventListener("resize", updateWidth);
-    }
-    const observer = new ResizeObserver((entries) => {
-      var _a, _b, _c;
-      const entry = entries[0];
-      if (!entry) {
-        updateWidth();
-        return;
-      }
-      const contentWidth = (_c = (_b = (_a = entry.contentBoxSize) == null ? void 0 : _a[0]) == null ? void 0 : _b.inlineSize) != null ? _c : entry.contentRect.width;
-      const next = Math.floor(contentWidth);
-      setAvailableWidth(next > 0 ? next : void 0);
-    });
-    observer.observe(el);
-    return () => observer.disconnect();
-  }, []);
-  const distributedLayout = React.useMemo(() => {
-    if (availableWidth == null) return null;
-    return buildDistributedColumnWidths({
-      table,
-      hasSelection: Boolean(selectedRows && onRowSelect && dataKey),
-      // Row actions (context menu, expand toggle) and header actions (e.g. the
-      // settings menu) all reserve space at the end of the last column.
-      hasContextMenu: Boolean(
-        tableProps.getContextMenuItems || tableProps.expandableRows || settings || headerActionsProp != null
-      ),
-      defaultMinPx: 80,
-      columnSizing,
-      availableWidth
-    });
-  }, [
+  const resolvedViewMode = (_a = viewMode != null ? viewMode : settings == null ? void 0 : settings.viewMode) != null ? _a : DEFAULT_VIEW_MODE;
+  const { px: actionReservePx } = getActionsReserve({
+    hasRowActions: Boolean(tableProps.getContextMenuItems) || showsExpandToggle(tableProps.expandableRows, resolvedViewMode),
+    hasSettings: Boolean(settings),
+    hasOtherHeaderActions: headerActionsProp != null,
+    showHeader: (_b = tableProps.showHeader) != null ? _b : true
+  });
+  const { distributedLayout, columnItems } = useDistributedLayout({
     table,
-    selectedRows,
-    onRowSelect,
-    dataKey,
-    tableProps.getContextMenuItems,
-    tableProps.expandableRows,
-    settings,
-    headerActionsProp,
+    columns,
+    columnVisibility,
     columnSizing,
-    availableWidth
-  ]);
+    availableWidth,
+    hasSelection: Boolean(selectedRows && onRowSelect && dataKey),
+    actionReservePx
+  });
   const initialLayoutReady = availableWidth != null;
-  const resolvedLayout = React.useMemo(() => {
-    const next = {};
-    table.getVisibleLeafColumns().forEach((column) => {
-      next[column.id] = {
-        width: distributedLayout == null ? void 0 : distributedLayout.widths[column.id]
-      };
-    });
-    return next;
-  }, [table, distributedLayout]);
-  const columnItems = React.useMemo(
-    () => mapDefsToColumnItems(columns, columnVisibility, resolvedLayout),
-    [columns, columnVisibility, resolvedLayout]
-  );
   const visibleData = table.getRowModel().rows.map((r) => r.original);
   const { sortById, sortDirection } = getSortPropsFromSorting(uiSorting);
   const handleSortChange = React.useCallback(
     (column, direction) => {
       const next = direction == null ? [] : [{ id: column.id, desc: direction === "desc" }];
       if (optimisticSortingUi) setUiSorting(next);
+      resetPage();
       onSortingChange == null ? void 0 : onSortingChange(next);
     },
-    [optimisticSortingUi, onSortingChange]
+    [optimisticSortingUi, setUiSorting, resetPage, onSortingChange]
   );
-  const headerExtras = React.useCallback(
-    ({ index }) => {
-      var _a, _b, _c, _d;
-      const headerGroups = table.getHeaderGroups();
-      const leafHeaders = headerGroups.length > 0 ? headerGroups[headerGroups.length - 1].headers : [];
-      const header = leafHeaders[index];
-      if (!header) return null;
-      const canResize = (_c = (_b = (_a = header.column).getCanResize) == null ? void 0 : _b.call(_a)) != null ? _c : false;
-      const handler = (_d = header.getResizeHandler) == null ? void 0 : _d.call(header);
-      if (!canResize || !handler) return null;
-      return /* @__PURE__ */ jsx(ColumnResizer, { id: header.column.id, handler });
-    },
-    [table]
-  );
-  const headerActions = headerActionsProp != null || settings ? /* @__PURE__ */ jsxs(Fragment, { children: [
-    headerActionsProp,
-    settings ? /* @__PURE__ */ jsx(
-      TableHeaderSettings,
-      {
-        settings,
-        options: settingsOptions,
-        columns
-      }
-    ) : null
-  ] }) : void 0;
+  const headerExtras = useResizeHeaderExtras({
+    table,
+    widths: distributedLayout == null ? void 0 : distributedLayout.widths,
+    actionReservePx,
+    neighborResizeRef,
+    setColumnSizing
+  });
   return /* @__PURE__ */ jsx(
     Table,
     {
       ...tableProps,
-      viewMode: viewMode != null ? viewMode : settings == null ? void 0 : settings.viewMode,
+      viewMode: resolvedViewMode,
       striped: striped != null ? striped : settings == null ? void 0 : settings.striped,
-      headerActions,
+      headerActions: headerActionsProp,
+      settings,
+      settingsOptions,
+      settingsColumns: columns,
       tableRootRef: containerRef,
       onSortChange: handleSortChange,
+      ...pagination.tableProps,
       dataKey,
       data: visibleData,
       columns: columnItems,

package/dist/components/table/columnLayout.utils.cjs

@@ -0,0 +1,146 @@
+'use strict';
+
+var table_utils = require('./table.utils');
+
+const DEFAULT_MIN_COLUMN_PX = 80;
+function toIntegerTrackWidths(tracks, targetWidth) {
+  const floored = tracks.map((track) => ({
+    id: track.id,
+    width: Math.floor(track.width),
+    fraction: track.width - Math.floor(track.width)
+  }));
+  const baseTotal = floored.reduce((sum, track) => sum + track.width, 0);
+  let remainder = Math.max(0, targetWidth - baseTotal);
+  floored.slice().sort((a, b) => b.fraction - a.fraction).forEach((track) => {
+    if (remainder <= 0) return;
+    track.width += 1;
+    remainder -= 1;
+  });
+  return Object.fromEntries(floored.map((track) => [track.id, track.width]));
+}
+function distributeColumnWidths(args) {
+  const {
+    hasSelection,
+    hasContextMenu = false,
+    contextMenuReservePx = table_utils.ROW_ACTIONS_RESERVE_PX,
+    availableWidth
+  } = args;
+  const selectionWidth = hasSelection ? table_utils.SELECTION_COLUMN_PX : 0;
+  const tracks = args.tracks.map((track) => {
+    const min = Math.max(1, track.min);
+    const max = track.max != null ? Math.max(min, track.max) : void 0;
+    if (track.fixedWidth != null) {
+      return {
+        id: track.id,
+        width: track.fixedWidth,
+        weight: 0,
+        min,
+        max: track.fixedWidth,
+        fixed: true
+      };
+    }
+    return {
+      id: track.id,
+      width: min,
+      weight: Number.isFinite(track.weight) && track.weight > 0 ? track.weight : 1,
+      min,
+      max,
+      fixed: false
+    };
+  });
+  const lastTrack = tracks[tracks.length - 1];
+  if (hasContextMenu && lastTrack && !lastTrack.fixed) {
+    lastTrack.width += contextMenuReservePx;
+    lastTrack.min += contextMenuReservePx;
+    if (lastTrack.max != null) lastTrack.max += contextMenuReservePx;
+  }
+  const fixedWidth = selectionWidth + tracks.reduce((sum, track) => sum + track.width, 0);
+  let remaining = Math.max(0, availableWidth - fixedWidth);
+  let active = tracks.filter(
+    (track) => !track.fixed && (track.max == null || track.width < track.max)
+  );
+  while (remaining > 0.5 && active.length > 0) {
+    const totalWeight = active.reduce((sum, track) => sum + track.weight, 0);
+    if (totalWeight <= 0) break;
+    let consumed = 0;
+    const nextActive = [];
+    for (const track of active) {
+      const share = remaining * track.weight / totalWeight;
+      const maxGrow = track.max == null ? share : Math.max(0, track.max - track.width);
+      const growth = Math.min(share, maxGrow);
+      track.width += growth;
+      consumed += growth;
+      if (track.max == null || track.width < track.max - 0.5) {
+        nextActive.push(track);
+      }
+    }
+    if (consumed <= 0.5) break;
+    remaining -= consumed;
+    active = nextActive;
+  }
+  const flexible = tracks.filter((track) => !track.fixed);
+  if (remaining > 0.5 && flexible.length > 0 && flexible.every((track) => track.max != null)) {
+    const stretchable = flexible.filter((track) => track.max > track.min);
+    const totalWeight = stretchable.reduce((sum, track) => sum + track.weight, 0);
+    if (totalWeight > 0) {
+      for (const track of stretchable) {
+        track.width += remaining * track.weight / totalWeight;
+      }
+    }
+  }
+  if (tracks.length > 0 && flexible.length === 0) {
+    const target = availableWidth - selectionWidth;
+    const minOf = (track) => track.min + (hasContextMenu && track === lastTrack ? contextMenuReservePx : 0);
+    let scalable = tracks;
+    while (scalable.length > 0) {
+      const frozenWidth = tracks.filter((track) => !scalable.includes(track)).reduce((sum, track) => sum + track.width, 0);
+      const scalableWidth = scalable.reduce((sum, track) => sum + track.width, 0);
+      const factor = (target - frozenWidth) / scalableWidth;
+      const belowMin = scalable.filter((track) => track.width * factor < minOf(track));
+      if (belowMin.length === 0) {
+        for (const track of scalable) track.width *= factor;
+        break;
+      }
+      for (const track of belowMin) track.width = minOf(track);
+      scalable = scalable.filter((track) => !belowMin.includes(track));
+    }
+  }
+  const floatTrackTotal = tracks.reduce((sum, track) => sum + track.width, 0);
+  const targetTrackWidth = Math.min(
+    Math.floor(floatTrackTotal + 1e-6),
+    availableWidth - selectionWidth
+  );
+  const widths = toIntegerTrackWidths(tracks, targetTrackWidth);
+  const totalWidth = selectionWidth + Object.values(widths).reduce((sum, width) => sum + width, 0);
+  return {
+    selectionWidth: hasSelection ? table_utils.SELECTION_COLUMN_PX : void 0,
+    widths,
+    totalWidth,
+    availableWidth,
+    shouldOverflow: totalWidth > availableWidth
+  };
+}
+function usesDistributedWidths(columns) {
+  return columns.some(
+    (column) => column.minWidth != null || column.maxWidth != null || column.weight != null
+  );
+}
+function buildColumnTracks(columns) {
+  return columns.map((column) => {
+    var _a, _b;
+    if (typeof column.width === "number") {
+      return { id: column.id, min: column.width, max: column.width, weight: 1 };
+    }
+    return {
+      id: column.id,
+      min: (_a = column.minWidth) != null ? _a : DEFAULT_MIN_COLUMN_PX,
+      max: column.maxWidth,
+      weight: (_b = column.weight) != null ? _b : 1
+    };
+  });
+}
+
+exports.DEFAULT_MIN_COLUMN_PX = DEFAULT_MIN_COLUMN_PX;
+exports.buildColumnTracks = buildColumnTracks;
+exports.distributeColumnWidths = distributeColumnWidths;
+exports.usesDistributedWidths = usesDistributedWidths;

package/dist/components/table/columnLayout.utils.d.ts

@@ -0,0 +1,44 @@
+import type { ColumnItem } from './Table.types';
+/** Minimum width of a flexible column that doesn't set `minWidth`. */
+export declare const DEFAULT_MIN_COLUMN_PX: 80;
+/**
+ * Sizing constraints for one column, as input to `distributeColumnWidths`.
+ * A track grows from `min` towards `max` by its share of `weight`; a track
+ * with `fixedWidth` (e.g. resized by the user) keeps exactly that width.
+ */
+export type ColumnTrack = {
+    id: string;
+    min: number;
+    max?: number;
+    weight: number;
+    fixedWidth?: number;
+};
+export type DistributedColumnWidths = {
+    selectionWidth?: number;
+    widths: Record<string, number>;
+    totalWidth: number;
+    availableWidth: number;
+    shouldOverflow: boolean;
+};
+/**
+ * Spreads `availableWidth` over the tracks: every track starts at its `min`,
+ * then the remaining space is shared by `weight` until each track hits its
+ * `max`. Fixed tracks keep their width. If the minimums don't fit, the result
+ * is wider than `availableWidth` and the table scrolls horizontally.
+ */
+export declare function distributeColumnWidths(args: {
+    tracks: ReadonlyArray<ColumnTrack>;
+    hasSelection: boolean;
+    hasContextMenu?: boolean;
+    contextMenuReservePx?: number;
+    availableWidth: number;
+}): DistributedColumnWidths;
+/** True when any column opts into distributed sizing via `minWidth`, `maxWidth` or `weight`. */
+export declare function usesDistributedWidths<T>(columns: ReadonlyArray<ColumnItem<T>>): boolean;
+/**
+ * Maps Table columns to tracks. A numeric `width` pins the column
+ * (min = max = width); other columns flex between `minWidth` (default
+ * `DEFAULT_MIN_COLUMN_PX`) and `maxWidth`, sharing leftover space by
+ * `weight` (default 1).
+ */
+export declare function buildColumnTracks<T>(columns: ReadonlyArray<ColumnItem<T>>): ColumnTrack[];

package/dist/components/table/columnLayout.utils.js

@@ -0,0 +1,141 @@
+import { ROW_ACTIONS_RESERVE_PX, SELECTION_COLUMN_PX } from './table.utils';
+
+const DEFAULT_MIN_COLUMN_PX = 80;
+function toIntegerTrackWidths(tracks, targetWidth) {
+  const floored = tracks.map((track) => ({
+    id: track.id,
+    width: Math.floor(track.width),
+    fraction: track.width - Math.floor(track.width)
+  }));
+  const baseTotal = floored.reduce((sum, track) => sum + track.width, 0);
+  let remainder = Math.max(0, targetWidth - baseTotal);
+  floored.slice().sort((a, b) => b.fraction - a.fraction).forEach((track) => {
+    if (remainder <= 0) return;
+    track.width += 1;
+    remainder -= 1;
+  });
+  return Object.fromEntries(floored.map((track) => [track.id, track.width]));
+}
+function distributeColumnWidths(args) {
+  const {
+    hasSelection,
+    hasContextMenu = false,
+    contextMenuReservePx = ROW_ACTIONS_RESERVE_PX,
+    availableWidth
+  } = args;
+  const selectionWidth = hasSelection ? SELECTION_COLUMN_PX : 0;
+  const tracks = args.tracks.map((track) => {
+    const min = Math.max(1, track.min);
+    const max = track.max != null ? Math.max(min, track.max) : void 0;
+    if (track.fixedWidth != null) {
+      return {
+        id: track.id,
+        width: track.fixedWidth,
+        weight: 0,
+        min,
+        max: track.fixedWidth,
+        fixed: true
+      };
+    }
+    return {
+      id: track.id,
+      width: min,
+      weight: Number.isFinite(track.weight) && track.weight > 0 ? track.weight : 1,
+      min,
+      max,
+      fixed: false
+    };
+  });
+  const lastTrack = tracks[tracks.length - 1];
+  if (hasContextMenu && lastTrack && !lastTrack.fixed) {
+    lastTrack.width += contextMenuReservePx;
+    lastTrack.min += contextMenuReservePx;
+    if (lastTrack.max != null) lastTrack.max += contextMenuReservePx;
+  }
+  const fixedWidth = selectionWidth + tracks.reduce((sum, track) => sum + track.width, 0);
+  let remaining = Math.max(0, availableWidth - fixedWidth);
+  let active = tracks.filter(
+    (track) => !track.fixed && (track.max == null || track.width < track.max)
+  );
+  while (remaining > 0.5 && active.length > 0) {
+    const totalWeight = active.reduce((sum, track) => sum + track.weight, 0);
+    if (totalWeight <= 0) break;
+    let consumed = 0;
+    const nextActive = [];
+    for (const track of active) {
+      const share = remaining * track.weight / totalWeight;
+      const maxGrow = track.max == null ? share : Math.max(0, track.max - track.width);
+      const growth = Math.min(share, maxGrow);
+      track.width += growth;
+      consumed += growth;
+      if (track.max == null || track.width < track.max - 0.5) {
+        nextActive.push(track);
+      }
+    }
+    if (consumed <= 0.5) break;
+    remaining -= consumed;
+    active = nextActive;
+  }
+  const flexible = tracks.filter((track) => !track.fixed);
+  if (remaining > 0.5 && flexible.length > 0 && flexible.every((track) => track.max != null)) {
+    const stretchable = flexible.filter((track) => track.max > track.min);
+    const totalWeight = stretchable.reduce((sum, track) => sum + track.weight, 0);
+    if (totalWeight > 0) {
+      for (const track of stretchable) {
+        track.width += remaining * track.weight / totalWeight;
+      }
+    }
+  }
+  if (tracks.length > 0 && flexible.length === 0) {
+    const target = availableWidth - selectionWidth;
+    const minOf = (track) => track.min + (hasContextMenu && track === lastTrack ? contextMenuReservePx : 0);
+    let scalable = tracks;
+    while (scalable.length > 0) {
+      const frozenWidth = tracks.filter((track) => !scalable.includes(track)).reduce((sum, track) => sum + track.width, 0);
+      const scalableWidth = scalable.reduce((sum, track) => sum + track.width, 0);
+      const factor = (target - frozenWidth) / scalableWidth;
+      const belowMin = scalable.filter((track) => track.width * factor < minOf(track));
+      if (belowMin.length === 0) {
+        for (const track of scalable) track.width *= factor;
+        break;
+      }
+      for (const track of belowMin) track.width = minOf(track);
+      scalable = scalable.filter((track) => !belowMin.includes(track));
+    }
+  }
+  const floatTrackTotal = tracks.reduce((sum, track) => sum + track.width, 0);
+  const targetTrackWidth = Math.min(
+    Math.floor(floatTrackTotal + 1e-6),
+    availableWidth - selectionWidth
+  );
+  const widths = toIntegerTrackWidths(tracks, targetTrackWidth);
+  const totalWidth = selectionWidth + Object.values(widths).reduce((sum, width) => sum + width, 0);
+  return {
+    selectionWidth: hasSelection ? SELECTION_COLUMN_PX : void 0,
+    widths,
+    totalWidth,
+    availableWidth,
+    shouldOverflow: totalWidth > availableWidth
+  };
+}
+function usesDistributedWidths(columns) {
+  return columns.some(
+    (column) => column.minWidth != null || column.maxWidth != null || column.weight != null
+  );
+}
+function buildColumnTracks(columns) {
+  return columns.map((column) => {
+    var _a, _b;
+    if (typeof column.width === "number") {
+      return { id: column.id, min: column.width, max: column.width, weight: 1 };
+    }
+    return {
+      id: column.id,
+      min: (_a = column.minWidth) != null ? _a : DEFAULT_MIN_COLUMN_PX,
+      max: column.maxWidth,
+      weight: (_b = column.weight) != null ? _b : 1
+    };
+  });
+}
+
+export { DEFAULT_MIN_COLUMN_PX, buildColumnTracks, distributeColumnWidths, usesDistributedWidths };

package/dist/components/table/components/TableHeader.cjs

@@ -21,7 +21,8 @@ function TableHeader({
   onSortChange,
   headerExtras,
   stickyTop,
-  headerActions
+  headerActions,
+  compactHeaderActionReserve = false
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "thead",
@@ -45,6 +46,7 @@ function TableHeader({
             column,
             index,
             reserveInlineEnd: (hasRowContextMenu || headerActions != null) && index === columns.length - 1,
+            compactHeaderActionReserve,
             endAction: index === columns.length - 1 ? headerActions : void 0,
             sortById,
             sortDirection,

package/dist/components/table/components/TableHeader.d.ts

@@ -13,6 +13,7 @@ type Props<T> = {
     headerExtras?: (args: HeaderExtrasArgs<T>) => ReactNode;
     stickyTop?: string;
     headerActions?: ReactNode;
+    compactHeaderActionReserve?: boolean;
 };
-export declare function TableHeader<T>({ columns, hasSelection, selectionMode, hasRowContextMenu, allRowsSelected, onSelectAllRows, sortById, sortDirection, onSortChange, headerExtras, stickyTop, headerActions, }: Props<T>): React.ReactNode;
+export declare function TableHeader<T>({ columns, hasSelection, selectionMode, hasRowContextMenu, allRowsSelected, onSelectAllRows, sortById, sortDirection, onSortChange, headerExtras, stickyTop, headerActions, compactHeaderActionReserve, }: Props<T>): React.ReactNode;
 export {};

package/dist/components/table/components/TableHeader.js

@@ -15,7 +15,8 @@ function TableHeader({
   onSortChange,
   headerExtras,
   stickyTop,
-  headerActions
+  headerActions,
+  compactHeaderActionReserve = false
 }) {
   return /* @__PURE__ */ jsx(
     "thead",
@@ -39,6 +40,7 @@ function TableHeader({
             column,
             index,
             reserveInlineEnd: (hasRowContextMenu || headerActions != null) && index === columns.length - 1,
+            compactHeaderActionReserve,
             endAction: index === columns.length - 1 ? headerActions : void 0,
             sortById,
             sortDirection,