schummar-table 0.43.1 → 0.44.1

package/dist/index.js

@@ -8,7 +8,7 @@ import {
   defaultClasses,
   globalTableTheme,
   mergeThemes
-} from "./chunk-FTCKJOPQ.js";
+} from "./chunk-NTYYITKA.js";
 import "./chunk-WFCJ3D3G.js";
 import {
   __async,
@@ -791,13 +791,13 @@ var FilterControlContext = createContext3({
   isActive: false,
   close: () => void 0
 });
-function FilterControl() {
+function FilterControl({
+  component: Component = DefaultButton,
+  onClose
+}) {
   const table = useTableContext();
   const columnId = useColumnContext();
-  const IconButton2 = useTheme((t) => t.components.IconButton);
   const Popover2 = useTheme((t) => t.components.Popover);
-  const FilterList2 = useTheme((t) => t.icons.FilterList);
-  const ArrowDropDown2 = useTheme((t) => t.icons.ArrowDropDown);
   const classes = useTheme((t) => t.classes);
   const cssVariables = useCssVariables();
   const [anchor, setAnchor] = useState2(null);
@@ -817,14 +817,14 @@ function FilterControl() {
     }
   );
   function reset() {
-    table.update((state) => {
-      var _a;
-      const impl = state.filters.get(columnId);
-      (_a = impl == null ? void 0 : impl.onChange) == null ? void 0 : _a.call(impl, void 0);
-      if ((impl == null ? void 0 : impl.value) === void 0) {
+    var _a;
+    const impl = table.getState().filters.get(columnId);
+    (_a = impl == null ? void 0 : impl.onChange) == null ? void 0 : _a.call(impl, void 0);
+    if ((impl == null ? void 0 : impl.value) === void 0) {
+      table.update((state) => {
         state.filterValues.delete(columnId);
-      }
-    });
+      });
+    }
   }
   const context = useMemo2(
     () => ({
@@ -836,7 +836,7 @@ function FilterControl() {
   if (!filter) return null;
   return /* @__PURE__ */ jsxs7(FilterControlContext.Provider, { value: context, children: [
     /* @__PURE__ */ jsx9(
-      "div",
+      Component,
       {
         onClick: (event) => setAnchor(event.currentTarget),
         onContextMenu: (event) => {
@@ -844,18 +844,7 @@ function FilterControl() {
           event.preventDefault();
           return false;
         },
-        children: /* @__PURE__ */ jsx9(
-          IconButton2,
-          {
-            css: [
-              { color: "#b0bac9" },
-              isActive && {
-                color: "var(--primaryMain) !important"
-              }
-            ],
-            children: isActive ? /* @__PURE__ */ jsx9(FilterList2, {}) : /* @__PURE__ */ jsx9(ArrowDropDown2, {})
-          }
-        )
+        isActive
       }
     ),
     /* @__PURE__ */ jsx9(
@@ -872,7 +861,10 @@ function FilterControl() {
           {
             open: true,
             hidden: !anchor,
-            onClose: () => setAnchor(null),
+            onClose: () => {
+              setAnchor(null);
+              onClose == null ? void 0 : onClose();
+            },
             anchorEl: anchor != null ? anchor : document.body,
             css: cssVariables,
             className: cx(classes == null ? void 0 : classes.popover, filterClassNames == null ? void 0 : filterClassNames.popover),
@@ -884,6 +876,24 @@ function FilterControl() {
     )
   ] });
 }
+function DefaultButton(_a) {
+  var _b = _a, { isActive } = _b, props = __objRest(_b, ["isActive"]);
+  const IconButton2 = useTheme((t) => t.components.IconButton);
+  const FilterList2 = useTheme((t) => t.icons.FilterList);
+  const ArrowDropDown2 = useTheme((t) => t.icons.ArrowDropDown);
+  return /* @__PURE__ */ jsx9(
+    IconButton2,
+    __spreadProps(__spreadValues({}, props), {
+      css: [
+        { color: "#b0bac9" },
+        isActive && {
+          color: "var(--primaryMain) !important"
+        }
+      ],
+      children: isActive ? /* @__PURE__ */ jsx9(FilterList2, {}) : /* @__PURE__ */ jsx9(ArrowDropDown2, {})
+    })
+  );
+}
 
 // src/components/autoFocusTextField.tsx
 import { jsx as jsx10 } from "@emotion/react/jsx-runtime";
@@ -1011,6 +1021,83 @@ function useFilter(impl) {
   }, context);
 }
 
+// src/components/combinedFilter.tsx
+import { jsx as jsx11 } from "@emotion/react/jsx-runtime";
+function CombinedFilter(_a) {
+  var _b = _a, {
+    columnIds: inputColumnIds
+  } = _b, props = __objRest(_b, [
+    "columnIds"
+  ]);
+  const table = useTableContext();
+  const columnIds = table.useState((state) => {
+    return inputColumnIds != null ? inputColumnIds : state.activeColumns.filter(
+      (column) => column.filter !== void 0 && !state.visibleColumns.some((c) => c.id === column.id)
+    ).map((column) => column.id);
+  });
+  const isActive = table.useState((state) => {
+    return columnIds.some((columnId) => {
+      const filter = state.filters.get(columnId);
+      const filterValue = state.filterValues.get(columnId);
+      return filter !== void 0 && filterValue !== void 0 && filter.isActive(filterValue);
+    });
+  });
+  useFilter(__spreadProps(__spreadValues({}, props), {
+    id: "combinedFilter",
+    value: isActive,
+    isActive(filterValue) {
+      return filterValue;
+    },
+    test() {
+      return true;
+    },
+    onChange(value) {
+      var _a2;
+      if (value === void 0) {
+        for (const columnId of columnIds) {
+          const impl = table.getState().filters.get(columnId);
+          (_a2 = impl == null ? void 0 : impl.onChange) == null ? void 0 : _a2.call(impl, void 0);
+          if ((impl == null ? void 0 : impl.value) === void 0) {
+            table.update((state) => {
+              state.filterValues.delete(columnId);
+            });
+          }
+        }
+      }
+    }
+  }));
+  return /* @__PURE__ */ jsx11("div", { children: columnIds.map((columnId) => /* @__PURE__ */ jsx11(ColumnContext.Provider, { value: columnId, children: /* @__PURE__ */ jsx11(FilterControl, { component: Filter }) }, columnId)) });
+}
+function Filter(_a) {
+  var _b = _a, { isActive } = _b, props = __objRest(_b, ["isActive"]);
+  const table = useTableContext();
+  const columnId = useColumnContext();
+  const FilterList2 = useTheme((t) => t.icons.FilterList);
+  const label = table.useState((state) => {
+    var _a2, _b2;
+    return (_b2 = (_a2 = state.activeColumns.find((column) => column.id === columnId)) == null ? void 0 : _a2.header) != null ? _b2 : null;
+  });
+  const Button2 = useTheme((t) => t.components.Button);
+  return /* @__PURE__ */ jsx11(
+    Button2,
+    __spreadProps(__spreadValues({}, props), {
+      startIcon: /* @__PURE__ */ jsx11(
+        FilterList2,
+        {
+          css: {
+            color: isActive ? "var(--primaryMain)" : "#b0bac9"
+          }
+        }
+      ),
+      css: {
+        width: "100%",
+        color: isActive ? "var(--primaryMain)" : "var(--color-text)"
+      },
+      children: label
+    })
+  );
+}
+
 // src/components/datePicker.tsx
 import { useDayzed } from "dayzed";
 import {
@@ -1036,7 +1123,7 @@ function defaults(first, ...more) {
 
 // src/components/dateInput.tsx
 import { Fragment, useMemo as useMemo4, useState as useState4 } from "react";
-import { jsx as jsx11 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx12 } from "@emotion/react/jsx-runtime";
 var className = "schummar-table-date-input";
 var defaultDate = new Date(1970, 0, 1);
 var isIncludedType = (type) => type === "day" || type === "month" || type === "year";
@@ -1104,14 +1191,14 @@ function DateInput({
   );
   const parts = format.formatToParts(value != null ? value : defaultDate);
   const isEmpty = !value;
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12(
     "div",
     {
       css: {
         display: "flex",
         alignItems: "baseline"
       },
-      children: parts.map(({ type, value: value2 }, index) => /* @__PURE__ */ jsx11(Fragment, { children: isIncludedType(type) ? /* @__PURE__ */ jsx11(
+      children: parts.map(({ type, value: value2 }, index) => /* @__PURE__ */ jsx12(Fragment, { children: isIncludedType(type) ? /* @__PURE__ */ jsx12(
         "input",
         {
           className,
@@ -1146,20 +1233,20 @@ function DateInput({
           onFocus: (event) => event.target.select(),
           onBlur: commit
         }
-      ) : type === "literal" ? /* @__PURE__ */ jsx11("span", { children: value2 }) : null }, index))
+      ) : type === "literal" ? /* @__PURE__ */ jsx12("span", { children: value2 }) : null }, index))
     }
   );
 }
 
 // src/components/text.tsx
-import { Fragment as Fragment2, jsx as jsx12 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx13 } from "@emotion/react/jsx-runtime";
 function Text({ id }) {
   const text = useTheme((t) => t.text[id]);
-  return /* @__PURE__ */ jsx12(Fragment2, { children: text });
+  return /* @__PURE__ */ jsx13(Fragment2, { children: text });
 }
 
 // src/components/datePicker.tsx
-import { Fragment as Fragment4, jsx as jsx13, jsxs as jsxs8 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx14, jsxs as jsxs8 } from "@emotion/react/jsx-runtime";
 var DatePickerContext = createContext4({});
 function DatePickerProvider(_a) {
   var _b = _a, {
@@ -1168,7 +1255,7 @@ function DatePickerProvider(_a) {
     "children"
   ]);
   const value = useMemo5(() => props, [JSON.stringify(props)]);
-  return /* @__PURE__ */ jsx13(DatePickerContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx14(DatePickerContext.Provider, { value, children });
 }
 var weekDays = [0, 1, 2, 3, 4, 5, 6];
 var startOfDay = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate());
@@ -1246,12 +1333,12 @@ var getCalendarWeek = (date) => {
   return weekOfYear;
 };
 var commonQuickOptions = {
-  today: { label: /* @__PURE__ */ jsx13(Text, { id: "today" }), value: today },
-  thisWeek: { label: /* @__PURE__ */ jsx13(Text, { id: "thisWeek" }), value: (props) => thisWeek(0, props.firstDayOfWeek) },
-  thisMonth: { label: /* @__PURE__ */ jsx13(Text, { id: "thisMonth" }), value: () => thisMonth() },
-  thisYear: { label: /* @__PURE__ */ jsx13(Text, { id: "thisYear" }), value: () => thisYear() },
-  lastSevenDays: { label: /* @__PURE__ */ jsx13(Text, { id: "lastSevenDays" }), value: () => lastDays(7) },
-  lastThirtyDays: { label: /* @__PURE__ */ jsx13(Text, { id: "lastThirtyDays" }), value: () => lastDays(30) }
+  today: { label: /* @__PURE__ */ jsx14(Text, { id: "today" }), value: today },
+  thisWeek: { label: /* @__PURE__ */ jsx14(Text, { id: "thisWeek" }), value: (props) => thisWeek(0, props.firstDayOfWeek) },
+  thisMonth: { label: /* @__PURE__ */ jsx14(Text, { id: "thisMonth" }), value: () => thisMonth() },
+  thisYear: { label: /* @__PURE__ */ jsx14(Text, { id: "thisYear" }), value: () => thisYear() },
+  lastSevenDays: { label: /* @__PURE__ */ jsx14(Text, { id: "lastSevenDays" }), value: () => lastDays(7) },
+  lastThirtyDays: { label: /* @__PURE__ */ jsx14(Text, { id: "lastThirtyDays" }), value: () => lastDays(30) }
 };
 function dateIntersect(a, b) {
   if (a instanceof Date) {
@@ -1380,7 +1467,7 @@ function DatePicker(props) {
   const max = dirty ? dirty.max : value instanceof Date ? value : value == null ? void 0 : value.max;
   const resolvedQuickOptions = [
     ...quickOptions,
-    ...noReset ? [] : [{ label: /* @__PURE__ */ jsx13(Text, { id: "reset" }), value: null }]
+    ...noReset ? [] : [{ label: /* @__PURE__ */ jsx14(Text, { id: "reset" }), value: null }]
   ].map((option, index) => {
     if (option instanceof Function) {
       return option((value3) => {
@@ -1389,7 +1476,7 @@ function DatePicker(props) {
       });
     }
     const { label, value: value2 } = typeof option === "string" ? commonQuickOptions[option] : option;
-    return /* @__PURE__ */ jsx13(
+    return /* @__PURE__ */ jsx14(
       Button2,
       {
         variant: "text",
@@ -1486,7 +1573,7 @@ function DatePicker(props) {
               gap: "var(--spacing)"
             },
             children: [
-              /* @__PURE__ */ jsx13(
+              /* @__PURE__ */ jsx14(
                 DateInput,
                 {
                   value: min != null ? min : null,
@@ -1496,7 +1583,7 @@ function DatePicker(props) {
               ),
               rangeSelect && /* @__PURE__ */ jsxs8(Fragment4, { children: [
                 " - ",
-                /* @__PURE__ */ jsx13(
+                /* @__PURE__ */ jsx14(
                   DateInput,
                   {
                     value: max != null ? max : null,
@@ -1520,13 +1607,13 @@ function DatePicker(props) {
                 alignItems: "center"
               },
               children: [
-                /* @__PURE__ */ jsx13(IconButton2, __spreadProps(__spreadValues({ type: "button" }, getBackProps({ calendars })), { children: /* @__PURE__ */ jsx13(ChevronRight2, { css: { transform: "rotate3d(0, 0, 1, 180deg)" } }) })),
+                /* @__PURE__ */ jsx14(IconButton2, __spreadProps(__spreadValues({ type: "button" }, getBackProps({ calendars })), { children: /* @__PURE__ */ jsx14(ChevronRight2, { css: { transform: "rotate3d(0, 0, 1, 180deg)" } }) })),
                 /* @__PURE__ */ jsxs8("div", { css: { display: "flex" }, children: [
                   formatMonth(month),
                   " ",
                   formatYear(year)
                 ] }),
-                /* @__PURE__ */ jsx13(IconButton2, __spreadProps(__spreadValues({ type: "button" }, getForwardProps({ calendars })), { children: /* @__PURE__ */ jsx13(ChevronRight2, {}) }))
+                /* @__PURE__ */ jsx14(IconButton2, __spreadProps(__spreadValues({ type: "button" }, getForwardProps({ calendars })), { children: /* @__PURE__ */ jsx14(ChevronRight2, {}) }))
               ]
             }
           ),
@@ -1539,7 +1626,7 @@ function DatePicker(props) {
                 gridTemplateColumns: "repeat(8, max-content)"
               },
               children: [
-                showCalendarWeek ? /* @__PURE__ */ jsx13(
+                showCalendarWeek ? /* @__PURE__ */ jsx14(
                   "div",
                   {
                     css: {
@@ -1547,10 +1634,10 @@ function DatePicker(props) {
                       padding: 10,
                       borderRight: "1px solid var(--date-picker-separator, var(--table-border, #bdbdbd))"
                     },
-                    children: /* @__PURE__ */ jsx13(Text, { id: "calendarWeek" })
+                    children: /* @__PURE__ */ jsx14(Text, { id: "calendarWeek" })
                   }
-                ) : /* @__PURE__ */ jsx13("div", {}),
-                weekDays.map((_v, weekDay) => /* @__PURE__ */ jsx13(
+                ) : /* @__PURE__ */ jsx14("div", {}),
+                weekDays.map((_v, weekDay) => /* @__PURE__ */ jsx14(
                   "div",
                   {
                     css: {
@@ -1566,7 +1653,7 @@ function DatePicker(props) {
                   const weekEnd = week[6];
                   const weekDisabled = !rangeSelect || minDate && weekEnd.date < minDate || maxDate && weekStart.date > maxDate;
                   return /* @__PURE__ */ jsxs8(Fragment3, { children: [
-                    showCalendarWeek ? /* @__PURE__ */ jsx13(
+                    showCalendarWeek ? /* @__PURE__ */ jsx14(
                       "button",
                       {
                         type: "button",
@@ -1591,10 +1678,10 @@ function DatePicker(props) {
                         onPointerOut: () => !weekDisabled && setHovered(void 0),
                         children: getCalendarWeek(weekEnd.date)
                       }
-                    ) : /* @__PURE__ */ jsx13("div", {}),
+                    ) : /* @__PURE__ */ jsx14("div", {}),
                     week.map((dateObject, dayIndex) => {
                       if (!dateObject) {
-                        return /* @__PURE__ */ jsx13("div", {}, dayIndex);
+                        return /* @__PURE__ */ jsx14("div", {}, dayIndex);
                       }
                       const { prevMonth, nextMonth, date } = dateObject;
                       const today2 = startOfDay(date).getTime() === now.getTime();
@@ -1605,7 +1692,7 @@ function DatePicker(props) {
                         min <= hovered.min ? { min, max: hovered.min } : { min: hovered.max, max: min }
                       ));
                       const blocked = blockedRanges.some((range) => dateIntersect(date, range));
-                      return /* @__PURE__ */ jsx13(
+                      return /* @__PURE__ */ jsx14(
                         "button",
                         __spreadProps(__spreadValues({
                           type: "button",
@@ -1641,7 +1728,7 @@ function DatePicker(props) {
             }
           )
         ] }, `${month}${year}`)),
-        /* @__PURE__ */ jsx13(
+        /* @__PURE__ */ jsx14(
           "div",
           {
             css: {
@@ -1659,7 +1746,7 @@ function DatePicker(props) {
 }
 
 // src/components/dateFilter.tsx
-import { jsx as jsx14 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx15 } from "@emotion/react/jsx-runtime";
 function convertDate(x) {
   if (x instanceof Date) return x;
   if (typeof x === "number" || typeof x === "string") return new Date(x);
@@ -1711,14 +1798,14 @@ function DateFilter(_a) {
       return dateIntersect(filterValue, value2);
     }
   }));
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     "div",
     {
       css: {
         padding: "calc(var(--spacing) * 2)",
         display: "grid"
       },
-      children: /* @__PURE__ */ jsx14(
+      children: /* @__PURE__ */ jsx15(
         DatePicker,
         {
           rangeSelect: !singleSelect,
@@ -1739,7 +1826,7 @@ function DateFilter(_a) {
 
 // src/components/numberField.tsx
 import { useState as useState6 } from "react";
-import { jsx as jsx15 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx16 } from "@emotion/react/jsx-runtime";
 var Pattern = /^-?\d*(?:[.,]\d*)?$/;
 var printNumber = (value, locale) => {
   if (value === null) {
@@ -1765,7 +1852,7 @@ function NumberField(_a) {
   const locale = useTheme((t) => t.locale);
   const TextField2 = useTheme((t) => t.components.TextField);
   const [value = printNumber(commitedValue, locale), setValue] = useState6();
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16(
     TextField2,
     __spreadProps(__spreadValues({
       value,
@@ -1790,7 +1877,7 @@ function NumberField(_a) {
 }
 
 // src/components/rangeFilter.tsx
-import { jsx as jsx16, jsxs as jsxs9 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs9 } from "@emotion/react/jsx-runtime";
 function RangeFilter(_a) {
   var _b = _a, {
     min,
@@ -1844,7 +1931,7 @@ function RangeFilter(_a) {
       return value2 !== null && value2 >= min2 && value2 <= max2;
     }
   }));
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     "div",
     {
       css: {
@@ -1864,12 +1951,12 @@ function RangeFilter(_a) {
             }
           },
           children: [
-            /* @__PURE__ */ jsx16(
+            /* @__PURE__ */ jsx17(
               NumberField,
               {
                 value: value == null ? void 0 : value[0],
                 onChange: (newMin) => onChange(normalize(newMin, value == null ? void 0 : value[1], "min", { min, max })),
-                startIcon: /* @__PURE__ */ jsx16("span", { css: { margin: "0 calc(var(--spacing) * 2)" }, children: rangeMinText }),
+                startIcon: /* @__PURE__ */ jsx17("span", { css: { margin: "0 calc(var(--spacing) * 2)" }, children: rangeMinText }),
                 placeholder: String(minValue != null ? minValue : ""),
                 css: {
                   alignItems: "baseline"
@@ -1877,12 +1964,12 @@ function RangeFilter(_a) {
               }
             ),
             "-",
-            /* @__PURE__ */ jsx16(
+            /* @__PURE__ */ jsx17(
               NumberField,
               {
                 value: value == null ? void 0 : value[1],
                 onChange: (newMax) => onChange(normalize(value == null ? void 0 : value[0], newMax, "max", { min, max })),
-                startIcon: /* @__PURE__ */ jsx16("span", { css: { margin: "0 calc(var(--spacing) * 2)" }, children: rangeMaxText }),
+                startIcon: /* @__PURE__ */ jsx17("span", { css: { margin: "0 calc(var(--spacing) * 2)" }, children: rangeMaxText }),
                 placeholder: String(maxValue != null ? maxValue : ""),
                 css: {
                   alignItems: "baseline"
@@ -1915,7 +2002,7 @@ function clamp(value, min = Number.NEGATIVE_INFINITY, max = Number.POSITIVE_INFI
 import { useEffect as useEffect4, useMemo as useMemo7, useState as useState8 } from "react";
 
 // src/components/formControlLabel.tsx
-import { jsx as jsx17, jsxs as jsxs10 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs10 } from "@emotion/react/jsx-runtime";
 function FormControlLabel({
   control,
   label,
@@ -1938,7 +2025,7 @@ function FormControlLabel({
       ],
       children: [
         control,
-        /* @__PURE__ */ jsx17("span", { css: { marginLeft: "var(--spacing)" }, children: label })
+        /* @__PURE__ */ jsx18("span", { css: { marginLeft: "var(--spacing)" }, children: label })
       ]
     }
   );
@@ -1986,7 +2073,7 @@ function throttle(function_, ms) {
 }
 
 // src/components/virtualList.tsx
-import { jsx as jsx18, jsxs as jsxs11 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs11 } from "@emotion/react/jsx-runtime";
 function VirtualList(_a) {
   var _b = _a, {
     virtual = true,
@@ -2016,7 +2103,7 @@ function VirtualList(_a) {
     };
   }, [update, virtual, throttleScroll]);
   if (!virtual) {
-    return /* @__PURE__ */ jsx18(
+    return /* @__PURE__ */ jsx19(
       "div",
       __spreadProps(__spreadValues({}, props), {
         css: {
@@ -2061,9 +2148,9 @@ function VirtualList(_a) {
         display: "grid"
       },
       children: [
-        /* @__PURE__ */ jsx18("div", { "data-virtual-before": true, style: { height: before } }),
+        /* @__PURE__ */ jsx19("div", { "data-virtual-before": true, style: { height: before } }),
         items.slice(from, to).map((item, index) => children(item, index + from)),
-        /* @__PURE__ */ jsx18("div", { "data-virtual-after": true, style: { height: after } })
+        /* @__PURE__ */ jsx19("div", { "data-virtual-after": true, style: { height: after } })
       ]
     })
   );
@@ -2077,7 +2164,7 @@ function averageItemHeight(container) {
 }
 
 // src/components/selectFilter.tsx
-import { jsx as jsx19, jsxs as jsxs12 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs12 } from "@emotion/react/jsx-runtime";
 function toggle(set, value, singleSelect) {
   const newSet = new Set(singleSelect ? [] : set);
   if (set.has(value)) {
@@ -2151,19 +2238,20 @@ function SelectFilter(_a) {
       css: {
         padding: "calc(var(--spacing) * 2)",
         display: "grid",
+        gridTemplateColumns: "minmax(0, 1fr)",
         gap: "var(--spacing)"
       },
       children: [
-        !hideSearchField && /* @__PURE__ */ jsx19(
+        !hideSearchField && /* @__PURE__ */ jsx20(
           AutoFocusTextField,
           {
             value: query,
             onChange: (event) => setQuery(event.target.value),
-            endIcon: /* @__PURE__ */ jsx19(IconButton2, { onClick: () => setQuery(""), children: !query ? /* @__PURE__ */ jsx19(Search2, {}) : /* @__PURE__ */ jsx19(Clear2, {}) }),
+            endIcon: /* @__PURE__ */ jsx20(IconButton2, { onClick: () => setQuery(""), children: !query ? /* @__PURE__ */ jsx20(Search2, {}) : /* @__PURE__ */ jsx20(Clear2, {}) }),
             css: { marginBottom: "var(--spacing)" }
           }
         ),
-        !hideResetButton && /* @__PURE__ */ jsx19(
+        !hideResetButton && /* @__PURE__ */ jsx20(
           Button2,
           {
             disabled: value.size === 0,
@@ -2178,18 +2266,22 @@ function SelectFilter(_a) {
             children: deselectAll
           }
         ),
-        /* @__PURE__ */ jsx19(
+        /* @__PURE__ */ jsx20(
           VirtualList,
           {
             items: ordered,
             css: {
               width: "20em",
-              maxHeight: "20em"
+              maxWidth: "100%",
+              maxHeight: "min(20em, 50vh)",
+              overflow: "hidden auto",
+              display: "grid",
+              gridTemplateColumns: "minmax(0, 1fr)"
             },
-            children: (option, index) => /* @__PURE__ */ jsx19(
+            children: (option, index) => /* @__PURE__ */ jsx20(
               FormControlLabel,
               {
-                control: /* @__PURE__ */ jsx19(
+                control: /* @__PURE__ */ jsx20(
                   Checkbox2,
                   {
                     checked: value.has(option),
@@ -2202,14 +2294,14 @@ function SelectFilter(_a) {
             )
           }
         ),
-        ordered.length === 0 && /* @__PURE__ */ jsx19("span", { css: { textAlign: "center" }, children: noResults })
+        ordered.length === 0 && /* @__PURE__ */ jsx20("span", { css: { textAlign: "center" }, children: noResults })
       ]
     }
   );
 }
 
 // src/components/table.tsx
-import { memo as memo3, useEffect as useEffect14, useLayoutEffect as useLayoutEffect6, useState as useState14 } from "react";
+import { memo as memo3, useEffect as useEffect15, useLayoutEffect as useLayoutEffect6, useState as useState14 } from "react";
 
 // src/internalState/tableStateStorage.ts
 import { useEffect as useEffect5, useState as useState9 } from "react";
@@ -2418,8 +2510,8 @@ function useTableStateStorage(table) {
 }
 
 // src/internalState/useTableState.ts
-import { castDraft as castDraft3 } from "immer";
-import { useEffect as useEffect11, useMemo as useMemo9, useState as useState10 } from "react";
+import { castDraft as castDraft4 } from "immer";
+import { useEffect as useEffect12, useMemo as useMemo9, useState as useState10 } from "react";
 
 // src/internalState/calcItems.ts
 import { castDraft as castDraft2 } from "immer";
@@ -2555,104 +2647,149 @@ function defaultSerializer(x) {
   return (_a = JSON.stringify(x)) != null ? _a : "";
 }
 
+// src/misc/overrides.ts
+function overrides(first, ...overrides2) {
+  return overrides2.reduce(
+    (result, source) => {
+      for (const [key, value] of Object.entries(source != null ? source : {})) {
+        if (value !== void 0) {
+          result[key] = value;
+        }
+      }
+      return result;
+    },
+    __spreadValues({}, first)
+  );
+}
+
 // src/internalState/calcProps.ts
-var noopParentId = () => void 0;
+var defaultProps = {
+  id: () => "",
+  columns: [],
+  enableSelection: true,
+  selectSyncChildren: true,
+  stickyHeader: true,
+  stickyFooter: true,
+  enableColumnSelection: true,
+  enableColumnResize: true,
+  enableColumnReorder: true,
+  displaySizeOverrides: {
+    mobile: {
+      enableSelection: false,
+      enableColumnSelection: false,
+      enableExport: false,
+      enableColumnResize: false,
+      enableColumnReorder: false
+    }
+  }
+};
 function calcProps(props) {
   const cache = useTableMemo();
-  return useMemo8(() => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i;
-    let id;
-    if (props.id instanceof Function || Array.isArray(props.id)) {
-      id = cache("id", props.id);
-    } else {
-      id = cache("id", [(item) => item[props.id], props.id]);
-    }
-    let parentId;
-    if (props.parentId instanceof Function || Array.isArray(props.parentId)) {
-      parentId = cache("parentId", props.parentId);
-    } else if (props.parentId !== void 0) {
-      parentId = cache("parentId", [
-        (item) => item[props.parentId],
-        props.parentId
-      ]);
-    } else {
-      parentId = noopParentId;
-    }
-    const columnProps = props.columnProps && cache("columnProps", props.columnProps);
-    let inputColumns;
-    if (props.columns instanceof Function) {
-      inputColumns = props.columns((value, column) => __spreadProps(__spreadValues({}, column), { value }));
-    } else {
-      inputColumns = props.columns.map((column) => __spreadProps(__spreadValues({}, column), { dependecies: void 0 }));
-    }
-    const globalDefaults = props.defaultColumnProps;
-    const mapColumn = ({
-      id: _id,
-      header,
-      exportHeader,
-      footer,
-      value,
-      renderCell,
-      exportCell,
-      sortBy,
+  return useMemo8(
+    () => overrides(defaultProps, calc(props, cache)),
+    [props]
+  );
+}
+function calc(props, cache) {
+  var _a;
+  let id;
+  if (props.id instanceof Function || Array.isArray(props.id)) {
+    id = cache("id", props.id);
+  } else if (props.id !== void 0) {
+    id = cache("id", [(item) => item[props.id], props.id]);
+  }
+  let parentId;
+  if (props.parentId instanceof Function || Array.isArray(props.parentId)) {
+    parentId = cache("parentId", props.parentId);
+  } else if (props.parentId !== void 0) {
+    parentId = cache("parentId", [
+      (item) => item[props.parentId],
+      props.parentId
+    ]);
+  }
+  const columnProps = props.columnProps && cache("columnProps", props.columnProps);
+  let inputColumns;
+  if (props.columns instanceof Function) {
+    inputColumns = props.columns((value, column) => __spreadProps(__spreadValues({}, column), { value }));
+  } else if (props.columns !== void 0) {
+    inputColumns = props.columns.map((column) => __spreadProps(__spreadValues({}, column), { dependecies: void 0 }));
+  }
+  const globalDefaults = props.defaultColumnProps;
+  const mapColumn = ({
+    id: _id,
+    header,
+    exportHeader,
+    footer,
+    value,
+    renderCell,
+    exportCell,
+    sortBy,
+    disableSort,
+    hidden,
+    classes,
+    styles,
+    filter,
+    width,
+    displaySize
+  }, index) => {
+    var _a2, _b, _c, _d, _e, _f;
+    const id2 = _id != null ? _id : index;
+    const cacheKey = typeof id2 === "string" ? `s${id2}` : `n${id2}`;
+    const defaults2 = __spreadValues(__spreadValues({}, globalDefaults), columnProps == null ? void 0 : columnProps(id2));
+    return {
+      id: id2,
+      header: (_a2 = header != null ? header : defaults2 == null ? void 0 : defaults2.header) != null ? _a2 : null,
+      exportHeader: (_b = exportHeader != null ? exportHeader : defaults2 == null ? void 0 : defaults2.exportHeader) != null ? _b : id2,
+      footer: (_c = footer != null ? footer : defaults2 == null ? void 0 : defaults2.footer) != null ? _c : null,
+      value: cache(`columns.${cacheKey}.value`, value),
+      renderCell: cache(
+        `columns.${cacheKey}.renderCell`,
+        (_d = renderCell != null ? renderCell : defaults2 == null ? void 0 : defaults2.renderCell) != null ? _d : asString
+      ),
+      exportCell: (_e = exportCell != null ? exportCell : defaults2 == null ? void 0 : defaults2.exportCell) != null ? _e : defaultSerializer,
+      sortBy: ((_f = sortBy != null ? sortBy : defaults2 == null ? void 0 : defaults2.sortBy) != null ? _f : [
+        (v) => typeof v === "number" || v instanceof Date ? v : v === null || v === void 0 ? "" : String(v)
+      ]).map((function_, i) => cache(`columns.${cacheKey}.sortBy.${i}`, function_)),
       disableSort,
-      hidden,
-      classes,
-      styles,
-      filter,
-      width
-    }, index) => {
-      var _a2, _b2, _c2, _d2, _e2, _f2;
-      const id2 = _id != null ? _id : index;
-      const cacheKey = typeof id2 === "string" ? `s${id2}` : `n${id2}`;
-      const defaults2 = __spreadValues(__spreadValues({}, globalDefaults), columnProps == null ? void 0 : columnProps(id2));
-      return {
-        id: id2,
-        header: (_a2 = header != null ? header : defaults2 == null ? void 0 : defaults2.header) != null ? _a2 : null,
-        exportHeader: (_b2 = exportHeader != null ? exportHeader : defaults2 == null ? void 0 : defaults2.exportHeader) != null ? _b2 : id2,
-        footer: (_c2 = footer != null ? footer : defaults2 == null ? void 0 : defaults2.footer) != null ? _c2 : null,
-        value: cache(`columns.${cacheKey}.value`, value),
-        renderCell: cache(
-          `columns.${cacheKey}.renderCell`,
-          (_d2 = renderCell != null ? renderCell : defaults2 == null ? void 0 : defaults2.renderCell) != null ? _d2 : asString
-        ),
-        exportCell: (_e2 = exportCell != null ? exportCell : defaults2 == null ? void 0 : defaults2.exportCell) != null ? _e2 : defaultSerializer,
-        sortBy: ((_f2 = sortBy != null ? sortBy : defaults2 == null ? void 0 : defaults2.sortBy) != null ? _f2 : [
-          (v) => typeof v === "number" || v instanceof Date ? v : v === null || v === void 0 ? "" : String(v)
-        ]).map((function_, i) => cache(`columns.${cacheKey}.sortBy.${i}`, function_)),
-        disableSort,
-        hidden: hidden != null ? hidden : defaults2 == null ? void 0 : defaults2.hidden,
-        classes: classes != null ? classes : defaults2 == null ? void 0 : defaults2.classes,
-        styles: styles != null ? styles : defaults2 == null ? void 0 : defaults2.styles,
-        filter: filter != null ? filter : defaults2 == null ? void 0 : defaults2.filter,
-        width: width != null ? width : defaults2 == null ? void 0 : defaults2.width
-      };
+      hidden: hidden != null ? hidden : defaults2 == null ? void 0 : defaults2.hidden,
+      classes: classes != null ? classes : defaults2 == null ? void 0 : defaults2.classes,
+      styles: styles != null ? styles : defaults2 == null ? void 0 : defaults2.styles,
+      filter: filter != null ? filter : defaults2 == null ? void 0 : defaults2.filter,
+      width: width != null ? width : defaults2 == null ? void 0 : defaults2.width,
+      displaySize: Array.isArray(displaySize) ? displaySize : displaySize ? [displaySize] : void 0
     };
-    const columns = inputColumns.map(mapColumn);
-    const wrapRow = props.wrapRow && cache("wrapRow", props.wrapRow);
-    const wrapCell = props.wrapCell && cache("wrapCell", props.wrapCell);
-    const rowAction = props.rowAction instanceof Function || Array.isArray(props.rowAction) ? cache("rowAction", props.rowAction) : props.rowAction;
-    const rowDetails = props.rowDetails instanceof Function || Array.isArray(props.rowDetails) ? cache("rowDetails", props.rowDetails) : props.rowDetails;
-    return __spreadProps(__spreadValues({}, props), {
-      id,
-      parentId,
-      columns,
-      columnProps,
-      wrapRow,
-      wrapCell,
-      rowAction,
-      rowDetails,
-      enableSelection: (_a = props.enableSelection) != null ? _a : true,
-      selectSyncChildren: (_b = props.selectSyncChildren) != null ? _b : true,
-      stickyHeader: (_c = props.stickyHeader) != null ? _c : true,
-      stickyFooter: (_d = props.stickyFooter) != null ? _d : true,
-      enableExport: (_e = props.enableExport) != null ? _e : false,
-      enableColumnSelection: (_f = props.enableColumnSelection) != null ? _f : true,
-      enableClearFiltersButton: (_g = props.enableClearFiltersButton) != null ? _g : false,
-      enableColumnResize: (_h = props.enableColumnResize) != null ? _h : true,
-      enableColumnReorder: (_i = props.enableColumnReorder) != null ? _i : true
-    });
-  }, [props]);
+  };
+  const columns = inputColumns == null ? void 0 : inputColumns.map(mapColumn);
+  const wrapRow = props.wrapRow && cache("wrapRow", props.wrapRow);
+  const wrapCell = props.wrapCell && cache("wrapCell", props.wrapCell);
+  const rowAction = props.rowAction instanceof Function || Array.isArray(props.rowAction) ? cache("rowAction", props.rowAction) : props.rowAction;
+  const rowDetails = props.rowDetails instanceof Function || Array.isArray(props.rowDetails) ? cache("rowDetails", props.rowDetails) : props.rowDetails;
+  const displaySizeOverrides = props.displaySizeOverrides && Object.fromEntries(
+    Object.entries((_a = props.displaySizeOverrides) != null ? _a : {}).map(([size, overrides2]) => [
+      size,
+      overrides2 && calc(overrides2, cache)
+    ])
+  );
+  return __spreadProps(__spreadValues({}, props), {
+    id,
+    parentId,
+    columns,
+    columnProps,
+    wrapRow,
+    wrapCell,
+    rowAction,
+    rowDetails,
+    enableSelection: props.enableSelection,
+    selectSyncChildren: props.selectSyncChildren,
+    stickyHeader: props.stickyHeader,
+    stickyFooter: props.stickyFooter,
+    enableColumnSelection: props.enableColumnSelection,
+    enableExport: props.enableExport,
+    enableClearFiltersButton: props.enableClearFiltersButton,
+    enableColumnResize: props.enableColumnResize,
+    enableColumnReorder: props.enableColumnReorder,
+    displaySizeOverrides
+  });
 }
 
 // src/internalState/cleanupState.ts
@@ -2722,8 +2859,14 @@ import { useEffect as useEffect8 } from "react";
 function filterColumns(state) {
   useEffect8(
     () => state.addReaction(
-      (state2) => [state2.props.columns, state2.hiddenColumns, state2.columnOrder],
-      ([columns, hiddenColumns, columnOrder], draft) => {
+      (state2) => [
+        state2.props.columns,
+        state2.hiddenColumns,
+        state2.columnOrder,
+        state2.displaySize,
+        state2.displaySizePx
+      ],
+      ([columns, hiddenColumns, columnOrder, displaySize], draft) => {
         draft.activeColumns = orderBy(
           columns.filter((column) => {
             var _a;
@@ -2731,6 +2874,9 @@ function filterColumns(state) {
           }),
           [(column) => columnOrder.indexOf(column.id)]
         );
+        draft.visibleColumns = draft.activeColumns.filter(
+          (column) => displaySize === void 0 || column.displaySize === void 0 || column.displaySize.includes(displaySize)
+        );
       },
       { runNow: true }
     ),
@@ -2812,6 +2958,53 @@ function syncSelections(table) {
   );
 }
 
+// src/internalState/watchDisplaySize.ts
+import { castDraft as castDraft3 } from "immer";
+import { useEffect as useEffect11 } from "react";
+var DEFAULT_DISPLAY_SIZES = {
+  mobile: 400,
+  desktop: Infinity
+};
+function watchDisplaySize(state) {
+  useEffect11(
+    () => state.addReaction(
+      (state2) => ({
+        displaySizePx: state2.displaySizePx,
+        displaySize: state2.props.displaySize
+      }),
+      ({ displaySizePx, displaySize = DEFAULT_DISPLAY_SIZES }, draft) => {
+        if (displaySizePx === void 0) {
+          return;
+        }
+        if (typeof displaySize === "object") {
+          const entry = Object.entries(displaySize).find(
+            ([, maxWidth]) => maxWidth >= displaySizePx
+          );
+          draft.displaySize = entry == null ? void 0 : entry[0];
+        } else {
+          draft.displaySize = displaySize;
+        }
+      }
+    ),
+    [state]
+  );
+  useEffect11(
+    () => state.addReaction(
+      (state2) => ({
+        props: state2.normalizedProps,
+        displaySize: state2.displaySize
+      }),
+      ({ props, displaySize }, draft) => {
+        var _a;
+        draft.props = castDraft3(
+          overrides(props, displaySize ? (_a = props.displaySizeOverrides) == null ? void 0 : _a[displaySize] : void 0)
+        );
+      }
+    ),
+    [state]
+  );
+}
+
 // src/internalState/useTableState.ts
 function useTableState(_props) {
   const [key, setKey] = useState10({});
@@ -2837,6 +3030,7 @@ function useTableState(_props) {
     () => {
       var _a, _b, _c, _d;
       return new Store({
+        normalizedProps: props,
         props,
         key,
         sort: (_a = props.defaultSort) != null ? _a : [],
@@ -2850,11 +3044,14 @@ function useTableState(_props) {
         columnOrder: props.columns.map((column) => column.id),
         columnStyleOverride: /* @__PURE__ */ new Map(),
         activeColumns: [],
+        visibleColumns: [],
         items: [],
         itemsById: /* @__PURE__ */ new Map(),
         activeItems: [],
         activeItemsById: /* @__PURE__ */ new Map(),
-        lastSelectedId: void 0
+        lastSelectedId: void 0,
+        displaySizePx: void 0,
+        displaySize: void 0
       });
     },
     [key]
@@ -2864,9 +3061,10 @@ function useTableState(_props) {
   normalizeExpanded(state);
   syncSelections(state);
   cleanupState(state);
-  useEffect11(() => {
+  watchDisplaySize(state);
+  useEffect12(() => {
     state.update((state2) => {
-      state2.props = castDraft3(props);
+      state2.normalizedProps = castDraft4(props);
       if (props.sort) state2.sort = props.sort;
       if (props.selection) state2.selection = props.selection;
       if (props.expanded) state2.expanded = props.expanded;
@@ -2883,12 +3081,12 @@ function useTableState(_props) {
 }
 
 // src/components/clearFiltersButton.tsx
-import { jsx as jsx20 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx21 } from "@emotion/react/jsx-runtime";
 function ClearFiltersButton() {
   const Button2 = useTheme((t) => t.components.Button);
   const textClearFilters = useTheme((t) => t.text.clearFilters);
   const table = useTableContext();
-  return /* @__PURE__ */ jsx20("div", { css: defaultClasses.clearFiltersButton, children: /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21("div", { css: defaultClasses.clearFiltersButton, children: /* @__PURE__ */ jsx21(
     Button2,
     {
       variant: "outlined",
@@ -2907,7 +3105,7 @@ function ClearFiltersButton() {
 }
 
 // src/components/columnFooter.tsx
-import { jsx as jsx21 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx22 } from "@emotion/react/jsx-runtime";
 function ColumnFooter() {
   const table = useTableContext();
   const columnId = useColumnContext();
@@ -2939,7 +3137,7 @@ function ColumnFooter() {
     const column = state.activeColumns.find((column2) => column2.id === columnId);
     return column == null ? void 0 : column.footer;
   });
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     "div",
     {
       className: cx(classes, columnClasses),
@@ -2957,11 +3155,11 @@ function ColumnFooter() {
 }
 
 // src/components/columnHeader.tsx
-import { castDraft as castDraft4 } from "immer";
-import { useEffect as useEffect12, useRef as useRef4 } from "react";
+import { castDraft as castDraft5 } from "immer";
+import { useEffect as useEffect13, useRef as useRef4 } from "react";
 
 // src/components/resizeHandle.tsx
-import { jsx as jsx22 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx23 } from "@emotion/react/jsx-runtime";
 function ResizeHandle() {
   const table = useTableContext();
   const columnId = useColumnContext();
@@ -2995,7 +3193,10 @@ function ResizeHandle() {
       }
     });
   }
-  return /* @__PURE__ */ jsx22(
+  if (!enabled) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx23(
     ResizeHandleView,
     {
       enabled,
@@ -3020,7 +3221,7 @@ function ResizeHandleView(_a) {
     var _a2;
     return (_a2 = theme.styles) == null ? void 0 : _a2.columnDivider;
   });
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx23(
     "div",
     __spreadValues({
       className: className2,
@@ -3028,7 +3229,7 @@ function ResizeHandleView(_a) {
         {
           alignSelf: "stretch",
           padding: "0 5px",
-          cursor: enabled ? "col-resize" : "initial",
+          cursor: enabled === true ? "col-resize" : "initial",
           display: "flex",
           alignItems: "center",
           "&:after": {
@@ -3037,6 +3238,9 @@ function ResizeHandleView(_a) {
             height: "1.5em",
             background: "#c9cfda",
             transition: "transform 300ms"
+          },
+          "@media (pointer: coarse)": {
+            pointerEvents: "none"
           }
         },
         styles
@@ -3046,7 +3250,7 @@ function ResizeHandleView(_a) {
 }
 
 // src/components/sortComponent.tsx
-import { jsx as jsx23, jsxs as jsxs13 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs13 } from "@emotion/react/jsx-runtime";
 function SortComponent({ children }) {
   const table = useTableContext();
   const columnId = useColumnContext();
@@ -3103,8 +3307,8 @@ function SortComponent({ children }) {
       onClick: (event) => toggle2(event),
       onContextMenu: (event) => toggle2(event, true),
       children: [
-        /* @__PURE__ */ jsx23("div", { children }),
-        /* @__PURE__ */ jsx23(Badge2, { badgeContent: sortDisabled ? 0 : index, children: /* @__PURE__ */ jsx23(
+        /* @__PURE__ */ jsx24("div", { children }),
+        /* @__PURE__ */ jsx24(Badge2, { badgeContent: sortDisabled ? 0 : index, children: /* @__PURE__ */ jsx24(
           "span",
           {
             css: [
@@ -3112,7 +3316,7 @@ function SortComponent({ children }) {
               !direction && { opacity: 0 },
               direction === "desc" && { transform: "rotate3d(0, 0, 1, 180deg)" }
             ],
-            children: /* @__PURE__ */ jsx23(ArrowUpward2, {})
+            children: /* @__PURE__ */ jsx24(ArrowUpward2, {})
           }
         ) })
       ]
@@ -3121,7 +3325,7 @@ function SortComponent({ children }) {
 }
 
 // src/components/columnHeader.tsx
-import { jsx as jsx24, jsxs as jsxs14 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs14 } from "@emotion/react/jsx-runtime";
 var ColumnHeaderContext = new StoreScope({
   items: /* @__PURE__ */ new Map()
 });
@@ -3154,11 +3358,11 @@ function ColumnHeader() {
   const store = ColumnHeaderContext.useStore();
   const draggingStart = useRef4();
   const clone = useRef4();
-  useEffect12(() => {
+  useEffect13(() => {
     const div = ref.current;
     if (!div) return;
     store.update((state) => {
-      state.items.set(columnId, castDraft4(div));
+      state.items.set(columnId, castDraft5(div));
     });
     return () => {
       store.update((state) => {
@@ -3284,10 +3488,10 @@ function ColumnHeader() {
       onPointerMove: enabled ? onPointerMove : void 0,
       onPointerUp: enabled ? onPointerUp : void 0,
       children: [
-        /* @__PURE__ */ jsx24(SortComponent, { children: header }),
-        /* @__PURE__ */ jsx24("div", { css: { flex: 1 } }),
-        /* @__PURE__ */ jsx24(FilterControl, {}),
-        /* @__PURE__ */ jsx24(ResizeHandle, {})
+        /* @__PURE__ */ jsx25(SortComponent, { children: header }),
+        /* @__PURE__ */ jsx25("div", { css: { flex: 1 } }),
+        /* @__PURE__ */ jsx25(FilterControl, {}),
+        /* @__PURE__ */ jsx25(ResizeHandle, {})
       ]
     }
   );
@@ -3295,7 +3499,7 @@ function ColumnHeader() {
 
 // src/components/columnSelection.tsx
 import { useContext as useContext7, useState as useState11 } from "react";
-import { Fragment as Fragment5, jsx as jsx25, jsxs as jsxs15 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx26, jsxs as jsxs15 } from "@emotion/react/jsx-runtime";
 function ColumnSelection() {
   const IconButton2 = useTheme((t) => t.components.IconButton);
   const Popover2 = useTheme((t) => t.components.Popover);
@@ -3334,8 +3538,8 @@ function ColumnSelection() {
   };
   const allVisible = columns.every((column) => !hiddenColumns.has(column.id));
   return /* @__PURE__ */ jsxs15(Fragment5, { children: [
-    /* @__PURE__ */ jsx25(IconButton2, { onClick: (event) => setAnchorElement(anchorElement ? null : event.currentTarget), children: /* @__PURE__ */ jsx25(Settings2, {}) }),
-    /* @__PURE__ */ jsx25(
+    /* @__PURE__ */ jsx26(IconButton2, { onClick: (event) => setAnchorElement(anchorElement ? null : event.currentTarget), children: /* @__PURE__ */ jsx26(Settings2, {}) }),
+    /* @__PURE__ */ jsx26(
       Popover2,
       {
         anchorEl: anchorElement,
@@ -3345,17 +3549,17 @@ function ColumnSelection() {
         className: classes == null ? void 0 : classes.popover,
         backdropClassName: classes == null ? void 0 : classes.popoverBackdrop,
         children: /* @__PURE__ */ jsxs15("div", { css: { padding: `calc(var(--spacing) * 2)`, display: "grid" }, children: [
-          /* @__PURE__ */ jsx25("div", { css: { marginBottom: "var(--spacing)" }, children: selectColumns }),
+          /* @__PURE__ */ jsx26("div", { css: { marginBottom: "var(--spacing)" }, children: selectColumns }),
           /* @__PURE__ */ jsxs15("div", { css: { margin: "0.5em 0", display: "flex", gap: "0.5em" }, children: [
-            /* @__PURE__ */ jsx25(Button2, { variant: "outlined", onClick: () => toggle2(void 0, !allVisible), children: allVisible ? hideAll : showAll }),
-            /* @__PURE__ */ jsx25(Button2, { variant: "outlined", onClick: reset, children: resetAll })
+            /* @__PURE__ */ jsx26(Button2, { variant: "outlined", onClick: () => toggle2(void 0, !allVisible), children: allVisible ? hideAll : showAll }),
+            /* @__PURE__ */ jsx26(Button2, { variant: "outlined", onClick: reset, children: resetAll })
           ] }),
           columns.map((column) => {
             var _a;
-            return /* @__PURE__ */ jsx25(
+            return /* @__PURE__ */ jsx26(
               FormControlLabel,
               {
-                control: /* @__PURE__ */ jsx25(
+                control: /* @__PURE__ */ jsx26(
                   Checkbox2,
                   {
                     checked: !((_a = column.hidden) != null ? _a : hiddenColumns.has(column.id)),
@@ -3376,7 +3580,7 @@ function ColumnSelection() {
 
 // src/components/export.tsx
 import { useContext as useContext8, useState as useState12 } from "react";
-import { Fragment as Fragment6, jsx as jsx26, jsxs as jsxs16 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx27, jsxs as jsxs16 } from "@emotion/react/jsx-runtime";
 function Export2() {
   const { exporters: contextExporters } = useContext8(TableSettingsContext);
   const table = useTableContext();
@@ -3391,7 +3595,7 @@ function Export2() {
   const classes = useTheme((t) => t.classes);
   const cssVariables = useCssVariables();
   const { all, exporters } = table.useState((state) => {
-    if (typeof state.props.enableExport === "boolean") {
+    if (typeof state.props.enableExport === "boolean" || state.props.enableExport === void 0) {
       return {
         all: false,
         exporters: contextExporters
@@ -3422,8 +3626,8 @@ function Export2() {
     }
   }
   return /* @__PURE__ */ jsxs16(Fragment6, { children: [
-    /* @__PURE__ */ jsx26(IconButton2, { onClick: (event) => setAnchor(anchor ? null : event.currentTarget), children: /* @__PURE__ */ jsx26(ExportIcon, { css: !!anchor && { color: "var(--primaryMain)" } }) }),
-    /* @__PURE__ */ jsx26(
+    /* @__PURE__ */ jsx27(IconButton2, { onClick: (event) => setAnchor(anchor ? null : event.currentTarget), children: /* @__PURE__ */ jsx27(ExportIcon, { css: !!anchor && { color: "var(--primaryMain)" } }) }),
+    /* @__PURE__ */ jsx27(
       Popover2,
       {
         open: !!anchor,
@@ -3445,11 +3649,11 @@ function Export2() {
               }
             },
             children: [
-              /* @__PURE__ */ jsx26("div", { css: { marginBottom: "var(--spacing)" }, children: exportTitle }),
+              /* @__PURE__ */ jsx27("div", { css: { marginBottom: "var(--spacing)" }, children: exportTitle }),
               exporters.map((entry, index) => /* @__PURE__ */ jsxs16(
                 Button2,
                 {
-                  startIcon: entry.action === "copy" ? /* @__PURE__ */ jsx26(Clipboard2, {}) : /* @__PURE__ */ jsx26(ExportIcon, {}),
+                  startIcon: entry.action === "copy" ? /* @__PURE__ */ jsx27(Clipboard2, {}) : /* @__PURE__ */ jsx27(ExportIcon, {}),
                   onClick: () => execute(entry),
                   children: [
                     entry.action === "copy" ? exportCopy : exportDownload,
@@ -3490,10 +3694,10 @@ function calcCss(styles, item, index) {
 
 // src/components/cell.tsx
 import { memo, useLayoutEffect as useLayoutEffect3 } from "react";
-import { jsx as jsx27 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx28 } from "@emotion/react/jsx-runtime";
 var defaultWrapCell = (content) => {
   if (typeof content === "string") {
-    return /* @__PURE__ */ jsx27("span", { css: defaultClasses.text, title: content, children: content });
+    return /* @__PURE__ */ jsx28("span", { css: defaultClasses.text, title: content, children: content });
   }
   return content;
 };
@@ -3521,12 +3725,12 @@ var Cell = memo(function Cell2({ itemId, rowIndex }) {
   const styles = useTheme((t) => calcCss(t.styles, item == null ? void 0 : item.value, rowIndex));
   if (!column || !item) return null;
   const content = column.renderCell(column.value(item.value), item.value);
-  return /* @__PURE__ */ jsx27("div", { className: className2, css: [defaultClasses.cell, styles], style: columnStyleOverride, children: wrapCell(content, column.value(item.value), item.value, rowIndex) });
+  return /* @__PURE__ */ jsx28("div", { className: className2, css: [defaultClasses.cell, styles], style: columnStyleOverride, children: wrapCell(content, column.value(item.value), item.value, rowIndex) });
 });
 
 // src/components/details.tsx
 import { forwardRef } from "react";
-import { jsx as jsx28 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx29 } from "@emotion/react/jsx-runtime";
 var Details = forwardRef(function Details2({ itemId, rowIndex }, ref) {
   const table = useTableContext();
   const classes = useTheme((t) => t.classes);
@@ -3539,11 +3743,11 @@ var Details = forwardRef(function Details2({ itemId, rowIndex }, ref) {
       css: (styles == null ? void 0 : styles.details) instanceof Function ? styles.details(item == null ? void 0 : item.value, rowIndex) : styles == null ? void 0 : styles.details
     };
   });
-  return details ? /* @__PURE__ */ jsx28("div", { ref, className: className2, css: [defaultClasses.details, css3], children: details }) : null;
+  return details ? /* @__PURE__ */ jsx29("div", { ref, className: className2, css: [defaultClasses.details, css3], children: details }) : null;
 });
 
 // src/components/expandControl.tsx
-import { jsx as jsx29 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx30 } from "@emotion/react/jsx-runtime";
 function ExpandControl({
   itemId,
   hasDeferredChildren
@@ -3590,9 +3794,9 @@ function ExpandControl({
     }
   }
   if (isExpanded && hasDeferredChildren && !hasChildren) {
-    return /* @__PURE__ */ jsx29(Spinner2, { css: { margin: "0 var(--spacing)" } });
+    return /* @__PURE__ */ jsx30(Spinner2, { css: { margin: "0 var(--spacing)" } });
   }
-  return /* @__PURE__ */ jsx29(IconButton2, { onClick: toggle2, children: /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx30(IconButton2, { onClick: toggle2, children: /* @__PURE__ */ jsx30(
     "span",
     {
       css: {
@@ -3600,13 +3804,13 @@ function ExpandControl({
         transition: "all 300ms",
         transform: isExpanded ? "rotate3d(0, 0, 1, 90deg)" : "rotate3d(0, 0, 1, 0deg)"
       },
-      children: /* @__PURE__ */ jsx29(ChevronRight2, {})
+      children: /* @__PURE__ */ jsx30(ChevronRight2, {})
     }
   ) });
 }
 
 // src/components/selectComponent.tsx
-import { jsx as jsx30 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx31 } from "@emotion/react/jsx-runtime";
 function SelectComponent({ itemId }) {
   const table = useTableContext();
   const Checkbox2 = useTheme((t) => t.components.Checkbox);
@@ -3655,7 +3859,7 @@ function SelectComponent({ itemId }) {
       state.lastSelectedId = itemId;
     });
   }
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx31(
     Checkbox2,
     {
       css: {
@@ -3669,7 +3873,7 @@ function SelectComponent({ itemId }) {
 }
 
 // src/components/row.tsx
-import { Fragment as Fragment7, jsx as jsx31, jsxs as jsxs17 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx32, jsxs as jsxs17 } from "@emotion/react/jsx-runtime";
 var Row = memo2(function Row2({
   itemId,
   rowIndex
@@ -3681,7 +3885,7 @@ var Row = memo2(function Row2({
   const classes = useTheme((t) => t.classes);
   const styles = useTheme((t) => t.styles);
   const item = table.useState((state) => state.activeItemsById.get(itemId));
-  const wrapRow = (_a = table.useState((state) => state.props.wrapRow)) != null ? _a : (props) => /* @__PURE__ */ jsx31("div", __spreadValues({}, props));
+  const wrapRow = (_a = table.useState((state) => state.props.wrapRow)) != null ? _a : (props) => /* @__PURE__ */ jsx32("div", __spreadValues({}, props));
   const rowClassName = (classes == null ? void 0 : classes.row) instanceof Function ? classes.row(item == null ? void 0 : item.value, rowIndex) : classes == null ? void 0 : classes.row;
   const rowStyles = (styles == null ? void 0 : styles.row) instanceof Function ? styles.row(item == null ? void 0 : item.value, rowIndex) : styles == null ? void 0 : styles.row;
   const subgrid = table.useState((state) => state.props.subgrid);
@@ -3704,7 +3908,7 @@ var Row = memo2(function Row2({
       indent: item2 ? getAncestors(state.activeItemsById, item2).size : 0,
       hasChildren: !!(item2 == null ? void 0 : item2.children.length),
       hasDeferredChildren: item2 && ((_b = (_a2 = state.props).hasDeferredChildren) == null ? void 0 : _b.call(_a2, item2.value)),
-      columnIds: state.activeColumns.map((column) => column.id),
+      columnIds: state.visibleColumns.map((column) => column.id),
       enableSelection: state.props.enableSelection,
       rowAction: state.props.rowAction instanceof Function ? item2 ? state.props.rowAction(item2.value, rowIndex) : null : state.props.rowAction,
       hasDetails: state.props.rowDetails instanceof Function ? item2 ? !!state.props.rowDetails(item2.value, rowIndex) : null : !!state.props.rowDetails
@@ -3738,7 +3942,7 @@ var Row = memo2(function Row2({
   if (!item) {
     return null;
   }
-  return /* @__PURE__ */ jsx31(ClassNames2, { children: ({ css: css3 }) => /* @__PURE__ */ jsx31(Fragment7, { children: wrapRow(
+  return /* @__PURE__ */ jsx32(ClassNames2, { children: ({ css: css3 }) => /* @__PURE__ */ jsx32(Fragment7, { children: wrapRow(
     {
       className: css3([
         subgrid ? {
@@ -3752,7 +3956,7 @@ var Row = memo2(function Row2({
         rowStyles
       ]),
       children: /* @__PURE__ */ jsxs17(Fragment7, { children: [
-        /* @__PURE__ */ jsx31(
+        /* @__PURE__ */ jsx32(
           "div",
           {
             className: cellClassName,
@@ -3766,16 +3970,16 @@ var Row = memo2(function Row2({
             className: cellClassName,
             css: [defaultClasses.cell, defaultClasses.firstCell, css_],
             children: [
-              indent > 0 && /* @__PURE__ */ jsx31("div", { css: { width: indent * 20 } }),
-              enableSelection && /* @__PURE__ */ jsx31(SelectComponent, { itemId }),
-              (hasChildren || hasDeferredChildren || hasDetails) && /* @__PURE__ */ jsx31(ExpandControl, { itemId, hasDeferredChildren }),
+              indent > 0 && /* @__PURE__ */ jsx32("div", { css: { width: indent * 20 } }),
+              enableSelection && /* @__PURE__ */ jsx32(SelectComponent, { itemId }),
+              (hasChildren || hasDeferredChildren || hasDetails) && /* @__PURE__ */ jsx32(ExpandControl, { itemId, hasDeferredChildren }),
               rowAction
             ]
           }
         ),
-        columnIds.map((columnId) => /* @__PURE__ */ jsx31(ColumnContext.Provider, { value: columnId, children: /* @__PURE__ */ jsx31(Cell, { itemId, rowIndex }) }, columnId)),
-        /* @__PURE__ */ jsx31("div", { className: cellClassName, css: [defaultClasses.cellFill, css_] }),
-        /* @__PURE__ */ jsx31(Details, { ref: detailsDivRef, itemId, rowIndex })
+        columnIds.map((columnId) => /* @__PURE__ */ jsx32(ColumnContext.Provider, { value: columnId, children: /* @__PURE__ */ jsx32(Cell, { itemId, rowIndex }) }, columnId)),
+        /* @__PURE__ */ jsx32("div", { className: cellClassName, css: [defaultClasses.cellFill, css_] }),
+        /* @__PURE__ */ jsx32(Details, { ref: detailsDivRef, itemId, rowIndex })
       ] })
     },
     item.value,
@@ -3784,8 +3988,8 @@ var Row = memo2(function Row2({
 });
 
 // src/components/virtualized.tsx
-import { useEffect as useEffect13, useLayoutEffect as useLayoutEffect5, useMemo as useMemo10, useRef as useRef6, useState as useState13 } from "react";
-import { jsx as jsx32, jsxs as jsxs18 } from "@emotion/react/jsx-runtime";
+import { useEffect as useEffect14, useLayoutEffect as useLayoutEffect5, useMemo as useMemo10, useRef as useRef6, useState as useState13 } from "react";
+import { jsx as jsx33, jsxs as jsxs18 } from "@emotion/react/jsx-runtime";
 var findScrollRoot = (x) => {
   const parent = x.parentElement;
   if (!parent) return document.documentElement;
@@ -3824,8 +4028,9 @@ function Virtualized(_a) {
       var _a3;
       const itemIds2 = state.activeItems.map((item) => item.id);
       const root = probeRef.current && findScrollRoot(probeRef.current);
+      if (!probeRef.current || !root || !document.contains(root) || state.displaySizePx === void 0)
+        return {};
       if (!state.props.virtual) return { itemIds: itemIds2 };
-      if (!probeRef.current || !root || !document.contains(root)) return {};
       const {
         rowHeight,
         initalRowHeight,
@@ -3864,7 +4069,24 @@ function Virtualized(_a) {
   );
   const throttleScroll = (_b2 = (_a2 = typeof virtual === "boolean" ? void 0 : virtual) == null ? void 0 : _a2.throttleScroll) != null ? _b2 : 16;
   const update = useMemo10(() => throttle(() => setId({}), throttleScroll), [throttleScroll]);
-  useEffect13(() => {
+  useEffect14(() => {
+    var _a3;
+    const tableElem = (_a3 = probeRef.current) == null ? void 0 : _a3.parentElement;
+    if (!tableElem) return;
+    const update2 = () => {
+      table.update((state) => {
+        state.displaySizePx = tableElem.clientWidth;
+      });
+    };
+    const ro = new ResizeObserver(update2);
+    ro.observe(tableElem);
+    window.addEventListener("resize", update2, true);
+    return () => {
+      ro.disconnect();
+      window.removeEventListener("resize", update2, true);
+    };
+  }, [table, probeRef.current]);
+  useEffect14(() => {
     if (!virtual || !probeRef.current) return;
     window.addEventListener("scroll", update, true);
     window.addEventListener("resize", update, true);
@@ -3873,7 +4095,7 @@ function Virtualized(_a) {
       window.removeEventListener("resize", update, true);
     };
   }, [update, virtual]);
-  useEffect13(() => update.cancel, [update]);
+  useEffect14(() => update.cancel, [update]);
   useLayoutEffect5(
     () => {
       var _a3, _b3;
@@ -3882,15 +4104,15 @@ function Virtualized(_a) {
   );
   return /* @__PURE__ */ jsxs18("div", __spreadProps(__spreadValues({}, props), { children: [
     header,
-    virtual && /* @__PURE__ */ jsx32("div", { style: { gridColumn: "1 / -1", height: before }, ref: probeRef }),
+    virtual && /* @__PURE__ */ jsx33("div", { style: { gridColumn: "1 / -1", height: before }, ref: probeRef }),
     children(itemIds, from),
-    virtual && /* @__PURE__ */ jsx32("div", { style: { gridColumn: "1 / -1", height: after } }),
+    virtual && /* @__PURE__ */ jsx33("div", { style: { gridColumn: "1 / -1", height: after } }),
     footer
   ] }));
 }
 
 // src/components/table.tsx
-import { Fragment as Fragment8, jsx as jsx33, jsxs as jsxs19 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx34, jsxs as jsxs19 } from "@emotion/react/jsx-runtime";
 function Table(props) {
   const [table, resetState] = useTableState(props);
   const [isHydrated, clearStorage] = useTableStateStorage(table);
@@ -3904,29 +4126,30 @@ function Table(props) {
     var _a, _b;
     return (_b = (_a = table.getState().props).debugRender) == null ? void 0 : _b.call(_a, "render table");
   });
-  return /* @__PURE__ */ jsx33(TableContext.Provider, { value: table, children: /* @__PURE__ */ jsx33(TableResetContext.Provider, { value: reset, children: /* @__PURE__ */ jsx33(TableMemoContextProvider, { children: /* @__PURE__ */ jsx33(TableLoadingState, { isHydrated }) }) }) });
+  return /* @__PURE__ */ jsx34(TableContext.Provider, { value: table, children: /* @__PURE__ */ jsx34(TableResetContext.Provider, { value: reset, children: /* @__PURE__ */ jsx34(TableMemoContextProvider, { children: /* @__PURE__ */ jsx34(TableLoadingState, { isHydrated }) }) }) });
 }
 function TableLoadingState({ isHydrated }) {
   const loadingText = useTheme((t) => t.text.loading);
   const [showLoading, setShowLoading] = useState14(false);
-  useEffect14(() => {
+  useEffect15(() => {
     const handle = setTimeout(() => setShowLoading(true), 500);
     return () => clearTimeout(handle);
   });
   return /* @__PURE__ */ jsxs19(Fragment8, { children: [
-    !isHydrated && showLoading && /* @__PURE__ */ jsx33("div", { children: loadingText }),
-    /* @__PURE__ */ jsx33(TableInner, { hidden: !isHydrated })
+    !isHydrated && showLoading && /* @__PURE__ */ jsx34("div", { children: loadingText }),
+    /* @__PURE__ */ jsx34(TableInner, { hidden: !isHydrated })
   ] });
 }
 var TableInner = memo3(function TableInner2({ hidden }) {
   const table = useTableContext();
   const fullWidth = table.useState((state) => state.props.fullWidth);
-  const activeColumns = table.useState(
-    (state) => state.activeColumns.map((column) => ({
+  const visibleColumns = table.useState(
+    (state) => state.visibleColumns.map((column) => ({
       id: column.id,
       width: column.width,
       classes: column.classes,
-      styles: column.styles
+      styles: column.styles,
+      footer: column.footer
     }))
   );
   const hasActiveFilters = table.useState((state) => {
@@ -3943,15 +4166,19 @@ var TableInner = memo3(function TableInner2({ hidden }) {
   const stickyHeader = table.useState((state) => state.props.stickyHeader);
   const stickyFooter = table.useState((state) => state.props.stickyFooter);
   const enableSelection = table.useState((state) => state.props.enableSelection);
-  const enableColumnSelection = table.useState((state) => state.props.enableColumnSelection);
-  const enableExport = table.useState((state) => !!state.props.enableExport);
+  const enableColumnSelection = table.useState(
+    (state) => Array.isArray(state.props.enableColumnSelection) ? !state.displaySize || state.props.enableColumnSelection.includes(state.displaySize) : state.props.enableColumnSelection
+  );
+  const enableExport = table.useState(
+    (state) => typeof state.props.enableExport === "object" && !("exporters" in state.props.enableExport) ? !state.displaySize || !!state.props.enableExport[state.displaySize] : !!state.props.enableExport
+  );
   const cssVariables = useCssVariables();
   const enableClearFiltersButton = table.useState((state) => state.props.enableClearFiltersButton);
   useLayoutEffect6(() => {
     var _a, _b;
     return (_b = (_a = table.getState().props).debugRender) == null ? void 0 : _b.call(_a, "render table inner");
   });
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx34(
     Virtualized,
     {
       className: classes == null ? void 0 : classes.table,
@@ -3961,7 +4188,7 @@ var TableInner = memo3(function TableInner2({ hidden }) {
           //
           fullWidth === "right" || fullWidth === true ? "auto" : "0",
           "max-content",
-          ...activeColumns.map(
+          ...visibleColumns.map(
             (column) => {
               var _a, _b;
               return (_b = (_a = columnWidths.get(column.id)) != null ? _a : column.width) != null ? _b : "max-content";
@@ -3971,11 +4198,12 @@ var TableInner = memo3(function TableInner2({ hidden }) {
         ].join(" ")
       },
       header: /* @__PURE__ */ jsxs19(Fragment8, { children: [
-        /* @__PURE__ */ jsx33(
+        /* @__PURE__ */ jsx34(
           "div",
           {
             className: classes == null ? void 0 : classes.headerCell,
             css: [
+              { gridColumn: 1 },
               defaultClasses.headerFill,
               stickyHeader && defaultClasses.sticky,
               stickyHeader instanceof Object && stickyHeader,
@@ -3988,24 +4216,25 @@ var TableInner = memo3(function TableInner2({ hidden }) {
           {
             className: classes == null ? void 0 : classes.headerCell,
             css: [
+              { gridColumn: 2 },
               defaultClasses.headerCell,
               stickyHeader && defaultClasses.sticky,
               stickyHeader instanceof Object && stickyHeader,
               styles == null ? void 0 : styles.headerCell
             ],
             children: [
-              enableSelection && /* @__PURE__ */ jsx33(SelectComponent, {}),
-              enableColumnSelection && /* @__PURE__ */ jsx33(ColumnSelection, {}),
-              enableExport && /* @__PURE__ */ jsx33(Export2, {}),
+              enableSelection && /* @__PURE__ */ jsx34(SelectComponent, {}),
+              enableColumnSelection && /* @__PURE__ */ jsx34(ColumnSelection, {}),
+              enableExport && /* @__PURE__ */ jsx34(Export2, {}),
               (enableSelection || enableColumnSelection || enableExport) && /* @__PURE__ */ jsxs19(Fragment8, { children: [
-                /* @__PURE__ */ jsx33("div", { css: { flex: 1 } }),
-                /* @__PURE__ */ jsx33(ResizeHandleView, {})
+                /* @__PURE__ */ jsx34("div", { css: { flex: 1 } }),
+                /* @__PURE__ */ jsx34(ResizeHandleView, {})
               ] })
             ]
           }
         ),
-        /* @__PURE__ */ jsx33(ColumnHeaderContext.Provider, { children: activeColumns.map((column) => /* @__PURE__ */ jsx33(ColumnContext.Provider, { value: column.id, children: /* @__PURE__ */ jsx33(ColumnHeader, {}) }, column.id)) }),
-        /* @__PURE__ */ jsx33(
+        /* @__PURE__ */ jsx34(ColumnHeaderContext.Provider, { children: visibleColumns.map((column) => /* @__PURE__ */ jsx34(ColumnContext.Provider, { value: column.id, children: /* @__PURE__ */ jsx34(ColumnHeader, {}) }, column.id)) }),
+        /* @__PURE__ */ jsx34(
           "div",
           {
             className: classes == null ? void 0 : classes.headerCell,
@@ -4019,13 +4248,14 @@ var TableInner = memo3(function TableInner2({ hidden }) {
         )
       ] }),
       footer: /* @__PURE__ */ jsxs19(Fragment8, { children: [
-        enableClearFiltersButton && hasActiveFilters && /* @__PURE__ */ jsx33(ClearFiltersButton, {}),
+        enableClearFiltersButton && hasActiveFilters && /* @__PURE__ */ jsx34(ClearFiltersButton, {}),
         hasFooter && /* @__PURE__ */ jsxs19(Fragment8, { children: [
-          /* @__PURE__ */ jsx33(
+          /* @__PURE__ */ jsx34(
             "div",
             {
               className: classes == null ? void 0 : classes.footerCell,
               css: [
+                { gridColumn: 1 },
                 defaultClasses.footerFill,
                 stickyFooter && defaultClasses.stickyBottom,
                 stickyFooter instanceof Object && stickyFooter,
@@ -4033,7 +4263,7 @@ var TableInner = memo3(function TableInner2({ hidden }) {
               ]
             }
           ),
-          /* @__PURE__ */ jsx33(
+          /* @__PURE__ */ jsx34(
             "div",
             {
               className: classes == null ? void 0 : classes.footerCell,
@@ -4045,8 +4275,8 @@ var TableInner = memo3(function TableInner2({ hidden }) {
               ]
             }
           ),
-          activeColumns.map((column) => /* @__PURE__ */ jsx33(ColumnContext.Provider, { value: column.id, children: /* @__PURE__ */ jsx33(ColumnFooter, {}) }, column.id)),
-          /* @__PURE__ */ jsx33(
+          visibleColumns.map((column) => /* @__PURE__ */ jsx34(ColumnContext.Provider, { value: column.id, children: /* @__PURE__ */ jsx34(ColumnFooter, {}) }, column.id)),
+          /* @__PURE__ */ jsx34(
             "div",
             {
               className: classes == null ? void 0 : classes.footerCell,
@@ -4060,7 +4290,7 @@ var TableInner = memo3(function TableInner2({ hidden }) {
           )
         ] })
       ] }),
-      children: (itemIds, startIndex) => itemIds.map((itemId, index) => /* @__PURE__ */ jsx33(Row, { itemId, rowIndex: startIndex + index }, itemId))
+      children: (itemIds, startIndex) => itemIds.map((itemId, index) => /* @__PURE__ */ jsx34(Row, { itemId, rowIndex: startIndex + index }, itemId))
     }
   );
 });
@@ -4086,7 +4316,7 @@ var termMatch = (text, query) => {
 };
 
 // src/components/textFilter.tsx
-import { jsx as jsx34 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx35 } from "@emotion/react/jsx-runtime";
 function TextFilter(_a) {
   var _b = _a, {
     compare = textMatch,
@@ -4110,19 +4340,19 @@ function TextFilter(_a) {
       return compare(value2, filterValue);
     }
   }));
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx35(
     "div",
     {
       css: {
         padding: `calc(var(--spacing) * 2)`,
         display: "grid"
       },
-      children: /* @__PURE__ */ jsx34(
+      children: /* @__PURE__ */ jsx35(
         AutoFocusTextField,
         {
           value,
           onChange: (event) => onChange(event.target.value),
-          endIcon: /* @__PURE__ */ jsx34(IconButton2, { onClick: () => onChange(""), children: !value ? /* @__PURE__ */ jsx34(Search2, {}) : /* @__PURE__ */ jsx34(Clear2, {}) }),
+          endIcon: /* @__PURE__ */ jsx35(IconButton2, { onClick: () => onChange(""), children: !value ? /* @__PURE__ */ jsx35(Search2, {}) : /* @__PURE__ */ jsx35(Clear2, {}) }),
           placeholder
         }
       )
@@ -4132,6 +4362,7 @@ function TextFilter(_a) {
 export {
   AutoFocusTextField,
   ColumnContext,
+  CombinedFilter,
   DateFilter,
   DatePicker,
   DatePickerProvider,