schummar-table 0.43.0 → 0.44.0

package/dist/index.cjs

@@ -855,13 +855,14 @@ var import_react_dom = require("react-dom");
 // src/theme/defaultTheme/defaultClasses.ts
 var import_react4 = require("@emotion/react");
 var cell = (0, import_react4.css)({
+  padding: `calc(var(--spacing) * 0.1) calc(2 * var(--spacing))`,
   display: "flex",
   alignItems: "center",
   borderBottom: "1px solid var(--table-border-light-color)",
   whiteSpace: "nowrap",
   overflow: "hidden",
-  "&:not(:empty)": {
-    padding: `calc(var(--spacing) * 0.1) calc(2 * var(--spacing))`
+  "&:empty": {
+    padding: 0
   }
 });
 var defaultClasses = {
@@ -1690,13 +1691,13 @@ var FilterControlContext = (0, import_react14.createContext)({
   isActive: false,
   close: () => void 0
 });
-function FilterControl() {
+function FilterControl({
+  component: Component = DefaultButton,
+  onClose
+}) {
   const table = useTableContext();
   const columnId = useColumnContext();
-  const IconButton2 = useTheme((t2) => t2.components.IconButton);
   const Popover2 = useTheme((t2) => t2.components.Popover);
-  const FilterList2 = useTheme((t2) => t2.icons.FilterList);
-  const ArrowDropDown2 = useTheme((t2) => t2.icons.ArrowDropDown);
   const classes = useTheme((t2) => t2.classes);
   const cssVariables = useCssVariables();
   const [anchor, setAnchor] = (0, import_react14.useState)(null);
@@ -1716,14 +1717,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 = (0, import_react14.useMemo)(
     () => ({
@@ -1735,7 +1736,7 @@ function FilterControl() {
   if (!filter) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(FilterControlContext.Provider, { value: context, children: [
     /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-      "div",
+      Component,
       {
         onClick: (event) => setAnchor(event.currentTarget),
         onContextMenu: (event) => {
@@ -1743,18 +1744,7 @@ function FilterControl() {
           event.preventDefault();
           return false;
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-          IconButton2,
-          {
-            css: [
-              { color: "#b0bac9" },
-              isActive && {
-                color: "var(--primaryMain) !important"
-              }
-            ],
-            children: isActive ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(FilterList2, {}) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ArrowDropDown2, {})
-          }
-        )
+        isActive
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
@@ -1771,7 +1761,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),
@@ -1783,6 +1776,24 @@ function FilterControl() {
     )
   ] });
 }
+function DefaultButton(_a) {
+  var _b = _a, { isActive } = _b, props = __objRest(_b, ["isActive"]);
+  const IconButton2 = useTheme((t2) => t2.components.IconButton);
+  const FilterList2 = useTheme((t2) => t2.icons.FilterList);
+  const ArrowDropDown2 = useTheme((t2) => t2.icons.ArrowDropDown);
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    IconButton2,
+    __spreadProps(__spreadValues({}, props), {
+      css: [
+        { color: "#b0bac9" },
+        isActive && {
+          color: "var(--primaryMain) !important"
+        }
+      ],
+      children: isActive ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(FilterList2, {}) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ArrowDropDown2, {})
+    })
+  );
+}
 
 // src/components/autoFocusTextField.tsx
 var import_jsx_runtime12 = require("@emotion/react/jsx-runtime");
@@ -3043,6 +3054,7 @@ function SelectFilter(_a) {
       css: {
         padding: "calc(var(--spacing) * 2)",
         display: "grid",
+        gridTemplateColumns: "minmax(0, 1fr)",
         gap: "var(--spacing)"
       },
       children: [
@@ -3076,7 +3088,11 @@ function SelectFilter(_a) {
             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__ */ (0, import_jsx_runtime21.jsx)(
               FormControlLabel,
@@ -3101,7 +3117,7 @@ function SelectFilter(_a) {
 }
 
 // src/components/table.tsx
-var import_react39 = require("react");
+var import_react41 = require("react");
 
 // src/internalState/tableStateStorage.ts
 var import_react22 = require("react");
@@ -3310,8 +3326,8 @@ function useTableStateStorage(table) {
 }
 
 // src/internalState/useTableState.ts
-var import_immer5 = require("immer");
-var import_react29 = require("react");
+var import_immer6 = require("immer");
+var import_react30 = require("react");
 
 // src/internalState/calcItems.ts
 var import_immer4 = require("immer");
@@ -3447,104 +3463,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 (0, import_react24.useMemo)(() => {
-    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 (0, import_react24.useMemo)(
+    () => 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 : [
+        (v2) => typeof v2 === "number" || v2 instanceof Date ? v2 : v2 === null || v2 === void 0 ? "" : String(v2)
+      ]).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 : [
-          (v2) => typeof v2 === "number" || v2 instanceof Date ? v2 : v2 === null || v2 === void 0 ? "" : String(v2)
-        ]).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
@@ -3614,8 +3675,14 @@ var import_react26 = require("react");
 function filterColumns(state) {
   (0, import_react26.useEffect)(
     () => 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;
@@ -3623,6 +3690,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 }
     ),
@@ -3704,9 +3774,56 @@ function syncSelections(table) {
   );
 }
 
+// src/internalState/watchDisplaySize.ts
+var import_immer5 = require("immer");
+var import_react29 = require("react");
+var DEFAULT_DISPLAY_SIZES = {
+  mobile: 400,
+  desktop: Infinity
+};
+function watchDisplaySize(state) {
+  (0, import_react29.useEffect)(
+    () => 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]
+  );
+  (0, import_react29.useEffect)(
+    () => state.addReaction(
+      (state2) => ({
+        props: state2.normalizedProps,
+        displaySize: state2.displaySize
+      }),
+      ({ props, displaySize }, draft) => {
+        var _a;
+        draft.props = (0, import_immer5.castDraft)(
+          overrides(props, displaySize ? (_a = props.displaySizeOverrides) == null ? void 0 : _a[displaySize] : void 0)
+        );
+      }
+    ),
+    [state]
+  );
+}
+
 // src/internalState/useTableState.ts
 function useTableState(_props) {
-  const [key, setKey] = (0, import_react29.useState)({});
+  const [key, setKey] = (0, import_react30.useState)({});
   const props = calcProps(_props);
   function reset() {
     var _a, _b, _c, _d, _e, _f, _g, _h, _i;
@@ -3725,10 +3842,11 @@ function useTableState(_props) {
     }
     (_i = props.onReset) == null ? void 0 : _i.call(props, "table");
   }
-  const state = (0, import_react29.useMemo)(
+  const state = (0, import_react30.useMemo)(
     () => {
       var _a, _b, _c, _d;
       return new Store2({
+        normalizedProps: props,
         props,
         key,
         sort: (_a = props.defaultSort) != null ? _a : [],
@@ -3742,11 +3860,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]
@@ -3756,9 +3877,10 @@ function useTableState(_props) {
   normalizeExpanded(state);
   syncSelections(state);
   cleanupState(state);
-  (0, import_react29.useEffect)(() => {
+  watchDisplaySize(state);
+  (0, import_react30.useEffect)(() => {
     state.update((state2) => {
-      state2.props = (0, import_immer5.castDraft)(props);
+      state2.normalizedProps = (0, import_immer6.castDraft)(props);
       if (props.sort) state2.sort = props.sort;
       if (props.selection) state2.selection = props.selection;
       if (props.expanded) state2.expanded = props.expanded;
@@ -3849,8 +3971,8 @@ function ColumnFooter() {
 }
 
 // src/components/columnHeader.tsx
-var import_immer6 = require("immer");
-var import_react31 = require("react");
+var import_immer7 = require("immer");
+var import_react32 = require("react");
 
 // src/components/resizeHandle.tsx
 var import_jsx_runtime24 = require("@emotion/react/jsx-runtime");
@@ -3887,6 +4009,9 @@ function ResizeHandle() {
       }
     });
   }
+  if (!enabled) {
+    return null;
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     ResizeHandleView,
     {
@@ -3920,7 +4045,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": {
@@ -3929,6 +4054,9 @@ function ResizeHandleView(_a) {
             height: "1.5em",
             background: "#c9cfda",
             transition: "transform 300ms"
+          },
+          "@media (pointer: coarse)": {
+            pointerEvents: "none"
           }
         },
         styles
@@ -4018,7 +4146,7 @@ var ColumnHeaderContext = new StoreScope({
   items: /* @__PURE__ */ new Map()
 });
 function ColumnHeader() {
-  const ref = (0, import_react31.useRef)(null);
+  const ref = (0, import_react32.useRef)(null);
   const columnId = useColumnContext();
   const table = useTableContext();
   const enabled = table.useState((state) => state.props.enableColumnReorder);
@@ -4044,13 +4172,13 @@ function ColumnHeader() {
     };
   });
   const store = ColumnHeaderContext.useStore();
-  const draggingStart = (0, import_react31.useRef)();
-  const clone = (0, import_react31.useRef)();
-  (0, import_react31.useEffect)(() => {
+  const draggingStart = (0, import_react32.useRef)();
+  const clone = (0, import_react32.useRef)();
+  (0, import_react32.useEffect)(() => {
     const div = ref.current;
     if (!div) return;
     store.update((state) => {
-      state.items.set(columnId, (0, import_immer6.castDraft)(div));
+      state.items.set(columnId, (0, import_immer7.castDraft)(div));
     });
     return () => {
       store.update((state) => {
@@ -4186,7 +4314,7 @@ function ColumnHeader() {
 }
 
 // src/components/columnSelection.tsx
-var import_react33 = require("react");
+var import_react34 = require("react");
 var import_jsx_runtime27 = require("@emotion/react/jsx-runtime");
 function ColumnSelection() {
   const IconButton2 = useTheme((t2) => t2.components.IconButton);
@@ -4201,10 +4329,10 @@ function ColumnSelection() {
   const classes = useTheme((t2) => t2.classes);
   const cssVariables = useCssVariables();
   const table = useTableContext();
-  const reset = (0, import_react33.useContext)(TableResetContext);
+  const reset = (0, import_react34.useContext)(TableResetContext);
   const columns = table.useState((state) => state.props.columns);
   const hiddenColumns = table.useState((state) => state.hiddenColumns);
-  const [anchorElement, setAnchorElement] = (0, import_react33.useState)(null);
+  const [anchorElement, setAnchorElement] = (0, import_react34.useState)(null);
   const toggle2 = (column, state) => {
     const {
       props: { hiddenColumns: controlledHiddenColumns, onHiddenColumnsChange }
@@ -4267,10 +4395,10 @@ function ColumnSelection() {
 }
 
 // src/components/export.tsx
-var import_react34 = require("react");
+var import_react35 = require("react");
 var import_jsx_runtime28 = require("@emotion/react/jsx-runtime");
 function Export2() {
-  const { exporters: contextExporters } = (0, import_react34.useContext)(TableSettingsContext);
+  const { exporters: contextExporters } = (0, import_react35.useContext)(TableSettingsContext);
   const table = useTableContext();
   const Button2 = useTheme((t2) => t2.components.Button);
   const IconButton2 = useTheme((t2) => t2.components.IconButton);
@@ -4283,7 +4411,7 @@ function Export2() {
   const classes = useTheme((t2) => t2.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
@@ -4291,7 +4419,7 @@ function Export2() {
     }
     return state.props.enableExport;
   });
-  const [anchor, setAnchor] = (0, import_react34.useState)(null);
+  const [anchor, setAnchor] = (0, import_react35.useState)(null);
   function execute({ action, exporter }) {
     const { activeColumns, activeItems, items } = table.getState();
     const columns = activeColumns.map((column) => column.exportHeader);
@@ -4361,7 +4489,8 @@ function Export2() {
 }
 
 // src/components/row.tsx
-var import_react37 = require("react");
+var import_react38 = require("@emotion/react");
+var import_react39 = require("react");
 
 // src/misc/calcClassNames.ts
 function calcClassNames(classes, item, index) {
@@ -4380,7 +4509,7 @@ function calcCss(styles, item, index) {
 }
 
 // src/components/cell.tsx
-var import_react35 = require("react");
+var import_react36 = require("react");
 var import_jsx_runtime29 = require("@emotion/react/jsx-runtime");
 var defaultWrapCell = (content) => {
   if (typeof content === "string") {
@@ -4388,7 +4517,7 @@ var defaultWrapCell = (content) => {
   }
   return content;
 };
-var Cell = (0, import_react35.memo)(function Cell2({ itemId, rowIndex }) {
+var Cell = (0, import_react36.memo)(function Cell2({ itemId, rowIndex }) {
   var _a;
   const table = useTableContext();
   const columnId = useColumnContext();
@@ -4404,7 +4533,7 @@ var Cell = (0, import_react35.memo)(function Cell2({ itemId, rowIndex }) {
   const columnStyleOverride = table.useState((state) => state.columnStyleOverride.get(columnId), {
     throttle: 16
   });
-  (0, import_react35.useLayoutEffect)(() => {
+  (0, import_react36.useLayoutEffect)(() => {
     var _a2, _b;
     return (_b = (_a2 = table.getState().props).debugRender) == null ? void 0 : _b.call(_a2, "render cell", itemId, columnId);
   });
@@ -4416,9 +4545,9 @@ var Cell = (0, import_react35.memo)(function Cell2({ itemId, rowIndex }) {
 });
 
 // src/components/details.tsx
-var import_react36 = require("react");
+var import_react37 = require("react");
 var import_jsx_runtime30 = require("@emotion/react/jsx-runtime");
-var Details = (0, import_react36.forwardRef)(function Details2({ itemId, rowIndex }, ref) {
+var Details = (0, import_react37.forwardRef)(function Details2({ itemId, rowIndex }, ref) {
   const table = useTableContext();
   const classes = useTheme((t2) => t2.classes);
   const styles = useTheme((t2) => t2.styles);
@@ -4561,21 +4690,18 @@ function SelectComponent({ itemId }) {
 
 // src/components/row.tsx
 var import_jsx_runtime33 = require("@emotion/react/jsx-runtime");
-var defaultWrapRow = (content) => {
-  return content;
-};
-var Row = (0, import_react37.memo)(function Row2({
+var Row = (0, import_react39.memo)(function Row2({
   itemId,
   rowIndex
 }) {
   var _a;
   const table = useTableContext();
-  const divRef = (0, import_react37.useRef)(null);
-  const detailsDivRef = (0, import_react37.useRef)(null);
+  const divRef = (0, import_react39.useRef)(null);
+  const detailsDivRef = (0, import_react39.useRef)(null);
   const classes = useTheme((t2) => t2.classes);
   const styles = useTheme((t2) => t2.styles);
   const item = table.useState((state) => state.activeItemsById.get(itemId));
-  const wrapRow = (_a = table.useState((state) => state.props.wrapRow)) != null ? _a : defaultWrapRow;
+  const wrapRow = (_a = table.useState((state) => state.props.wrapRow)) != null ? _a : (props) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("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);
@@ -4598,13 +4724,13 @@ var Row = (0, import_react37.memo)(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
     };
   });
-  (0, import_react37.useLayoutEffect)(() => {
+  (0, import_react39.useLayoutEffect)(() => {
     function update() {
       table.update((state) => {
         if (!divRef.current) {
@@ -4625,57 +4751,60 @@ var Row = (0, import_react37.memo)(function Row2({
       handles.forEach((h2) => h2());
     };
   }, [table, itemId, divRef.current, detailsDivRef.current]);
-  (0, import_react37.useLayoutEffect)(() => {
+  (0, import_react39.useLayoutEffect)(() => {
     var _a2, _b;
     return (_b = (_a2 = table.getState().props).debugRender) == null ? void 0 : _b.call(_a2, "render row", itemId);
   });
   if (!item) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-    "div",
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react38.ClassNames, { children: ({ css: css4 }) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_jsx_runtime33.Fragment, { children: wrapRow(
     {
-      css: [
-        {
-          display: "contents"
-        },
-        subgrid && {
-          gridColumn: "1 / -1",
+      className: css4([
+        subgrid ? {
+          gridColumn: `1 / -1`,
           display: "grid",
           gridTemplateColumns: "subgrid"
+        } : {
+          display: "contents"
         },
+        rowClassName,
         rowStyles
-      ],
-      className: rowClassName,
-      children: wrapRow(
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: cellClassName, css: [defaultClasses.cellFill, css_], ref: divRef }),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
-            "div",
-            {
-              className: cellClassName,
-              css: [defaultClasses.cell, defaultClasses.firstCell, css_],
-              children: [
-                indent > 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { css: { width: indent * 20 } }),
-                enableSelection && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SelectComponent, { itemId }),
-                (hasChildren || hasDeferredChildren || hasDetails) && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ExpandControl, { itemId, hasDeferredChildren }),
-                rowAction
-              ]
-            }
-          ),
-          columnIds.map((columnId) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ColumnContext.Provider, { value: columnId, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Cell, { itemId, rowIndex }) }, columnId)),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: cellClassName, css: [defaultClasses.cellFill, css_] }),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Details, { ref: detailsDivRef, itemId, rowIndex })
-        ] }),
-        item.value,
-        rowIndex
-      )
-    }
-  );
+      ]),
+      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          "div",
+          {
+            className: cellClassName,
+            css: [defaultClasses.cellFill, css_],
+            ref: divRef
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+          "div",
+          {
+            className: cellClassName,
+            css: [defaultClasses.cell, defaultClasses.firstCell, css_],
+            children: [
+              indent > 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { css: { width: indent * 20 } }),
+              enableSelection && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SelectComponent, { itemId }),
+              (hasChildren || hasDeferredChildren || hasDetails) && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ExpandControl, { itemId, hasDeferredChildren }),
+              rowAction
+            ]
+          }
+        ),
+        columnIds.map((columnId) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ColumnContext.Provider, { value: columnId, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Cell, { itemId, rowIndex }) }, columnId)),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: cellClassName, css: [defaultClasses.cellFill, css_] }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Details, { ref: detailsDivRef, itemId, rowIndex })
+      ] })
+    },
+    item.value,
+    rowIndex
+  ) }) });
 });
 
 // src/components/virtualized.tsx
-var import_react38 = require("react");
+var import_react40 = require("react");
 var import_jsx_runtime34 = require("@emotion/react/jsx-runtime");
 var findScrollRoot = (x) => {
   const parent = x.parentElement;
@@ -4702,8 +4831,8 @@ function Virtualized(_a) {
   var _a2, _b2;
   const table = useTableContext();
   const virtual = table.useState((state) => state.props.virtual);
-  const probeRef = (0, import_react38.useRef)(null);
-  const [, setId] = (0, import_react38.useState)({});
+  const probeRef = (0, import_react40.useRef)(null);
+  const [, setId] = (0, import_react40.useState)({});
   const {
     itemIds = [],
     from = 0,
@@ -4715,8 +4844,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,
@@ -4754,8 +4884,25 @@ function Virtualized(_a) {
     { throttle: 16 }
   );
   const throttleScroll = (_b2 = (_a2 = typeof virtual === "boolean" ? void 0 : virtual) == null ? void 0 : _a2.throttleScroll) != null ? _b2 : 16;
-  const update = (0, import_react38.useMemo)(() => throttle2(() => setId({}), throttleScroll), [throttleScroll]);
-  (0, import_react38.useEffect)(() => {
+  const update = (0, import_react40.useMemo)(() => throttle2(() => setId({}), throttleScroll), [throttleScroll]);
+  (0, import_react40.useEffect)(() => {
+    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]);
+  (0, import_react40.useEffect)(() => {
     if (!virtual || !probeRef.current) return;
     window.addEventListener("scroll", update, true);
     window.addEventListener("resize", update, true);
@@ -4764,8 +4911,8 @@ function Virtualized(_a) {
       window.removeEventListener("resize", update, true);
     };
   }, [update, virtual]);
-  (0, import_react38.useEffect)(() => update.cancel, [update]);
-  (0, import_react38.useLayoutEffect)(
+  (0, import_react40.useEffect)(() => update.cancel, [update]);
+  (0, import_react40.useLayoutEffect)(
     () => {
       var _a3, _b3;
       return (_b3 = (_a3 = table.getState().props).debugRender) == null ? void 0 : _b3.call(_a3, `Virtualalized render ${from} to ${to}`);
@@ -4791,7 +4938,7 @@ function Table(props) {
       resetState();
     });
   }
-  (0, import_react39.useLayoutEffect)(() => {
+  (0, import_react41.useLayoutEffect)(() => {
     var _a, _b;
     return (_b = (_a = table.getState().props).debugRender) == null ? void 0 : _b.call(_a, "render table");
   });
@@ -4799,8 +4946,8 @@ function Table(props) {
 }
 function TableLoadingState({ isHydrated }) {
   const loadingText = useTheme((t2) => t2.text.loading);
-  const [showLoading, setShowLoading] = (0, import_react39.useState)(false);
-  (0, import_react39.useEffect)(() => {
+  const [showLoading, setShowLoading] = (0, import_react41.useState)(false);
+  (0, import_react41.useEffect)(() => {
     const handle = setTimeout(() => setShowLoading(true), 500);
     return () => clearTimeout(handle);
   });
@@ -4809,15 +4956,16 @@ function TableLoadingState({ isHydrated }) {
     /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TableInner, { hidden: !isHydrated })
   ] });
 }
-var TableInner = (0, import_react39.memo)(function TableInner2({ hidden }) {
+var TableInner = (0, import_react41.memo)(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) => {
@@ -4834,11 +4982,15 @@ var TableInner = (0, import_react39.memo)(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);
-  (0, import_react39.useLayoutEffect)(() => {
+  (0, import_react41.useLayoutEffect)(() => {
     var _a, _b;
     return (_b = (_a = table.getState().props).debugRender) == null ? void 0 : _b.call(_a, "render table inner");
   });
@@ -4852,7 +5004,7 @@ var TableInner = (0, import_react39.memo)(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";
@@ -4867,6 +5019,7 @@ var TableInner = (0, import_react39.memo)(function TableInner2({ hidden }) {
           {
             className: classes == null ? void 0 : classes.headerCell,
             css: [
+              { gridColumn: 1 },
               defaultClasses.headerFill,
               stickyHeader && defaultClasses.sticky,
               stickyHeader instanceof Object && stickyHeader,
@@ -4879,6 +5032,7 @@ var TableInner = (0, import_react39.memo)(function TableInner2({ hidden }) {
           {
             className: classes == null ? void 0 : classes.headerCell,
             css: [
+              { gridColumn: 2 },
               defaultClasses.headerCell,
               stickyHeader && defaultClasses.sticky,
               stickyHeader instanceof Object && stickyHeader,
@@ -4895,7 +5049,7 @@ var TableInner = (0, import_react39.memo)(function TableInner2({ hidden }) {
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ColumnHeaderContext.Provider, { children: activeColumns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ColumnContext.Provider, { value: column.id, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ColumnHeader, {}) }, column.id)) }),
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ColumnHeaderContext.Provider, { children: visibleColumns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ColumnContext.Provider, { value: column.id, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ColumnHeader, {}) }, column.id)) }),
         /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
           "div",
           {
@@ -4917,6 +5071,7 @@ var TableInner = (0, import_react39.memo)(function TableInner2({ hidden }) {
             {
               className: classes == null ? void 0 : classes.footerCell,
               css: [
+                { gridColumn: 1 },
                 defaultClasses.footerFill,
                 stickyFooter && defaultClasses.stickyBottom,
                 stickyFooter instanceof Object && stickyFooter,
@@ -4936,7 +5091,7 @@ var TableInner = (0, import_react39.memo)(function TableInner2({ hidden }) {
               ]
             }
           ),
-          activeColumns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ColumnContext.Provider, { value: column.id, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ColumnFooter, {}) }, column.id)),
+          visibleColumns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ColumnContext.Provider, { value: column.id, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ColumnFooter, {}) }, column.id)),
           /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
             "div",
             {