schummar-table 0.6.0 → 0.8.0

package/dist/cjs/index.js

@@ -40,6 +40,34 @@ var dayzed = require("dayzed");
 var immer = require("immer");
 var react$2 = require("@emotion/react");
 require("react-dom");
+const TableMemoContext = react.createContext(/* @__PURE__ */ new Map());
+function TableMemoContextProvider({
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(TableMemoContext.Provider, {
+    value: react.useMemo(() => /* @__PURE__ */ new Map(), []),
+    children
+  });
+}
+function useTableMemo() {
+  const memoCache = react.useContext(TableMemoContext);
+  return (key, fn) => {
+    let deps;
+    if (Array.isArray(fn)) {
+      deps = fn.slice(1);
+      fn = fn[0];
+    } else {
+      deps = [fn.toString()];
+    }
+    let cachedValue = memoCache.get(key);
+    const hit = cachedValue && cachedValue[1].length === deps.length && cachedValue[1].every((x, i) => x === deps[i]);
+    if (!cachedValue || !hit) {
+      cachedValue = [fn, deps];
+      memoCache.set(key, cachedValue);
+    }
+    return cachedValue[0];
+  };
+}
 class Queue {
   constructor() {
     this.q = new Array();
@@ -282,10 +310,11 @@ function calcItems(state) {
     state2.activeColumns,
     state2.expanded
   ], ([items = [], id, parentId, revealFiltered, sort, filters, filterValues, activeColumns], draft) => {
-    const tableItems = items.map((item) => __spreadProps(__spreadValues({}, item), {
+    const tableItems = items.map((item) => ({
       id: id(item),
       parentId: parentId == null ? void 0 : parentId(item),
-      children: []
+      children: [],
+      value: item
     }));
     let sorted;
     if (sort.length === 0) {
@@ -295,10 +324,12 @@ function calcItems(state) {
         const column = activeColumns.find((column2) => column2.id === sort2.columnId);
         if (!column)
           return [];
-        const sortBy = column.sortBy instanceof Array ? column.sortBy : [column.sortBy];
-        return sortBy.map((sortBy2) => ({ selector: (item) => sortBy2(column.value(item), item), direction: sort2.direction }));
+        return column.sortBy.map((sortBy) => ({
+          selector: (item) => sortBy(column.value(item), item),
+          direction: sort2.direction
+        }));
       }).filter(Boolean);
-      sorted = orderBy(tableItems, selectors.map((x) => x.selector), selectors.map((x) => x.direction));
+      sorted = orderBy(tableItems, selectors.map((x) => (item) => x.selector(item.value)), selectors.map((x) => x.direction));
     }
     const lookup = /* @__PURE__ */ new Map();
     for (const item of sorted) {
@@ -332,7 +363,7 @@ function calcItems(state) {
         if (filterValue === void 0 || !filter.isActive(filterValue))
           return true;
         const filterBy = (_a = filter.filterBy) != null ? _a : (x) => x;
-        const value = filterBy(column.value(item), item);
+        const value = filterBy(column.value(item.value), item.value);
         return castArray(value).some((value2) => filter.test(filterValue, value2));
       }));
       if (isActive && item.parentId !== void 0) {
@@ -368,20 +399,20 @@ function calcItems(state) {
 }
 const noopParentId = () => void 0;
 function calcProps(props) {
-  const columnCache = react.useRef(/* @__PURE__ */ new Map());
+  const cache = useTableMemo();
   return react.useMemo(() => {
-    var _c, _d, _e, _f, _g, _h;
+    var _f, _g, _h, _i, _j, _k, _l;
     let id;
-    if (props.id instanceof Function) {
-      id = props.id;
+    if (props.id instanceof Function || Array.isArray(props.id)) {
+      id = cache("id", props.id);
     } else {
-      id = (item) => item[props.id];
+      id = cache("id", [(item) => item[props.id], props.id]);
     }
     let parentId;
-    if (props.parentId instanceof Function) {
-      parentId = props.parentId;
-    } else if (typeof props.parentId === "string") {
-      parentId = (item) => item[props.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;
     }
@@ -391,42 +422,39 @@ function calcProps(props) {
     } else {
       inputColumns = props.columns.map((column) => __spreadProps(__spreadValues({}, column), { dependecies: void 0 }));
     }
-    const newColumnCache = /* @__PURE__ */ new Map();
-    const columns = inputColumns.map(function(_a, index) {
-      var _b = _a, {
+    const defCol = props.defaultColumnProps;
+    const mapColumn = ({
+      id: _id,
+      header = ((_a) => (_a = defCol == null ? void 0 : defCol.header) != null ? _a : null)(),
+      footer = ((_b) => (_b = defCol == null ? void 0 : defCol.footer) != null ? _b : null)(),
+      value,
+      renderCell = ((_c) => (_c = defCol == null ? void 0 : defCol.renderCell) != null ? _c : asString)(),
+      exportCell = ((_d) => (_d = defCol == null ? void 0 : defCol.exportCell) != null ? _d : asString)(),
+      sortBy = ((_e) => (_e = defCol == null ? void 0 : defCol.sortBy) != null ? _e : [(v) => typeof v === "number" || v instanceof Date ? v : String(v)])(),
+      cannotHide = defCol == null ? void 0 : defCol.cannotHide,
+      classes = defCol == null ? void 0 : defCol.classes,
+      filter = defCol == null ? void 0 : defCol.filter,
+      width = defCol == null ? void 0 : defCol.width
+    }, index) => {
+      const id2 = _id != null ? _id : index;
+      const cacheKey = typeof id2 === "string" ? `s${id2}` : `n${id2}`;
+      return {
         id: id2,
-        header = null,
-        renderCell = asString,
-        exportCell = asString,
-        sortBy = (v) => typeof v === "number" || v instanceof Date ? v : String(v),
-        dependencies = []
-      } = _b, props2 = __objRest(_b, [
-        "id",
-        "header",
-        "renderCell",
-        "exportCell",
-        "sortBy",
-        "dependencies"
-      ]);
-      var _a2;
-      const [depsInCache, columnInCache] = (_a2 = columnCache.current.get(id2 != null ? id2 : index)) != null ? _a2 : [];
-      let column;
-      if (depsInCache && columnInCache && depsInCache.length === dependencies.length && depsInCache.every((x, i) => dependencies[i] === x)) {
-        column = columnInCache;
-      } else {
-        column = __spreadValues({
-          id: id2 != null ? id2 : index,
-          header,
-          renderCell,
-          exportCell,
-          sortBy,
-          dependencies
-        }, props2);
-      }
-      newColumnCache.set(id2 != null ? id2 : index, [dependencies, column]);
-      return column;
-    });
-    columnCache.current = newColumnCache;
+        header: header instanceof Function ? cache(`columns.${cacheKey}.header`, header) : header,
+        footer: footer instanceof Function ? cache(`columns.${cacheKey}.footer`, footer) : footer,
+        value: cache(`columns.${cacheKey}.value`, value),
+        renderCell: cache(`columns.${cacheKey}.renderCell`, renderCell),
+        exportCell,
+        sortBy: sortBy.map((fn, i) => cache(`columns.${cacheKey}.sortBy.${i}`, fn)),
+        cannotHide,
+        classes,
+        filter,
+        width
+      };
+    };
+    const columns = inputColumns.map(mapColumn);
+    const wrapCell = props.wrapCell && cache("wrapCell", props.wrapCell);
+    const rowAction = props.rowAction instanceof Function || Array.isArray(props.rowAction) ? cache("rowAction", props.rowAction) : props.rowAction;
     let copy;
     if (props.enableExport === true || props.enableExport instanceof Object && props.enableExport.copy === true) {
       copy = { separator: "	" };
@@ -444,13 +472,16 @@ function calcProps(props) {
       id,
       parentId,
       columns,
-      enableSelection: (_c = props.enableSelection) != null ? _c : true,
-      selectSyncChildren: (_d = props.selectSyncChildren) != null ? _d : true,
-      stickyHeader: (_e = props.stickyHeader) != null ? _e : true,
+      wrapCell,
+      rowAction,
+      enableSelection: (_f = props.enableSelection) != null ? _f : true,
+      selectSyncChildren: (_g = props.selectSyncChildren) != null ? _g : true,
+      stickyHeader: (_h = props.stickyHeader) != null ? _h : true,
+      stickyFooter: (_i = props.stickyFooter) != null ? _i : true,
       enableExport,
-      enableColumnSelection: (_f = props.enableColumnSelection) != null ? _f : true,
-      enableColumnResize: (_g = props.enableColumnResize) != null ? _g : true,
-      enableColumnReorder: (_h = props.enableColumnReorder) != null ? _h : true
+      enableColumnSelection: (_j = props.enableColumnSelection) != null ? _j : true,
+      enableColumnResize: (_k = props.enableColumnResize) != null ? _k : true,
+      enableColumnReorder: (_l = props.enableColumnReorder) != null ? _l : true
     });
   }, [props]);
 }
@@ -580,25 +611,269 @@ function useTableState(_props) {
   return state;
 }
 function useCssVariables() {
-  const theme = useTheme();
-  return {
-    "--spacing": theme.spacing,
-    "--primaryMain": theme.colors.primary.main,
-    "--primaryLight": theme.colors.primary.light,
-    "--primaryContrastText": theme.colors.primary.contrastText,
-    "--secondaryMain": theme.colors.secondary.main,
-    "--secondaryLight": theme.colors.secondary.light,
-    "--secondaryContrastText": theme.colors.secondary.contrastText
-  };
+  return useTheme(({ spacing, colors }) => ({
+    "--spacing": spacing,
+    "--primaryMain": colors.primary.main,
+    "--primaryLight": colors.primary.light,
+    "--primaryContrastText": colors.primary.contrastText,
+    "--secondaryMain": colors.secondary.main,
+    "--secondaryLight": colors.secondary.light,
+    "--secondaryContrastText": colors.secondary.contrastText
+  }));
+}
+function ColumnFooter() {
+  const table = useTableContext();
+  const columnId = useColumnContext();
+  const stickyFooter = table.useState("props.stickyFooter");
+  const columnStyleOverride = table.useState((state) => state.columnStyleOverride.get(columnId), {
+    throttle: 16
+  });
+  const columnClasses = table.useState((state) => {
+    var _a;
+    return (_a = state.activeColumns.find((column) => column.id === columnId)) == null ? void 0 : _a.classes;
+  });
+  const classes = useTheme((theme) => theme.classes);
+  const content = table.useState((state) => {
+    const column = state.activeColumns.find((column2) => column2.id === columnId);
+    if ((column == null ? void 0 : column.footer) instanceof Function) {
+      const items = state.activeItems;
+      const values = items.map((item) => column == null ? void 0 : column.value(item));
+      return column == null ? void 0 : column.footer(values, items);
+    }
+    return column == null ? void 0 : column.footer;
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    className: cx(classes == null ? void 0 : classes.footerCell, columnClasses == null ? void 0 : columnClasses.footerCell),
+    css: [tableTheme.defaultClasses.footerCell, columnStyleOverride, stickyFooter && tableTheme.defaultClasses.stickyBottom, stickyFooter instanceof Object && stickyFooter],
+    children: content
+  });
+}
+const FilterControlContext = react.createContext(() => void 0);
+function FilterControl() {
+  const table = useTableContext();
+  const columnId = useColumnContext();
+  const IconButton2 = useTheme((t) => t.components.IconButton);
+  const Popover = useTheme((t) => t.components.Popover);
+  const FilterList2 = useTheme((t) => t.icons.FilterList);
+  const ArrowDropDown2 = useTheme((t) => t.icons.ArrowDropDown);
+  const cssVariables = useCssVariables();
+  const [anchor, setAnchor] = react.useState(null);
+  const isActive = table.useState((state) => {
+    const filter2 = state.filters.get(columnId);
+    const filterValue = state.filterValues.get(columnId);
+    return filter2 !== void 0 && filterValue !== void 0 && filter2.isActive(filterValue);
+  });
+  const filter = table.useState((state) => {
+    var _a;
+    return (_a = state.activeColumns.find((column) => column.id === columnId)) == null ? void 0 : _a.filter;
+  });
+  function reset() {
+    table.update((state) => {
+      state.filterValues.delete(columnId);
+    });
+  }
+  const close = react.useCallback(function() {
+    setAnchor(null);
+  }, []);
+  if (!filter)
+    return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(FilterControlContext.Provider, {
+    value: close,
+    children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
+      onClick: (e) => setAnchor(e.currentTarget),
+      onContextMenu: (e) => {
+        reset();
+        e.preventDefault();
+        return false;
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(IconButton2, {
+        css: [{
+          color: "#b0bac9"
+        }, isActive && {
+          color: "var(--primaryMain) !important"
+        }],
+        children: isActive ? /* @__PURE__ */ jsxRuntime.jsx(FilterList2, {}) : /* @__PURE__ */ jsxRuntime.jsx(ArrowDropDown2, {})
+      })
+    }), /* @__PURE__ */ jsxRuntime.jsx("div", {
+      onPointerDown: (e) => {
+        e.stopPropagation();
+      },
+      onPointerMove: (e) => {
+        e.stopPropagation();
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(Popover, {
+        open: true,
+        hidden: !anchor,
+        onClose: () => setAnchor(null),
+        anchorEl: anchor != null ? anchor : document.body,
+        css: cssVariables,
+        children: filter
+      })
+    })]
+  });
+}
+function ResizeHandle() {
+  const table = useTableContext();
+  const columnId = useColumnContext();
+  const enabled = table.useState("props.enableColumnResize");
+  function onPointerDown(e) {
+    e.stopPropagation();
+    const div = e.target;
+    div.setPointerCapture(e.pointerId);
+  }
+  function onPointerMove(e) {
+    e.stopPropagation();
+    const div = e.target;
+    if (!div.hasPointerCapture(e.pointerId))
+      return;
+    const parent = div.parentElement;
+    const width = Math.max(e.clientX - parent.getBoundingClientRect().left + 5, 50);
+    table.update((state) => {
+      state.columnWidths.set(columnId, `${width}px`);
+    });
+  }
+  function onPointerUp(e) {
+    e.stopPropagation();
+    const div = e.target;
+    div.releasePointerCapture(e.pointerId);
+  }
+  function onDoubleClick(e) {
+    table.update((state) => {
+      if (e.getModifierState("Control")) {
+        state.columnWidths.delete(columnId);
+      } else {
+        state.columnWidths.set(columnId, "max-content");
+      }
+    });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(ResizeHandleView, {
+    enabled,
+    onPointerDown: enabled ? onPointerDown : void 0,
+    onPointerMove: enabled ? onPointerMove : void 0,
+    onPointerUp: enabled ? onPointerUp : void 0,
+    onDoubleClick: enabled ? onDoubleClick : void 0
+  });
+}
+function ResizeHandleView(_a) {
+  var _b = _a, {
+    enabled
+  } = _b, props = __objRest(_b, [
+    "enabled"
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadValues({
+    css: {
+      alignSelf: "stretch",
+      padding: "0 5px",
+      cursor: enabled ? "col-resize" : "initial",
+      display: "flex",
+      alignItems: "center",
+      "&:after": {
+        content: '""',
+        width: 1,
+        height: "1.5em",
+        background: "#c9cfda",
+        transition: "transform 300ms"
+      }
+    }
+  }, props));
+}
+function SortComponent({
+  children
+}) {
+  const table = useTableContext();
+  const columnId = useColumnContext();
+  const Badge2 = useTheme((t) => t.components.Badge);
+  const ArrowUpward2 = useTheme((t) => t.icons.ArrowUpward);
+  const {
+    direction,
+    index
+  } = table.useState((state) => {
+    var _a, _b;
+    const index2 = (_a = state.sort.findIndex((s) => s.columnId === columnId)) != null ? _a : -1;
+    return {
+      direction: (_b = state.sort[index2]) == null ? void 0 : _b.direction,
+      index: index2 >= 0 && state.sort.length > 1 ? index2 + 1 : void 0
+    };
+  });
+  function toggle2(e, off) {
+    const {
+      props: {
+        sort: controlledSort,
+        onSortChange
+      }
+    } = table.getState();
+    const newDirection = direction === "asc" ? "desc" : "asc";
+    const newSort = e.getModifierState("Control") || off ? table.getState().sort.filter((s) => s.columnId !== columnId) : [];
+    if (!off) {
+      newSort.push({
+        columnId,
+        direction: newDirection
+      });
+    }
+    onSortChange == null ? void 0 : onSortChange(newSort);
+    if (!controlledSort) {
+      table.update((state) => {
+        state.sort = newSort;
+      });
+    }
+    e.preventDefault();
+    return false;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
+    css: {
+      userSelect: "none",
+      display: "grid",
+      gridTemplateColumns: "minmax(0, 1fr) max-content",
+      alignItems: "center",
+      cursor: "pointer",
+      "& > div": {
+        overflow: "hidden",
+        textOverflow: "ellipsis"
+      }
+    },
+    onClick: (e) => toggle2(e),
+    onContextMenu: (e) => toggle2(e, true),
+    children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
+      children
+    }), /* @__PURE__ */ jsxRuntime.jsx(Badge2, {
+      badgeContent: index,
+      children: /* @__PURE__ */ jsxRuntime.jsx("span", {
+        css: [{
+          transition: "all 300ms",
+          fontSize: "0.8em"
+        }, !direction && {
+          opacity: 0
+        }, direction === "desc" && {
+          transform: "rotate3d(0, 0, 1, 180deg)"
+        }],
+        children: /* @__PURE__ */ jsxRuntime.jsx(ArrowUpward2, {})
+      })
+    })]
+  });
 }
 const ColumnHeaderContext = new react$1.StoreScope({
   items: /* @__PURE__ */ new Map()
 });
-function ColumnHeader(props) {
+function ColumnHeader() {
   const ref = react.useRef(null);
   const columnId = useColumnContext();
   const table = useTableContext();
   const enabled = table.useState("props.enableColumnReorder");
+  const columnStyleOverride = table.useState((state) => state.columnStyleOverride.get(columnId), {
+    throttle: 16
+  });
+  const stickyHeader = table.useState("props.stickyHeader");
+  const classes = useTheme((theme) => theme.classes);
+  const {
+    header,
+    columnClasses
+  } = table.useState((state) => {
+    const column = state.activeColumns.find((column2) => column2.id === columnId);
+    return {
+      header: column == null ? void 0 : column.header,
+      columnClasses: column == null ? void 0 : column.classes
+    };
+  });
   const store = ColumnHeaderContext.useStore();
   const draggingStart = react.useRef();
   const clone = react.useRef();
@@ -717,24 +992,31 @@ function ColumnHeader(props) {
       clone.current = void 0;
     });
   }
-  return jsxRuntime.jsx("div", __spreadProps(__spreadValues({}, props), {
-    css: {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
+    ref,
+    className: cx(classes == null ? void 0 : classes.headerCell, columnClasses == null ? void 0 : columnClasses.headerCell),
+    css: [{
       position: "relative",
       userSelect: "none"
-    },
-    ref,
+    }, tableTheme.defaultClasses.headerCell, columnStyleOverride, stickyHeader && tableTheme.defaultClasses.sticky, stickyHeader instanceof Object && stickyHeader],
     onPointerDown: enabled ? onPointerDown : void 0,
     onPointerMove: enabled ? onPointerMove : void 0,
     onPointerUp: enabled ? onPointerUp : void 0,
-    children: props.children
-  }));
+    children: [/* @__PURE__ */ jsxRuntime.jsx(SortComponent, {
+      children: header
+    }), /* @__PURE__ */ jsxRuntime.jsx("div", {
+      css: {
+        flex: 1
+      }
+    }), /* @__PURE__ */ jsxRuntime.jsx(FilterControl, {}), /* @__PURE__ */ jsxRuntime.jsx(ResizeHandle, {})]
+  });
 }
 function FormControlLabel({
   control,
   label,
   disabled
 }) {
-  return jsxRuntime.jsxs("label", {
+  return /* @__PURE__ */ jsxRuntime.jsxs("label", {
     css: [{
       display: "flex",
       alignItems: "center",
@@ -746,7 +1028,7 @@ function FormControlLabel({
     }, disabled && {
       color: "rgba(0, 0, 0, 0.26)"
     }],
-    children: [control, jsxRuntime.jsx("span", {
+    children: [control, /* @__PURE__ */ jsxRuntime.jsx("span", {
       css: {
         marginLeft: "var(--spacing)"
       },
@@ -755,17 +1037,11 @@ function FormControlLabel({
   });
 }
 function ColumnSelection() {
-  const {
-    components: {
-      IconButton: IconButton2,
-      Popover,
-      Checkbox: Checkbox2
-    },
-    icons: {
-      Settings: Settings2
-    },
-    text
-  } = useTheme();
+  const IconButton2 = useTheme((t) => t.components.IconButton);
+  const Popover = useTheme((t) => t.components.Popover);
+  const Checkbox2 = useTheme((t) => t.components.Checkbox);
+  const Settings2 = useTheme((t) => t.icons.Settings);
+  const selectColumns = useTheme((t) => t.text.selectColumns);
   const cssVariables = useCssVariables();
   const table = useTableContext();
   const columns = table.useState("props.columns");
@@ -790,27 +1066,27 @@ function ColumnSelection() {
     }
     onHiddenColumnsChange == null ? void 0 : onHiddenColumnsChange(newValue);
   };
-  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [jsxRuntime.jsx(IconButton2, {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/* @__PURE__ */ jsxRuntime.jsx(IconButton2, {
       onClick: (e) => setAnchorEl(anchorEl ? null : e.currentTarget),
-      children: jsxRuntime.jsx(Settings2, {})
-    }), jsxRuntime.jsx(Popover, {
+      children: /* @__PURE__ */ jsxRuntime.jsx(Settings2, {})
+    }), /* @__PURE__ */ jsxRuntime.jsx(Popover, {
       anchorEl,
       open: !!anchorEl,
       onClose: () => setAnchorEl(null),
       css: cssVariables,
-      children: jsxRuntime.jsxs("div", {
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
         css: {
           padding: `calc(var(--spacing) * 2)`,
           display: "grid"
         },
-        children: [jsxRuntime.jsx("div", {
+        children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
           css: {
             marginBottom: "var(--spacing)"
           },
-          children: text.selectColumns
-        }), columns.map((column) => jsxRuntime.jsx(FormControlLabel, {
-          control: jsxRuntime.jsx(Checkbox2, {
+          children: selectColumns
+        }), columns.map((column) => /* @__PURE__ */ jsxRuntime.jsx(FormControlLabel, {
+          control: /* @__PURE__ */ jsxRuntime.jsx(Checkbox2, {
             checked: !hiddenColumns.has(column.id),
             onChange: () => toggle2(column),
             disabled: column.cannotHide
@@ -835,18 +1111,14 @@ function csvExport(data, { sepPrefix, separator = ",", quote = '"', eol = "\n" }
 }
 function Export$1() {
   const table = useTableContext();
-  const {
-    components: {
-      Button: Button2,
-      IconButton: IconButton2,
-      Popover
-    },
-    icons: {
-      Export: Export2,
-      Clipboard: Clipboard2
-    },
-    text
-  } = useTheme();
+  const Button2 = useTheme((t) => t.components.Button);
+  const IconButton2 = useTheme((t) => t.components.IconButton);
+  const Popover = useTheme((t) => t.components.Popover);
+  const Export2 = useTheme((t) => t.icons.Export);
+  const Clipboard2 = useTheme((t) => t.icons.Clipboard);
+  const exportTitle = useTheme((t) => t.text.exportTitle);
+  const exportCopy = useTheme((t) => t.text.exportCopy);
+  const exportDownload = useTheme((t) => t.text.exportDownload);
   const cssVariables = useCssVariables();
   const [anchor, setAnchor] = react.useState(null);
   const generate = (options) => {
@@ -854,7 +1126,7 @@ function Export$1() {
       activeColumns,
       activeItems
     } = table.getState();
-    const data = [activeColumns.map((column) => String(column.id)), ...activeItems.map((item) => activeColumns.map((column) => column.exportCell(column.value(item), item)))];
+    const data = [activeColumns.map((column) => String(column.id)), ...activeItems.map((item) => activeColumns.map((column) => column.exportCell(column.value(item.value), item.value)))];
     return csvExport(data, options);
   };
   const copy = () => {
@@ -868,225 +1140,97 @@ function Export$1() {
     a.click();
     document.body.removeChild(a);
   };
-  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [jsxRuntime.jsx(IconButton2, {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/* @__PURE__ */ jsxRuntime.jsx(IconButton2, {
       onClick: (e) => setAnchor(anchor ? null : e.currentTarget),
-      children: jsxRuntime.jsx(Export2, {
+      children: /* @__PURE__ */ jsxRuntime.jsx(Export2, {
         css: !!anchor && {
           color: "var(--primaryMain)"
         }
       })
-    }), jsxRuntime.jsx(Popover, {
-      open: !!anchor,
-      onClose: () => setAnchor(null),
-      anchorEl: anchor,
-      css: cssVariables,
-      children: jsxRuntime.jsxs("div", {
-        css: {
-          padding: `calc(var(--spacing) * 2)`,
-          display: "grid",
-          justifyItems: "stretch",
-          gap: "var(--spacing)",
-          "& > *": {
-            justifyContent: "start"
-          }
-        },
-        children: [jsxRuntime.jsx("div", {
-          css: {
-            marginBottom: "var(--spacing)"
-          },
-          children: text.exportTitle
-        }), jsxRuntime.jsx(Button2, {
-          startIcon: jsxRuntime.jsx(Clipboard2, {}),
-          onClick: copy,
-          children: text.exportCopy
-        }), jsxRuntime.jsx(Button2, {
-          startIcon: jsxRuntime.jsx(Export2, {}),
-          onClick: download,
-          children: text.exportDownload
-        })]
-      })
-    })]
-  });
-}
-const FilterControlContext = react.createContext(() => void 0);
-function FilterControl() {
-  const table = useTableContext();
-  const columnId = useColumnContext();
-  const {
-    components: {
-      IconButton: IconButton2,
-      Popover
-    },
-    icons: {
-      FilterList: FilterList2,
-      ArrowDropDown: ArrowDropDown2
-    }
-  } = useTheme();
-  const cssVariables = useCssVariables();
-  const [anchor, setAnchor] = react.useState(null);
-  const isActive = table.useState((state) => {
-    const filter2 = state.filters.get(columnId);
-    const filterValue = state.filterValues.get(columnId);
-    return filter2 !== void 0 && filterValue !== void 0 && filter2.isActive(filterValue);
-  });
-  const filter = table.useState((state) => {
-    var _a;
-    return (_a = state.activeColumns.find((column) => column.id === columnId)) == null ? void 0 : _a.filter;
-  });
-  function reset() {
-    table.update((state) => {
-      state.filterValues.delete(columnId);
-    });
-  }
-  const close = react.useCallback(function() {
-    setAnchor(null);
-  }, []);
-  if (!filter)
-    return null;
-  return jsxRuntime.jsxs(FilterControlContext.Provider, {
-    value: close,
-    children: [jsxRuntime.jsx("div", {
-      onClick: (e) => setAnchor(e.currentTarget),
-      onContextMenu: (e) => {
-        reset();
-        e.preventDefault();
-        return false;
-      },
-      children: jsxRuntime.jsx(IconButton2, {
-        css: [{
-          color: "#b0bac9"
-        }, isActive && {
-          color: "var(--primaryMain) !important"
-        }],
-        children: isActive ? jsxRuntime.jsx(FilterList2, {}) : jsxRuntime.jsx(ArrowDropDown2, {})
-      })
-    }), jsxRuntime.jsx("div", {
-      onPointerDown: (e) => {
-        e.stopPropagation();
-      },
-      onPointerMove: (e) => {
-        e.stopPropagation();
-      },
-      children: jsxRuntime.jsx(Popover, {
-        open: true,
-        hidden: !anchor,
-        onClose: () => setAnchor(null),
-        anchorEl: anchor != null ? anchor : document.body,
-        css: cssVariables,
-        children: filter
+    }), /* @__PURE__ */ jsxRuntime.jsx(Popover, {
+      open: !!anchor,
+      onClose: () => setAnchor(null),
+      anchorEl: anchor,
+      css: cssVariables,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
+        css: {
+          padding: `calc(var(--spacing) * 2)`,
+          display: "grid",
+          justifyItems: "stretch",
+          gap: "var(--spacing)",
+          "& > *": {
+            justifyContent: "start"
+          }
+        },
+        children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
+          css: {
+            marginBottom: "var(--spacing)"
+          },
+          children: exportTitle
+        }), /* @__PURE__ */ jsxRuntime.jsx(Button2, {
+          startIcon: /* @__PURE__ */ jsxRuntime.jsx(Clipboard2, {}),
+          onClick: copy,
+          children: exportCopy
+        }), /* @__PURE__ */ jsxRuntime.jsx(Button2, {
+          startIcon: /* @__PURE__ */ jsxRuntime.jsx(Export2, {}),
+          onClick: download,
+          children: exportDownload
+        })]
       })
     })]
   });
 }
-function ResizeHandle() {
-  const table = useTableContext();
-  const columnId = useColumnContext();
-  const enabled = table.useState("props.enableColumnResize");
-  function onPointerDown(e) {
-    e.stopPropagation();
-    const div = e.target;
-    div.setPointerCapture(e.pointerId);
-  }
-  function onPointerMove(e) {
-    e.stopPropagation();
-    const div = e.target;
-    if (!div.hasPointerCapture(e.pointerId))
-      return;
-    const parent = div.parentElement;
-    const width = Math.max(e.clientX - parent.getBoundingClientRect().left + 5, 50);
-    table.update((state) => {
-      state.columnWidths.set(columnId, `${width}px`);
-    });
-  }
-  function onPointerUp(e) {
-    e.stopPropagation();
-    const div = e.target;
-    div.releasePointerCapture(e.pointerId);
-  }
-  function onDoubleClick(e) {
-    table.update((state) => {
-      if (e.getModifierState("Control")) {
-        state.columnWidths.delete(columnId);
-      } else {
-        state.columnWidths.set(columnId, "max-content");
-      }
+const defaultWrapCell = (content) => {
+  if (typeof content === "string") {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", {
+      css: tableTheme.defaultClasses.text,
+      title: content,
+      children: content
     });
   }
-  return jsxRuntime.jsx(ResizeHandleView, {
-    enabled,
-    onPointerDown: enabled ? onPointerDown : void 0,
-    onPointerMove: enabled ? onPointerMove : void 0,
-    onPointerUp: enabled ? onPointerUp : void 0,
-    onDoubleClick: enabled ? onDoubleClick : void 0
-  });
-}
-function ResizeHandleView(_a) {
-  var _b = _a, {
-    enabled
-  } = _b, props = __objRest(_b, [
-    "enabled"
-  ]);
-  return jsxRuntime.jsx("div", __spreadValues({
-    css: {
-      alignSelf: "stretch",
-      padding: "0 5px",
-      cursor: enabled ? "col-resize" : "initial",
-      display: "flex",
-      alignItems: "center",
-      "&:after": {
-        content: '""',
-        width: 1,
-        height: "1.5em",
-        background: "#c9cfda",
-        transition: "transform 300ms"
-      }
-    }
-  }, props));
-}
+  return content;
+};
 const Cell = react.memo(function Cell2({
   itemId,
   rowIndex
 }) {
-  var _a, _b;
+  var _a;
   const table = useTableContext();
   const columnId = useColumnContext();
-  const {
-    classes
-  } = useTheme();
-  const column = table.useState((state) => state.activeColumns.find((column2) => column2.id === columnId));
+  const column = table.useState((state) => {
+    const col = state.activeColumns.find((column2) => column2.id === columnId);
+    return col && {
+      value: col.value,
+      renderCell: col.renderCell
+    };
+  });
+  const wrapCell = (_a = table.useState((state) => state.props.wrapCell)) != null ? _a : defaultWrapCell;
   const item = table.useState((state) => state.activeItemsById.get(itemId));
   const columnStyleOverride = table.useState((state) => state.columnStyleOverride.get(columnId), {
     throttle: 16
   });
+  react.useLayoutEffect(() => {
+    var _a2, _b;
+    return (_b = (_a2 = table.getState().props).debugRender) == null ? void 0 : _b.call(_a2, "render cell", itemId, columnId);
+  });
+  const className2 = useTheme((t) => cx(...calcClassNames(t.classes, item, rowIndex)));
   if (!column || !item)
     return null;
-  (_b = (_a = table.getState().props).debugRender) == null ? void 0 : _b.call(_a, "render cell", itemId, columnId);
-  const classNames = [...calcClassNames(classes, item, rowIndex), ...calcClassNames(column == null ? void 0 : column.classes, item, rowIndex)];
-  const content = column.renderCell(column.value(item), item);
-  return jsxRuntime.jsx("div", {
-    className: cx(...classNames),
-    css: [tableTheme.defaultClasses.cell, classNames, columnStyleOverride],
-    children: typeof content === "string" ? jsxRuntime.jsx("span", {
-      css: tableTheme.defaultClasses.text,
-      title: content,
-      children: content
-    }) : content
+  const content = column.renderCell(column.value(item.value), item.value);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    className: className2,
+    css: [tableTheme.defaultClasses.cell, columnStyleOverride],
+    children: wrapCell(content, column.value(item.value), item.value, rowIndex)
   });
 });
 function ExpandControl({
   itemId,
   hasDeferredChildren
 }) {
-  const {
-    components: {
-      IconButton: IconButton2,
-      Spinner: Spinner2
-    },
-    icons: {
-      ChevronRight: ChevronRight2
-    }
-  } = useTheme();
+  const IconButton2 = useTheme((t) => t.components.IconButton);
+  const Spinner2 = useTheme((t) => t.components.Spinner);
+  const ChevronRight2 = useTheme((t) => t.icons.ChevronRight);
   const table = useTableContext();
   const isExpanded = table.useState((state) => state.expanded.has(itemId));
   const hasChildren = table.useState((state) => {
@@ -1123,21 +1267,21 @@ function ExpandControl({
     }
   }
   if (isExpanded && hasDeferredChildren && !hasChildren) {
-    return jsxRuntime.jsx(Spinner2, {
+    return /* @__PURE__ */ jsxRuntime.jsx(Spinner2, {
       css: {
         margin: "0 var(--spacing)"
       }
     });
   }
-  return jsxRuntime.jsx(IconButton2, {
+  return /* @__PURE__ */ jsxRuntime.jsx(IconButton2, {
     onClick: toggle2,
-    children: jsxRuntime.jsx("span", {
+    children: /* @__PURE__ */ jsxRuntime.jsx("span", {
       css: {
         display: "inline-flex",
         transition: "all 300ms",
         transform: isExpanded ? "rotate3d(0, 0, 1, 90deg)" : "rotate3d(0, 0, 1, 0deg)"
       },
-      children: jsxRuntime.jsx(ChevronRight2, {})
+      children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRight2, {})
     })
   });
 }
@@ -1145,11 +1289,7 @@ function SelectComponent({
   itemId
 }) {
   const table = useTableContext();
-  const {
-    components: {
-      Checkbox: Checkbox2
-    }
-  } = useTheme();
+  const Checkbox2 = useTheme((t) => t.components.Checkbox);
   const isSelected = table.useState((state) => {
     const itemIds = itemId ? [itemId] : Array.from(state.activeItemsById.keys());
     return state.activeItemsById.size > 0 && itemIds.every((itemId2) => state.selection.has(itemId2));
@@ -1201,7 +1341,7 @@ function SelectComponent({
       state.lastSelectedId = itemId;
     });
   }
-  return jsxRuntime.jsx(Checkbox2, {
+  return /* @__PURE__ */ jsxRuntime.jsx(Checkbox2, {
     css: {
       justifySelf: "start",
       color: "#c9cfda"
@@ -1217,9 +1357,9 @@ const Row = react.memo(function Row2({
   itemId,
   rowIndex
 }) {
-  var _a, _b;
   const table = useTableContext();
   const divRef = react.useRef(null);
+  const classes = useTheme((t) => t.classes);
   const {
     className: className2,
     indent,
@@ -1229,17 +1369,16 @@ const Row = react.memo(function Row2({
     enableSelection,
     rowAction
   } = table.useState((state) => {
-    var _a2, _b2;
+    var _a, _b;
     const item = state.activeItemsById.get(itemId);
-    const index = !item ? -1 : state.activeItems.indexOf(item);
     return {
-      className: cx(...calcClassNames(state.props.classes, item, index)),
+      className: cx(...calcClassNames(classes, item, rowIndex)),
       indent: item ? getAncestors(state.activeItemsById, item).size : 0,
       hasChildren: !!(item == null ? void 0 : item.children.length),
-      hasDeferredChildren: item && ((_b2 = (_a2 = state.props).hasDeferredChildren) == null ? void 0 : _b2.call(_a2, item)),
+      hasDeferredChildren: item && ((_b = (_a = state.props).hasDeferredChildren) == null ? void 0 : _b.call(_a, item.value)),
       columnIds: state.activeColumns.map((column) => column.id),
       enableSelection: state.props.enableSelection,
-      rowAction: state.props.rowAction instanceof Function ? item ? state.props.rowAction(item, index) : null : state.props.rowAction
+      rowAction: state.props.rowAction instanceof Function ? item ? state.props.rowAction(item.value, rowIndex) : null : state.props.rowAction
     };
   });
   react.useEffect(() => {
@@ -1256,117 +1395,40 @@ const Row = react.memo(function Row2({
     o.observe(div);
     return () => o.disconnect();
   }, [divRef.current]);
-  (_b = (_a = table.getState().props).debugRender) == null ? void 0 : _b.call(_a, "render row", itemId);
-  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [jsxRuntime.jsx("div", {
+  react.useLayoutEffect(() => {
+    var _a, _b;
+    return (_b = (_a = table.getState().props).debugRender) == null ? void 0 : _b.call(_a, "render row", itemId);
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
       className: className2,
       css: [tableTheme.defaultClasses.cellFill],
       ref: divRef
-    }), jsxRuntime.jsxs("div", {
+    }), /* @__PURE__ */ jsxRuntime.jsxs("div", {
       className: className2,
       css: [tableTheme.defaultClasses.cell, tableTheme.defaultClasses.firstCell],
-      children: [jsxRuntime.jsx("div", {
+      children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
         css: {
           width: indent * 20
         }
-      }), enableSelection && jsxRuntime.jsx(SelectComponent, {
+      }), enableSelection && /* @__PURE__ */ jsxRuntime.jsx(SelectComponent, {
         itemId
-      }), (hasChildren || hasDeferredChildren) && jsxRuntime.jsx(ExpandControl, {
+      }), (hasChildren || hasDeferredChildren) && /* @__PURE__ */ jsxRuntime.jsx(ExpandControl, {
         itemId,
         hasDeferredChildren
       }), rowAction]
-    }), columnIds.map((columnId) => jsxRuntime.jsx(ColumnContext.Provider, {
+    }), columnIds.map((columnId) => /* @__PURE__ */ jsxRuntime.jsx(ColumnContext.Provider, {
       value: columnId,
-      children: jsxRuntime.jsx(Cell, {
+      children: /* @__PURE__ */ jsxRuntime.jsx(Cell, {
         itemId,
         rowIndex
       })
-    }, columnId)), jsxRuntime.jsx("div", {
+    }, columnId)), /* @__PURE__ */ jsxRuntime.jsx("div", {
       className: className2,
       css: [tableTheme.defaultClasses.cellFill]
     })]
   });
 });
-function SortComponent({
-  children
-}) {
-  const table = useTableContext();
-  const columnId = useColumnContext();
-  const {
-    components: {
-      Badge: Badge2
-    },
-    icons: {
-      ArrowUpward: ArrowUpward2
-    }
-  } = useTheme();
-  const {
-    direction,
-    index
-  } = table.useState((state) => {
-    var _a, _b;
-    const index2 = (_a = state.sort.findIndex((s) => s.columnId === columnId)) != null ? _a : -1;
-    return {
-      direction: (_b = state.sort[index2]) == null ? void 0 : _b.direction,
-      index: index2 >= 0 && state.sort.length > 1 ? index2 + 1 : void 0
-    };
-  });
-  function toggle2(e, off) {
-    const {
-      props: {
-        sort: controlledSort,
-        onSortChange
-      }
-    } = table.getState();
-    const newDirection = direction === "asc" ? "desc" : "asc";
-    const newSort = e.getModifierState("Control") || off ? table.getState().sort.filter((s) => s.columnId !== columnId) : [];
-    if (!off) {
-      newSort.push({
-        columnId,
-        direction: newDirection
-      });
-    }
-    onSortChange == null ? void 0 : onSortChange(newSort);
-    if (!controlledSort) {
-      table.update((state) => {
-        state.sort = newSort;
-      });
-    }
-    e.preventDefault();
-    return false;
-  }
-  return jsxRuntime.jsxs("div", {
-    css: {
-      userSelect: "none",
-      display: "grid",
-      gridTemplateColumns: "minmax(0, 1fr) max-content",
-      alignItems: "center",
-      cursor: "pointer",
-      "& > div": {
-        overflow: "hidden",
-        textOverflow: "ellipsis"
-      }
-    },
-    onClick: (e) => toggle2(e),
-    onContextMenu: (e) => toggle2(e, true),
-    children: [jsxRuntime.jsx("div", {
-      children
-    }), jsxRuntime.jsx(Badge2, {
-      badgeContent: index,
-      children: jsxRuntime.jsx("span", {
-        css: [{
-          transition: "all 300ms",
-          fontSize: "0.8em"
-        }, !direction && {
-          opacity: 0
-        }, direction === "desc" && {
-          transform: "rotate3d(0, 0, 1, 180deg)"
-        }],
-        children: jsxRuntime.jsx(ArrowUpward2, {})
-      })
-    })]
-  });
-}
 function throttle(fn, ms) {
   let last = 0;
   let lastArgs;
@@ -1393,6 +1455,11 @@ function throttle(fn, ms) {
       if (lastArgs) {
         run();
       }
+    },
+    cancel() {
+      if (timeout) {
+        clearTimeout(timeout);
+      }
     }
   });
 }
@@ -1414,12 +1481,14 @@ const relativeOffset = (x, y) => {
 function Virtualized(_c) {
   var _d = _c, {
     header,
+    footer,
     children
   } = _d, props = __objRest(_d, [
     "header",
+    "footer",
     "children"
   ]);
-  var _a, _b, _c2, _d2;
+  var _a, _b;
   const table = useTableContext();
   const virtual = table.useState("props.virtual");
   const probeRef = react.useRef(null);
@@ -1493,20 +1562,24 @@ function Virtualized(_c) {
       window.removeEventListener("resize", incCounter, true);
     };
   }, [probeRef.current, incCounter]);
-  (_d2 = (_c2 = table.getState().props).debugRender) == null ? void 0 : _d2.call(_c2, `Virtualalized render ${from} to ${to}`);
-  return jsxRuntime.jsxs("div", __spreadProps(__spreadValues({}, props), {
-    children: [header, virtual && jsxRuntime.jsx("div", {
+  react.useEffect(() => incCounter.cancel, [incCounter]);
+  react.useLayoutEffect(() => {
+    var _a2, _b2;
+    return (_b2 = (_a2 = table.getState().props).debugRender) == null ? void 0 : _b2.call(_a2, `Virtualalized render ${from} to ${to}`);
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", __spreadProps(__spreadValues({}, props), {
+    children: [header, virtual && /* @__PURE__ */ jsxRuntime.jsx("div", {
       style: {
         gridColumn: "1 / -1",
         height: before
       },
       ref: probeRef
-    }), children(itemIds, from), virtual && jsxRuntime.jsx("div", {
+    }), children(itemIds, from), virtual && /* @__PURE__ */ jsxRuntime.jsx("div", {
       style: {
         gridColumn: "1 / -1",
         height: after
       }
-    })]
+    }), footer]
   }));
 }
 const TableContext = react.createContext(null);
@@ -1524,28 +1597,30 @@ function useColumnContext() {
   return value;
 }
 function Table(props) {
-  var _a, _b;
   const table = useTableState(props);
-  (_b = (_a = table.getState().props).debugRender) == null ? void 0 : _b.call(_a, "render table");
-  return jsxRuntime.jsx(TableContext.Provider, {
+  react.useLayoutEffect(() => {
+    var _a, _b;
+    return (_b = (_a = table.getState().props).debugRender) == null ? void 0 : _b.call(_a, "render table");
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(TableContext.Provider, {
     value: table,
-    children: jsxRuntime.jsx(TableLoadingState, {})
+    children: /* @__PURE__ */ jsxRuntime.jsx(TableMemoContextProvider, {
+      children: /* @__PURE__ */ jsxRuntime.jsx(TableLoadingState, {})
+    })
   });
 }
 function TableLoadingState() {
-  const {
-    text
-  } = useTheme();
+  const loadingText = useTheme((t) => t.text.loading);
   const isHydrated = useTableStateStorage();
   const [showLoading, setShowLoading] = react.useState(false);
   react.useEffect(() => {
     const handle = setTimeout(() => setShowLoading(true), 500);
     return () => clearTimeout(handle);
   });
-  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [!isHydrated && showLoading && jsxRuntime.jsx("div", {
-      children: text.loading
-    }), jsxRuntime.jsx(TableInner, {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [!isHydrated && showLoading && /* @__PURE__ */ jsxRuntime.jsx("div", {
+      children: loadingText
+    }), /* @__PURE__ */ jsxRuntime.jsx(TableInner, {
       hidden: !isHydrated
     })]
   });
@@ -1553,76 +1628,77 @@ function TableLoadingState() {
 const TableInner = react.memo(function TableInner2({
   hidden
 }) {
-  var _a, _b;
   const table = useTableContext();
   const fullWidth = table.useState("props.fullWidth");
   const activeColumns = table.useState((state) => state.activeColumns.map((column) => ({
     id: column.id,
     width: column.width,
-    classes: column.classes,
-    header: column.header
+    classes: column.classes
   })));
   const columnWidths = table.useState("columnWidths", {
     throttle: 16
   });
-  const columnStyleOverride = table.useState("columnStyleOverride", {
-    throttle: 16
-  });
-  const defaultWidth = table.useState("props.defaultWidth");
-  const classes = table.useState("props.classes");
+  const hasFooter = table.useState((state) => state.activeColumns.some((column) => column.footer));
+  const classes = useTheme((theme) => theme.classes);
   const stickyHeader = table.useState("props.stickyHeader");
+  const stickyFooter = table.useState("props.stickyFooter");
   const enableSelection = table.useState("props.enableSelection");
   const enableColumnSelection = table.useState("props.enableColumnSelection");
   const enableExport = table.useState((state) => !!state.props.enableExport.copy || !!state.props.enableExport.download);
   const cssVariables = useCssVariables();
-  (_b = (_a = table.getState().props).debugRender) == null ? void 0 : _b.call(_a, "render table inner");
-  return jsxRuntime.jsx(Virtualized, {
+  react.useLayoutEffect(() => {
+    var _a, _b;
+    return (_b = (_a = table.getState().props).debugRender) == null ? void 0 : _b.call(_a, "render table inner");
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(Virtualized, {
     className: classes == null ? void 0 : classes.table,
     css: [cssVariables, tableTheme.defaultClasses.table, {
       gridTemplateColumns: [
         fullWidth === "right" || fullWidth === true ? "auto" : "0",
         "max-content",
         ...activeColumns.map((column) => {
-          var _a2, _b2, _c;
-          return (_c = (_b2 = (_a2 = columnWidths.get(column.id)) != null ? _a2 : column.width) != null ? _b2 : defaultWidth) != null ? _c : "max-content";
+          var _a, _b;
+          return (_b = (_a = columnWidths.get(column.id)) != null ? _a : column.width) != null ? _b : "max-content";
         }),
         fullWidth === "left" || fullWidth === true ? "auto" : "0"
       ].join(" ")
     }, hidden && {
       visibility: "hidden"
     }],
-    header: jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [jsxRuntime.jsx("div", {
+    header: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
         className: classes == null ? void 0 : classes.headerCell,
         css: [tableTheme.defaultClasses.headerFill, stickyHeader && tableTheme.defaultClasses.sticky, stickyHeader instanceof Object && stickyHeader]
-      }), jsxRuntime.jsxs("div", {
+      }), /* @__PURE__ */ jsxRuntime.jsxs("div", {
         className: classes == null ? void 0 : classes.headerCell,
         css: [tableTheme.defaultClasses.headerCell, stickyHeader && tableTheme.defaultClasses.sticky, stickyHeader instanceof Object && stickyHeader],
-        children: [enableSelection && jsxRuntime.jsx(SelectComponent, {}), enableColumnSelection && jsxRuntime.jsx(ColumnSelection, {}), enableExport && jsxRuntime.jsx(Export$1, {}), jsxRuntime.jsx(ResizeHandleView, {})]
-      }), jsxRuntime.jsx(ColumnHeaderContext.Provider, {
-        children: activeColumns.map((column) => {
-          var _a2;
-          return jsxRuntime.jsx(ColumnContext.Provider, {
-            value: column.id,
-            children: jsxRuntime.jsxs(ColumnHeader, {
-              className: cx(classes == null ? void 0 : classes.headerCell, (_a2 = column.classes) == null ? void 0 : _a2.headerCell),
-              css: [tableTheme.defaultClasses.headerCell, columnStyleOverride.get(column.id), stickyHeader && tableTheme.defaultClasses.sticky, stickyHeader instanceof Object && stickyHeader],
-              children: [jsxRuntime.jsx(SortComponent, {
-                children: column.header
-              }), jsxRuntime.jsx("div", {
-                css: {
-                  flex: 1
-                }
-              }), jsxRuntime.jsx(FilterControl, {}), jsxRuntime.jsx(ResizeHandle, {})]
-            }, column.id)
-          }, column.id);
-        })
-      }), jsxRuntime.jsx("div", {
+        children: [enableSelection && /* @__PURE__ */ jsxRuntime.jsx(SelectComponent, {}), enableColumnSelection && /* @__PURE__ */ jsxRuntime.jsx(ColumnSelection, {}), enableExport && /* @__PURE__ */ jsxRuntime.jsx(Export$1, {}), /* @__PURE__ */ jsxRuntime.jsx(ResizeHandleView, {})]
+      }), /* @__PURE__ */ jsxRuntime.jsx(ColumnHeaderContext.Provider, {
+        children: activeColumns.map((column) => /* @__PURE__ */ jsxRuntime.jsx(ColumnContext.Provider, {
+          value: column.id,
+          children: /* @__PURE__ */ jsxRuntime.jsx(ColumnHeader, {})
+        }, column.id))
+      }), /* @__PURE__ */ jsxRuntime.jsx("div", {
         className: classes == null ? void 0 : classes.headerCell,
         css: [tableTheme.defaultClasses.headerFill, stickyHeader && tableTheme.defaultClasses.sticky, stickyHeader instanceof Object && stickyHeader]
       })]
     }),
-    children: (itemIds, startIndex) => itemIds.map((itemId, index) => jsxRuntime.jsx(Row, {
+    footer: hasFooter && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
+        className: classes == null ? void 0 : classes.footerCell,
+        css: [tableTheme.defaultClasses.footerFill, stickyFooter && tableTheme.defaultClasses.stickyBottom, stickyFooter instanceof Object && stickyFooter]
+      }), /* @__PURE__ */ jsxRuntime.jsx("div", {
+        className: classes == null ? void 0 : classes.footerCell,
+        css: [tableTheme.defaultClasses.footerFill, stickyFooter && tableTheme.defaultClasses.stickyBottom, stickyFooter instanceof Object && stickyFooter]
+      }), activeColumns.map((column) => /* @__PURE__ */ jsxRuntime.jsx(ColumnContext.Provider, {
+        value: column.id,
+        children: /* @__PURE__ */ jsxRuntime.jsx(ColumnFooter, {})
+      }, column.id)), /* @__PURE__ */ jsxRuntime.jsx("div", {
+        className: classes == null ? void 0 : classes.footerCell,
+        css: [tableTheme.defaultClasses.footerFill, stickyFooter && tableTheme.defaultClasses.stickyBottom, stickyFooter instanceof Object && stickyFooter]
+      })]
+    }),
+    children: (itemIds, startIndex) => itemIds.map((itemId, index) => /* @__PURE__ */ jsxRuntime.jsx(Row, {
       itemId,
       rowIndex: startIndex + index
     }, itemId))
@@ -1635,7 +1711,7 @@ const defaultColors = {
 function Spinner({
   className: className2
 }) {
-  return jsxRuntime.jsxs("div", {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
     className: className2,
     css: react$2.css`
         display: inline-block;
@@ -1673,7 +1749,7 @@ function Spinner({
           }
         }
       `,
-    children: [jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", {})]
+    children: [/* @__PURE__ */ jsxRuntime.jsx("div", {}), /* @__PURE__ */ jsxRuntime.jsx("div", {}), /* @__PURE__ */ jsxRuntime.jsx("div", {})]
   });
 }
 const Badge = ({
@@ -1682,14 +1758,14 @@ const Badge = ({
 }) => {
   if (!open)
     return null;
-  return jsxRuntime.jsxs("span", {
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", {
     css: {
       display: "inline-flex",
       position: "relative",
       flexShrink: 0,
       verticalAlign: "middle"
     },
-    children: [children, jsxRuntime.jsx("span", {
+    children: [children, /* @__PURE__ */ jsxRuntime.jsx("span", {
       css: [{
         top: 0,
         right: 0,
@@ -1727,7 +1803,7 @@ const Button = (_e) => {
     "children",
     "variant"
   ]);
-  return jsxRuntime.jsxs("button", __spreadProps(__spreadValues({
+  return /* @__PURE__ */ jsxRuntime.jsxs("button", __spreadProps(__spreadValues({
     css: [{
       padding: `var(--spacing) calc(var(--spacing) * 2)`,
       display: "inline-flex",
@@ -1762,12 +1838,12 @@ const Button = (_e) => {
       }
     }]
   }, props), {
-    children: [startIcon && jsxRuntime.jsx("span", {
+    children: [startIcon && /* @__PURE__ */ jsxRuntime.jsx("span", {
       css: {
         marginRight: `calc(var(--spacing) * 2)`
       },
       children: startIcon
-    }), jsxRuntime.jsx("span", {
+    }), /* @__PURE__ */ jsxRuntime.jsx("span", {
       children
     })]
   }));
@@ -1778,7 +1854,7 @@ const Checkbox = (_g) => {
   } = _h, props = __objRest(_h, [
     "className"
   ]);
-  return jsxRuntime.jsxs("label", {
+  return /* @__PURE__ */ jsxRuntime.jsxs("label", {
     css: [{
       padding: "calc(var(--spacing) * 1.8)",
       display: "flex",
@@ -1792,9 +1868,9 @@ const Checkbox = (_g) => {
       color: "rgba(0, 0, 0, 0.26)"
     }],
     className: className2,
-    children: [jsxRuntime.jsx("input", __spreadValues({
+    children: [/* @__PURE__ */ jsxRuntime.jsx("input", __spreadValues({
       type: "checkbox"
-    }, props)), props.checked ? jsxRuntime.jsx("svg", {
+    }, props)), props.checked ? /* @__PURE__ */ jsxRuntime.jsx("svg", {
       css: {
         fontSize: "1.25rem",
         width: "1em",
@@ -1804,10 +1880,10 @@ const Checkbox = (_g) => {
       focusable: "false",
       viewBox: "0 0 24 24",
       "aria-hidden": "true",
-      children: jsxRuntime.jsx("path", {
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", {
         d: "M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
       })
-    }) : jsxRuntime.jsx("svg", {
+    }) : /* @__PURE__ */ jsxRuntime.jsx("svg", {
       css: {
         fontSize: "1.25rem",
         width: "1em",
@@ -1817,14 +1893,14 @@ const Checkbox = (_g) => {
       focusable: "false",
       viewBox: "0 0 24 24",
       "aria-hidden": "true",
-      children: jsxRuntime.jsx("path", {
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", {
         d: "M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
       })
     })]
   });
 };
 const IconButton = (props) => {
-  return jsxRuntime.jsx("button", __spreadValues({
+  return /* @__PURE__ */ jsxRuntime.jsx("button", __spreadValues({
     css: {
       padding: "var(--spacing)",
       borderRadius: "50%",
@@ -1857,12 +1933,12 @@ const TextField = (_i) => {
   ]);
   var _a;
   const [focus, setFocus] = react.useState(false);
-  return jsxRuntime.jsx("div", {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
     className: className2,
     css: {
       display: "flex"
     },
-    children: jsxRuntime.jsxs("span", {
+    children: /* @__PURE__ */ jsxRuntime.jsxs("span", {
       css: [{
         flex: 1,
         display: "flex",
@@ -1873,7 +1949,7 @@ const TextField = (_i) => {
         border: "2px solid var(--primaryMain)",
         margin: -1
       }],
-      children: [jsxRuntime.jsx("input", __spreadProps(__spreadValues({
+      children: [/* @__PURE__ */ jsxRuntime.jsx("input", __spreadProps(__spreadValues({
         ref: inputRef
       }, props), {
         value: (_a = props.value) != null ? _a : "",
@@ -1907,7 +1983,7 @@ const IconDefaultStyle = react$2.css({
   color: "inherit"
 });
 function Icon(svg) {
-  return (props) => jsxRuntime.jsx(react$2.ClassNames, {
+  return (props) => /* @__PURE__ */ jsxRuntime.jsx(react$2.ClassNames, {
     children: ({
       css: css2
     }) => react.cloneElement(svg, __spreadProps(__spreadValues({}, props), {
@@ -1915,120 +1991,120 @@ function Icon(svg) {
     }))
   });
 }
-const Settings = Icon(jsxRuntime.jsxs("svg", {
+const Settings = Icon(/* @__PURE__ */ jsxRuntime.jsxs("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   height: "24px",
   viewBox: "0 0 24 24",
   width: "24px",
   fill: "currentColor",
-  children: [jsxRuntime.jsx("path", {
+  children: [/* @__PURE__ */ jsxRuntime.jsx("path", {
     d: "M0 0h24v24H0V0z",
     fill: "none"
-  }), jsxRuntime.jsx("path", {
+  }), /* @__PURE__ */ jsxRuntime.jsx("path", {
     d: "M3 17v2h6v-2H3zM3 5v2h10V5H3zm10 16v-2h8v-2h-8v-2h-2v6h2zM7 9v2H3v2h4v2h2V9H7zm14 4v-2H11v2h10zm-6-4h2V7h4V5h-4V3h-2v6z"
   })]
 }));
-const Export = Icon(jsxRuntime.jsxs("svg", {
+const Export = Icon(/* @__PURE__ */ jsxRuntime.jsxs("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   enableBackground: "new 0 0 24 24",
   height: "24px",
   viewBox: "0 0 24 24",
   width: "24px",
   fill: "currentColor",
-  children: [jsxRuntime.jsx("g", {
-    children: jsxRuntime.jsx("rect", {
+  children: [/* @__PURE__ */ jsxRuntime.jsx("g", {
+    children: /* @__PURE__ */ jsxRuntime.jsx("rect", {
       fill: "none",
       height: "24",
       width: "24"
     })
-  }), jsxRuntime.jsx("g", {
-    children: jsxRuntime.jsx("path", {
+  }), /* @__PURE__ */ jsxRuntime.jsx("g", {
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", {
       d: "M18,15v3H6v-3H4v3c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2v-3H18z M17,11l-1.41-1.41L13,12.17V4h-2v8.17L8.41,9.59L7,11l5,5 L17,11z"
     })
   })]
 }));
-const Clipboard = Icon(jsxRuntime.jsxs("svg", {
+const Clipboard = Icon(/* @__PURE__ */ jsxRuntime.jsxs("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   height: "24px",
   viewBox: "0 0 24 24",
   width: "24px",
   fill: "currentColor",
-  children: [jsxRuntime.jsx("path", {
+  children: [/* @__PURE__ */ jsxRuntime.jsx("path", {
     d: "M0 0h24v24H0V0z",
     fill: "none"
-  }), jsxRuntime.jsx("path", {
+  }), /* @__PURE__ */ jsxRuntime.jsx("path", {
     d: "M19 2h-4.18C14.4.84 13.3 0 12 0S9.6.84 9.18 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm7 18H5V4h2v3h10V4h2v16z"
   })]
 }));
-const ChevronRight = Icon(jsxRuntime.jsxs("svg", {
+const ChevronRight = Icon(/* @__PURE__ */ jsxRuntime.jsxs("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   height: "24px",
   viewBox: "0 0 24 24",
   width: "24px",
   fill: "currentColor",
-  children: [jsxRuntime.jsx("path", {
+  children: [/* @__PURE__ */ jsxRuntime.jsx("path", {
     d: "M0 0h24v24H0V0z",
     fill: "none"
-  }), jsxRuntime.jsx("path", {
+  }), /* @__PURE__ */ jsxRuntime.jsx("path", {
     d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6-6-6z"
   })]
 }));
-const Search = Icon(jsxRuntime.jsxs("svg", {
+const Search = Icon(/* @__PURE__ */ jsxRuntime.jsxs("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   height: "24px",
   viewBox: "0 0 24 24",
   width: "24px",
   fill: "currentColor",
-  children: [jsxRuntime.jsx("path", {
+  children: [/* @__PURE__ */ jsxRuntime.jsx("path", {
     d: "M0 0h24v24H0V0z",
     fill: "none"
-  }), jsxRuntime.jsx("path", {
+  }), /* @__PURE__ */ jsxRuntime.jsx("path", {
     d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
   })]
 }));
-const Clear = Icon(jsxRuntime.jsxs("svg", {
+const Clear = Icon(/* @__PURE__ */ jsxRuntime.jsxs("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   height: "24px",
   viewBox: "0 0 24 24",
   width: "24px",
   fill: "currentColor",
-  children: [jsxRuntime.jsx("path", {
+  children: [/* @__PURE__ */ jsxRuntime.jsx("path", {
     d: "M0 0h24v24H0V0z",
     fill: "none"
-  }), jsxRuntime.jsx("path", {
+  }), /* @__PURE__ */ jsxRuntime.jsx("path", {
     d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
   })]
 }));
-const ArrowDropDown = Icon(jsxRuntime.jsxs("svg", {
+const ArrowDropDown = Icon(/* @__PURE__ */ jsxRuntime.jsxs("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   height: "24px",
   viewBox: "0 0 24 24",
   width: "24px",
   fill: "currentColor",
-  children: [jsxRuntime.jsx("path", {
+  children: [/* @__PURE__ */ jsxRuntime.jsx("path", {
     d: "M0 0h24v24H0V0z",
     fill: "none"
-  }), jsxRuntime.jsx("path", {
+  }), /* @__PURE__ */ jsxRuntime.jsx("path", {
     d: "M7 10l5 5 5-5H7z"
   })]
 }));
-const FilterList = Icon(jsxRuntime.jsx("svg", {
+const FilterList = Icon(/* @__PURE__ */ jsxRuntime.jsx("svg", {
   viewBox: "0 0 24 24",
-  children: jsxRuntime.jsx("path", {
+  children: /* @__PURE__ */ jsxRuntime.jsx("path", {
     fill: "currentColor",
     d: "M14,12V19.88C14.04,20.18 13.94,20.5 13.71,20.71C13.32,21.1 12.69,21.1 12.3,20.71L10.29,18.7C10.06,18.47 9.96,18.16 10,17.87V12H9.97L4.21,4.62C3.87,4.19 3.95,3.56 4.38,3.22C4.57,3.08 4.78,3 5,3V3H19V3C19.22,3 19.43,3.08 19.62,3.22C20.05,3.56 20.13,4.19 19.79,4.62L14.03,12H14Z"
   })
 }));
-const ArrowUpward = Icon(jsxRuntime.jsxs("svg", {
+const ArrowUpward = Icon(/* @__PURE__ */ jsxRuntime.jsxs("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   height: "24px",
   viewBox: "0 0 24 24",
   width: "24px",
   fill: "currentColor",
-  children: [jsxRuntime.jsx("path", {
+  children: [/* @__PURE__ */ jsxRuntime.jsx("path", {
     d: "M0 0h24v24H0V0z",
     fill: "none"
-  }), jsxRuntime.jsx("path", {
+  }), /* @__PURE__ */ jsxRuntime.jsx("path", {
     d: "M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"
   })]
 }));
@@ -2063,26 +2139,45 @@ const defaultTableTheme = {
   spacing: "5px"
 };
 const emptyStore = new react$1.Store(void 0);
-function useTheme() {
+function useTheme(selector) {
   var _a, _b;
-  const table = react.useContext(TableContext);
-  const localTheme = (_b = (_a = table == null ? void 0 : table.useState((state) => ({
-    text: state.props.text,
-    classes: state.props.classes,
-    components: state.props.components,
-    icons: state.props.icons,
-    colors: state.props.colors,
-    spacing: state.props.spacing
-  }))) != null ? _a : emptyStore.useState()) != null ? _b : {};
   const contextTableTheme = react.useContext(tableTheme.TableThemeContext);
-  return tableTheme.mergeThemes(defaultTableTheme, tableTheme.globalTableTheme, contextTableTheme, localTheme);
+  const table = react.useContext(TableContext);
+  const columnId = react.useContext(ColumnContext);
+  const memo = useTableMemo();
+  const process = (t) => {
+    var _a2;
+    const cell = (_a2 = t.classes) == null ? void 0 : _a2.cell;
+    const selected = t.text.selected;
+    return __spreadProps(__spreadValues({}, t), {
+      classes: __spreadProps(__spreadValues({}, t.classes), {
+        cell: cell instanceof Function || Array.isArray(cell) ? memo("theme.classes.cell", cell) : cell
+      }),
+      text: __spreadProps(__spreadValues({}, t.text), {
+        selected: selected instanceof Function || Array.isArray(selected) ? memo("theme.text.selected", selected) : selected
+      })
+    });
+  };
+  const theme = (_b = (_a = table == null ? void 0 : table.useState((state) => {
+    const localTheme = {
+      text: state.props.text,
+      classes: state.props.classes,
+      components: state.props.components,
+      icons: state.props.icons,
+      colors: state.props.colors,
+      spacing: state.props.spacing
+    };
+    const column = state.activeColumns.find((column2) => column2.id === columnId);
+    const columnsTheme = {
+      classes: column == null ? void 0 : column.classes
+    };
+    const theme2 = tableTheme.mergeThemes(defaultTableTheme, tableTheme.globalTableTheme, contextTableTheme, localTheme, columnsTheme);
+    return selector(process(theme2));
+  })) != null ? _a : emptyStore.useState()) != null ? _b : selector(process(tableTheme.mergeThemes(defaultTableTheme, tableTheme.globalTableTheme, contextTableTheme)));
+  return theme;
 }
 function AutoFocusTextField(props) {
-  const {
-    components: {
-      TextField: TextField2
-    }
-  } = useTheme();
+  const TextField2 = useTheme((t) => t.components.TextField);
   const ref = react.useRef(null);
   const {
     visible
@@ -2092,7 +2187,7 @@ function AutoFocusTextField(props) {
       ref.current.focus();
     }
   }, [visible]);
-  return jsxRuntime.jsx(TextField2, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ jsxRuntime.jsx(TextField2, __spreadProps(__spreadValues({}, props), {
     inputRef: ref
   }));
 }
@@ -2150,7 +2245,7 @@ function DateInput({
   }), [locale]);
   const parts = format.formatToParts(value != null ? value : defaultDate);
   const isEmpty = !value;
-  return jsxRuntime.jsx("div", {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
     css: {
       display: "flex",
       alignItems: "baseline"
@@ -2158,8 +2253,8 @@ function DateInput({
     children: parts.map(({
       type,
       value: value2
-    }, index) => jsxRuntime.jsx(react.Fragment, {
-      children: isIncludedType(type) ? jsxRuntime.jsx("input", {
+    }, index) => /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, {
+      children: isIncludedType(type) ? /* @__PURE__ */ jsxRuntime.jsx("input", {
         className,
         css: {
           width: `${length(type, value2)}ch`,
@@ -2186,7 +2281,7 @@ function DateInput({
         },
         onFocus: (e) => e.target.select(),
         onBlur: commit
-      }) : type === "literal" ? jsxRuntime.jsx("span", {
+      }) : type === "literal" ? /* @__PURE__ */ jsxRuntime.jsx("span", {
         children: value2
       }) : null
     }, index))
@@ -2242,16 +2337,12 @@ function DatePicker({
   locale,
   firstDayOfWeek = 0
 }) {
-  const {
-    components: {
-      Button: Button2,
-      IconButton: IconButton2
-    },
-    icons: {
-      ChevronRight: ChevronRight2
-    },
-    text
-  } = useTheme();
+  const Button2 = useTheme((t) => t.components.Button);
+  const IconButton2 = useTheme((t) => t.components.IconButton);
+  const ChevronRight2 = useTheme((t) => t.icons.ChevronRight);
+  const textToday = useTheme((t) => t.text.today);
+  const textThisWeek = useTheme((t) => t.text.thisWeek);
+  const textReset = useTheme((t) => t.text.reset);
   const [baseDate] = react.useState(new Date());
   const [dateInView, setDateInView] = react.useState(baseDate);
   const [dirty, setDirty] = react.useState();
@@ -2328,8 +2419,8 @@ function DatePicker({
     });
     return (year) => format(new Date(year, 0, 1));
   }, [locale]);
-  return jsxRuntime.jsxs("div", {
-    children: [jsxRuntime.jsxs("div", {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
+    children: [/* @__PURE__ */ jsxRuntime.jsxs("div", {
       css: {
         display: "grid",
         gridAutoFlow: "column",
@@ -2337,12 +2428,12 @@ function DatePicker({
         alignItems: "baseline",
         gap: "var(--spacing)"
       },
-      children: [jsxRuntime.jsx(DateInput, {
+      children: [/* @__PURE__ */ jsxRuntime.jsx(DateInput, {
         value: min != null ? min : null,
         onChange: (date) => set(date != null ? date : void 0, max, "min"),
         locale
-      }), rangeSelect && jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [" - ", jsxRuntime.jsx(DateInput, {
+      }), rangeSelect && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [" - ", /* @__PURE__ */ jsxRuntime.jsx(DateInput, {
           value: max != null ? max : null,
           onChange: (date) => set(min, date != null ? date : void 0, "max"),
           locale
@@ -2352,11 +2443,11 @@ function DatePicker({
       month,
       year,
       weeks
-    }) => jsxRuntime.jsxs("div", {
+    }) => /* @__PURE__ */ jsxRuntime.jsxs("div", {
       css: {
         display: "grid"
       },
-      children: [jsxRuntime.jsxs("div", {
+      children: [/* @__PURE__ */ jsxRuntime.jsxs("div", {
         css: {
           margin: "calc(var(--spacing) * 4) 0",
           display: "grid",
@@ -2364,32 +2455,32 @@ function DatePicker({
           justifyContent: "space-between",
           alignItems: "center"
         },
-        children: [jsxRuntime.jsx(IconButton2, __spreadProps(__spreadValues({}, getBackProps({
+        children: [/* @__PURE__ */ jsxRuntime.jsx(IconButton2, __spreadProps(__spreadValues({}, getBackProps({
           calendars
         })), {
-          children: jsxRuntime.jsx(ChevronRight2, {
+          children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRight2, {
             css: {
               transform: "rotate3d(0, 0, 1, 180deg)"
             }
           })
-        })), jsxRuntime.jsxs("div", {
+        })), /* @__PURE__ */ jsxRuntime.jsxs("div", {
           css: {
             display: "flex"
           },
           children: [formatMonth(month), " ", formatYear(year)]
-        }), jsxRuntime.jsx(IconButton2, __spreadProps(__spreadValues({}, getForwardProps({
+        }), /* @__PURE__ */ jsxRuntime.jsx(IconButton2, __spreadProps(__spreadValues({}, getForwardProps({
           calendars
         })), {
-          children: jsxRuntime.jsx(ChevronRight2, {})
+          children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRight2, {})
         }))]
-      }), jsxRuntime.jsxs("div", {
+      }), /* @__PURE__ */ jsxRuntime.jsxs("div", {
         css: {
           justifySelf: "center",
           display: "grid",
           gridTemplateColumns: "repeat(7, max-content)",
           fontWeight: "bold"
         },
-        children: [weekDays.map((_v, weekDay) => jsxRuntime.jsx("div", {
+        children: [weekDays.map((_v, weekDay) => /* @__PURE__ */ jsxRuntime.jsx("div", {
           css: {
             justifySelf: "center",
             marginBottom: "var(--spacing)"
@@ -2397,7 +2488,7 @@ function DatePicker({
           children: formatWeekday(weekDay)
         }, weekDay)), weeks.map((week, index) => week.map((dateObj, dayIndex) => {
           if (!dateObj) {
-            return jsxRuntime.jsx("div", {});
+            return /* @__PURE__ */ jsxRuntime.jsx("div", {});
           }
           const {
             prevMonth,
@@ -2416,7 +2507,7 @@ function DatePicker({
             min: hovered,
             max: min
           }));
-          return jsxRuntime.jsx("button", __spreadProps(__spreadValues({
+          return /* @__PURE__ */ jsxRuntime.jsx("button", __spreadProps(__spreadValues({
             css: [{
               padding: 10,
               border: "1px solid transparent",
@@ -2452,34 +2543,34 @@ function DatePicker({
           }), `${index}-${dayIndex}`);
         }))]
       })]
-    }, `${month}${year}`)), jsxRuntime.jsxs("div", {
+    }, `${month}${year}`)), /* @__PURE__ */ jsxRuntime.jsxs("div", {
       css: {
         marginTop: "var(--spacing)",
         display: "grid",
         gridAutoFlow: "column",
         justifyContent: "center"
       },
-      children: [jsxRuntime.jsx(Button2, {
+      children: [/* @__PURE__ */ jsxRuntime.jsx(Button2, {
         variant: "text",
         onClick: () => {
           setDirty(void 0);
           onChange(today());
         },
-        children: text.today
-      }), jsxRuntime.jsx(Button2, {
+        children: textToday
+      }), /* @__PURE__ */ jsxRuntime.jsx(Button2, {
         variant: "text",
         onClick: () => {
           setDirty(void 0);
           onChange(thisWeek(firstDayOfWeek));
         },
-        children: text.thisWeek
-      }), jsxRuntime.jsx(Button2, {
+        children: textThisWeek
+      }), /* @__PURE__ */ jsxRuntime.jsx(Button2, {
         variant: "text",
         onClick: () => {
           setDirty(void 0);
           onChange(null);
         },
-        children: text.reset
+        children: textReset
       })]
     })]
   });
@@ -2531,12 +2622,12 @@ function DateFilter(_k) {
       return dateIntersect(filterValue, value2);
     }
   }));
-  return jsxRuntime.jsx("div", {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
     css: {
       padding: "calc(var(--spacing) * 2)",
       display: "grid"
     },
-    children: jsxRuntime.jsx(DatePicker, {
+    children: /* @__PURE__ */ jsxRuntime.jsx(DatePicker, {
       rangeSelect: !singleSelect,
       value,
       onChange,
@@ -2566,34 +2657,18 @@ function SelectFilter(_m) {
     "render",
     "singleSelect"
   ]);
-  const {
-    components: {
-      IconButton: IconButton2,
-      Checkbox: Checkbox2
-    },
-    icons: {
-      Search: Search2,
-      Clear: Clear2
-    },
-    text
-  } = useTheme();
+  const IconButton2 = useTheme((t) => t.components.IconButton);
+  const Checkbox2 = useTheme((t) => t.components.Checkbox);
+  const Search2 = useTheme((t) => t.icons.Search);
+  const Clear2 = useTheme((t) => t.icons.Clear);
+  const selected = useTheme((t) => t.text.selected);
+  const noResults = useTheme((t) => t.text.noResults);
   const table = useTableContext();
   const columnId = useColumnContext();
-  const options = table.useState((state) => {
-    var _a;
-    if (providedOptions)
-      return uniq(providedOptions);
-    const column = state.activeColumns.find((column2) => column2.id === columnId);
-    if (!column)
-      return [];
-    const filterBy = (_a = props.filterBy) != null ? _a : (x) => x;
-    return uniq(flatMap(state.items, (item) => castArray(filterBy(column.value(item), item))));
-  });
-  const [query, setQuery] = react.useState("");
-  const filtered = options.filter((option) => !query || stringValue(option).toLowerCase().includes(query.toLowerCase()));
   const {
     value = /* @__PURE__ */ new Set(),
-    onChange
+    onChange,
+    filterBy
   } = useFilter(__spreadProps(__spreadValues({}, props), {
     id: "selectFilter",
     isActive(filterValue) {
@@ -2603,49 +2678,59 @@ function SelectFilter(_m) {
       return filterValue.has(value2);
     }
   }));
-  return jsxRuntime.jsxs("div", {
+  const options = table.useState((state) => {
+    if (providedOptions)
+      return uniq(providedOptions);
+    const column = state.activeColumns.find((column2) => column2.id === columnId);
+    if (!column)
+      return [];
+    return uniq(flatMap(state.items, (item) => castArray(filterBy(column.value(item.value), item.value))));
+  });
+  const [query, setQuery] = react.useState("");
+  const filtered = options.filter((option) => !query || stringValue(option).toLowerCase().includes(query.toLowerCase()));
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
     css: {
       padding: "calc(var(--spacing) * 2)",
       display: "grid",
       gap: "var(--spacing)"
     },
-    children: [jsxRuntime.jsx(AutoFocusTextField, {
+    children: [/* @__PURE__ */ jsxRuntime.jsx(AutoFocusTextField, {
       value: query,
       onChange: (e) => setQuery(e.target.value),
-      endIcon: jsxRuntime.jsx(IconButton2, {
+      endIcon: /* @__PURE__ */ jsxRuntime.jsx(IconButton2, {
         onClick: () => setQuery(""),
-        children: !query ? jsxRuntime.jsx(Search2, {}) : jsxRuntime.jsx(Clear2, {})
+        children: !query ? /* @__PURE__ */ jsxRuntime.jsx(Search2, {}) : /* @__PURE__ */ jsxRuntime.jsx(Clear2, {})
       }),
       css: {
         marginBottom: "var(--spacing)"
       }
-    }), jsxRuntime.jsxs("div", {
+    }), /* @__PURE__ */ jsxRuntime.jsxs("div", {
       css: {
         maxHeight: "20em",
         overflowY: "auto"
       },
-      children: [jsxRuntime.jsx(FormControlLabel, {
+      children: [/* @__PURE__ */ jsxRuntime.jsx(FormControlLabel, {
         disabled: value.size === 0,
-        control: jsxRuntime.jsx(Checkbox2, {
+        control: /* @__PURE__ */ jsxRuntime.jsx(Checkbox2, {
           disabled: value.size === 0,
           checked: value.size > 0,
           onChange: () => onChange(/* @__PURE__ */ new Set())
         }),
-        label: jsxRuntime.jsxs(jsxRuntime.Fragment, {
-          children: ["<", text.selected(value.size), ">"]
+        label: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: ["<", selected(value.size), ">"]
         })
-      }), filtered.map((option, index) => jsxRuntime.jsx(FormControlLabel, {
-        control: jsxRuntime.jsx(Checkbox2, {
+      }), filtered.map((option, index) => /* @__PURE__ */ jsxRuntime.jsx(FormControlLabel, {
+        control: /* @__PURE__ */ jsxRuntime.jsx(Checkbox2, {
           checked: value.has(option),
           onChange: () => onChange(toggle(value, option, singleSelect))
         }),
         label: render(option)
       }, index))]
-    }), filtered.length === 0 && jsxRuntime.jsx("span", {
+    }), filtered.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("span", {
       css: {
         textAlign: "center"
       },
-      children: text.noResults
+      children: noResults
     })]
   });
 }
@@ -2676,6 +2761,8 @@ function debounce(fn, ms) {
 function useFilter(impl) {
   const table = useTableContext();
   const columnId = useColumnContext();
+  const cache = useTableMemo();
+  const filterBy = impl.filterBy && cache("", impl.filterBy);
   react.useEffect(() => {
     table.update((state) => {
       if (impl.defaultValue !== void 0) {
@@ -2685,7 +2772,7 @@ function useFilter(impl) {
   }, []);
   react.useEffect(() => {
     table.update((state) => {
-      state.filters.set(columnId, immer.castDraft(impl));
+      state.filters.set(columnId, immer.castDraft(__spreadProps(__spreadValues({}, impl), { filterBy })));
       if (impl.value !== void 0) {
         state.filterValues.set(columnId, impl.value);
       }
@@ -2720,7 +2807,8 @@ function useFilter(impl) {
   return {
     value: dirtyValue != null ? dirtyValue : value,
     onChange,
-    close: react.useContext(FilterControlContext)
+    close: react.useContext(FilterControlContext),
+    filterBy: filterBy != null ? filterBy : (x) => x
   };
 }
 const textMatch = (text, query) => {
@@ -2750,15 +2838,9 @@ function TextFilter(_o) {
     "compare",
     "filterBy"
   ]);
-  const {
-    components: {
-      IconButton: IconButton2
-    },
-    icons: {
-      Search: Search2,
-      Clear: Clear2
-    }
-  } = useTheme();
+  const IconButton2 = useTheme((t) => t.components.IconButton);
+  const Search2 = useTheme((t) => t.icons.Search);
+  const Clear2 = useTheme((t) => t.icons.Clear);
   const {
     value = "",
     onChange
@@ -2772,17 +2854,17 @@ function TextFilter(_o) {
       return compare(value2, filterValue);
     }
   }));
-  return jsxRuntime.jsx("div", {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
     css: {
       padding: `calc(var(--spacing) * 2)`,
       display: "grid"
     },
-    children: jsxRuntime.jsx(AutoFocusTextField, {
+    children: /* @__PURE__ */ jsxRuntime.jsx(AutoFocusTextField, {
       value,
       onChange: (e) => onChange(e.target.value),
-      endIcon: jsxRuntime.jsx(IconButton2, {
+      endIcon: /* @__PURE__ */ jsxRuntime.jsx(IconButton2, {
         onClick: () => onChange(""),
-        children: !value ? jsxRuntime.jsx(Search2, {}) : jsxRuntime.jsx(Clear2, {})
+        children: !value ? /* @__PURE__ */ jsxRuntime.jsx(Search2, {}) : /* @__PURE__ */ jsxRuntime.jsx(Clear2, {})
       })
     })
   });