schummar-table 0.6.0 → 0.7.0

package/dist/es/index.js

@@ -29,15 +29,43 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import { useState, useEffect, useMemo, useRef, createContext, useCallback, memo, useContext, cloneElement, useLayoutEffect, Fragment as Fragment$1 } from "react";
+import { createContext, useContext, useMemo, useState, useEffect, useRef, useCallback, memo, useLayoutEffect, cloneElement, Fragment as Fragment$1 } from "react";
 import { Store, StoreScope } from "schummar-state/react";
-import { d as defaultClasses, a as darkGray, l as lightGray, P as Popover, m as mergeThemes, g as globalTableTheme, T as TableThemeContext, b as PopoverContext, c as gray } from "./tableTheme.js";
+import { d as defaultClasses, a as darkGray, l as lightGray, P as Popover, T as TableThemeContext, m as mergeThemes, g as globalTableTheme, b as PopoverContext, c as gray } from "./tableTheme.js";
 export { T as TableThemeContext, f as TableThemeProvider, e as configureTableTheme, m as mergeThemes } from "./tableTheme.js";
 import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";
 import { useDayzed } from "dayzed";
 import { castDraft } from "immer";
 import { css, ClassNames } from "@emotion/react";
 import "react-dom";
+const TableMemoContext = createContext(/* @__PURE__ */ new Map());
+function TableMemoContextProvider({
+  children
+}) {
+  return jsx(TableMemoContext.Provider, {
+    value: useMemo(() => /* @__PURE__ */ new Map(), []),
+    children
+  });
+}
+function useTableMemo() {
+  const memoCache = 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();
@@ -293,8 +321,10 @@ 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));
     }
@@ -366,20 +396,20 @@ function calcItems(state) {
 }
 const noopParentId = () => void 0;
 function calcProps(props) {
-  const columnCache = useRef(/* @__PURE__ */ new Map());
+  const cache = useTableMemo();
   return useMemo(() => {
-    var _c, _d, _e, _f, _g, _h;
+    var _e, _f, _g, _h, _i, _j;
     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;
     }
@@ -389,42 +419,37 @@ 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)(),
+      value,
+      renderCell = ((_b) => (_b = defCol == null ? void 0 : defCol.renderCell) != null ? _b : asString)(),
+      exportCell = ((_c) => (_c = defCol == null ? void 0 : defCol.exportCell) != null ? _c : asString)(),
+      sortBy = ((_d) => (_d = defCol == null ? void 0 : defCol.sortBy) != null ? _d : [(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,
+        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: "	" };
@@ -442,13 +467,15 @@ 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: (_e = props.enableSelection) != null ? _e : true,
+      selectSyncChildren: (_f = props.selectSyncChildren) != null ? _f : true,
+      stickyHeader: (_g = props.stickyHeader) != null ? _g : true,
       enableExport,
-      enableColumnSelection: (_f = props.enableColumnSelection) != null ? _f : true,
-      enableColumnResize: (_g = props.enableColumnResize) != null ? _g : true,
-      enableColumnReorder: (_h = props.enableColumnReorder) != null ? _h : true
+      enableColumnSelection: (_h = props.enableColumnSelection) != null ? _h : true,
+      enableColumnResize: (_i = props.enableColumnResize) != null ? _i : true,
+      enableColumnReorder: (_j = props.enableColumnReorder) != null ? _j : true
     });
   }, [props]);
 }
@@ -578,16 +605,15 @@ 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
+  }));
 }
 const ColumnHeaderContext = new StoreScope({
   items: /* @__PURE__ */ new Map()
@@ -753,17 +779,11 @@ function FormControlLabel({
   });
 }
 function ColumnSelection() {
-  const {
-    components: {
-      IconButton: IconButton2,
-      Popover: Popover2,
-      Checkbox: Checkbox2
-    },
-    icons: {
-      Settings: Settings2
-    },
-    text
-  } = useTheme();
+  const IconButton2 = useTheme((t) => t.components.IconButton);
+  const Popover2 = 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");
@@ -806,7 +826,7 @@ function ColumnSelection() {
           css: {
             marginBottom: "var(--spacing)"
           },
-          children: text.selectColumns
+          children: selectColumns
         }), columns.map((column) => jsx(FormControlLabel, {
           control: jsx(Checkbox2, {
             checked: !hiddenColumns.has(column.id),
@@ -833,18 +853,14 @@ function csvExport(data, { sepPrefix, separator = ",", quote = '"', eol = "\n" }
 }
 function Export$1() {
   const table = useTableContext();
-  const {
-    components: {
-      Button: Button2,
-      IconButton: IconButton2,
-      Popover: Popover2
-    },
-    icons: {
-      Export: Export2,
-      Clipboard: Clipboard2
-    },
-    text
-  } = useTheme();
+  const Button2 = useTheme((t) => t.components.Button);
+  const IconButton2 = useTheme((t) => t.components.IconButton);
+  const Popover2 = 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] = useState(null);
   const generate = (options) => {
@@ -893,15 +909,15 @@ function Export$1() {
           css: {
             marginBottom: "var(--spacing)"
           },
-          children: text.exportTitle
+          children: exportTitle
         }), jsx(Button2, {
           startIcon: jsx(Clipboard2, {}),
           onClick: copy,
-          children: text.exportCopy
+          children: exportCopy
         }), jsx(Button2, {
           startIcon: jsx(Export2, {}),
           onClick: download,
-          children: text.exportDownload
+          children: exportDownload
         })]
       })
     })]
@@ -911,16 +927,10 @@ const FilterControlContext = createContext(() => void 0);
 function FilterControl() {
   const table = useTableContext();
   const columnId = useColumnContext();
-  const {
-    components: {
-      IconButton: IconButton2,
-      Popover: Popover2
-    },
-    icons: {
-      FilterList: FilterList2,
-      ArrowDropDown: ArrowDropDown2
-    }
-  } = useTheme();
+  const IconButton2 = useTheme((t) => t.components.IconButton);
+  const Popover2 = useTheme((t) => t.components.Popover);
+  const FilterList2 = useTheme((t) => t.icons.FilterList);
+  const ArrowDropDown2 = useTheme((t) => t.icons.ArrowDropDown);
   const cssVariables = useCssVariables();
   const [anchor, setAnchor] = useState(null);
   const isActive = table.useState((state) => {
@@ -1042,49 +1052,56 @@ function ResizeHandleView(_a) {
     }
   }, props));
 }
+const defaultWrapCell = (content) => {
+  if (typeof content === "string") {
+    return jsx("span", {
+      css: defaultClasses.text,
+      title: content,
+      children: content
+    });
+  }
+  return content;
+};
 const Cell = 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
   });
+  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 jsx("div", {
-    className: cx(...classNames),
-    css: [defaultClasses.cell, classNames, columnStyleOverride],
-    children: typeof content === "string" ? jsx("span", {
-      css: defaultClasses.text,
-      title: content,
-      children: content
-    }) : content
+    className: className2,
+    css: [defaultClasses.cell, columnStyleOverride],
+    children: wrapCell(content, column.value(item), item, 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) => {
@@ -1143,11 +1160,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));
@@ -1215,9 +1228,9 @@ const Row = memo(function Row2({
   itemId,
   rowIndex
 }) {
-  var _a, _b;
   const table = useTableContext();
   const divRef = useRef(null);
+  const classes = useTheme((t) => t.classes);
   const {
     className: className2,
     indent,
@@ -1227,17 +1240,16 @@ const Row = 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)),
       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, rowIndex) : null : state.props.rowAction
     };
   });
   useEffect(() => {
@@ -1254,7 +1266,10 @@ const Row = 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);
+  useLayoutEffect(() => {
+    var _a, _b;
+    return (_b = (_a = table.getState().props).debugRender) == null ? void 0 : _b.call(_a, "render row", itemId);
+  });
   return jsxs(Fragment, {
     children: [jsx("div", {
       className: className2,
@@ -1290,14 +1305,8 @@ function SortComponent({
 }) {
   const table = useTableContext();
   const columnId = useColumnContext();
-  const {
-    components: {
-      Badge: Badge2
-    },
-    icons: {
-      ArrowUpward: ArrowUpward2
-    }
-  } = useTheme();
+  const Badge2 = useTheme((t) => t.components.Badge);
+  const ArrowUpward2 = useTheme((t) => t.icons.ArrowUpward);
   const {
     direction,
     index
@@ -1391,6 +1400,11 @@ function throttle(fn, ms) {
       if (lastArgs) {
         run();
       }
+    },
+    cancel() {
+      if (timeout) {
+        clearTimeout(timeout);
+      }
     }
   });
 }
@@ -1417,7 +1431,7 @@ function Virtualized(_c) {
     "header",
     "children"
   ]);
-  var _a, _b, _c2, _d2;
+  var _a, _b;
   const table = useTableContext();
   const virtual = table.useState("props.virtual");
   const probeRef = useRef(null);
@@ -1491,7 +1505,11 @@ 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}`);
+  useEffect(() => incCounter.cancel, [incCounter]);
+  useLayoutEffect(() => {
+    var _a2, _b2;
+    return (_b2 = (_a2 = table.getState().props).debugRender) == null ? void 0 : _b2.call(_a2, `Virtualalized render ${from} to ${to}`);
+  });
   return jsxs("div", __spreadProps(__spreadValues({}, props), {
     children: [header, virtual && jsx("div", {
       style: {
@@ -1522,18 +1540,20 @@ 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");
+  useLayoutEffect(() => {
+    var _a, _b;
+    return (_b = (_a = table.getState().props).debugRender) == null ? void 0 : _b.call(_a, "render table");
+  });
   return jsx(TableContext.Provider, {
     value: table,
-    children: jsx(TableLoadingState, {})
+    children: jsx(TableMemoContextProvider, {
+      children: jsx(TableLoadingState, {})
+    })
   });
 }
 function TableLoadingState() {
-  const {
-    text
-  } = useTheme();
+  const loadingText = useTheme((t) => t.text.loading);
   const isHydrated = useTableStateStorage();
   const [showLoading, setShowLoading] = useState(false);
   useEffect(() => {
@@ -1542,7 +1562,7 @@ function TableLoadingState() {
   });
   return jsxs(Fragment, {
     children: [!isHydrated && showLoading && jsx("div", {
-      children: text.loading
+      children: loadingText
     }), jsx(TableInner, {
       hidden: !isHydrated
     })]
@@ -1551,7 +1571,6 @@ function TableLoadingState() {
 const TableInner = 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) => ({
@@ -1566,14 +1585,16 @@ const TableInner = memo(function TableInner2({
   const columnStyleOverride = table.useState("columnStyleOverride", {
     throttle: 16
   });
-  const defaultWidth = table.useState("props.defaultWidth");
   const classes = table.useState("props.classes");
   const stickyHeader = table.useState("props.stickyHeader");
   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");
+  useLayoutEffect(() => {
+    var _a, _b;
+    return (_b = (_a = table.getState().props).debugRender) == null ? void 0 : _b.call(_a, "render table inner");
+  });
   return jsx(Virtualized, {
     className: classes == null ? void 0 : classes.table,
     css: [cssVariables, defaultClasses.table, {
@@ -1581,8 +1602,8 @@ const TableInner = memo(function TableInner2({
         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(" ")
@@ -1599,11 +1620,11 @@ const TableInner = memo(function TableInner2({
         children: [enableSelection && jsx(SelectComponent, {}), enableColumnSelection && jsx(ColumnSelection, {}), enableExport && jsx(Export$1, {}), jsx(ResizeHandleView, {})]
       }), jsx(ColumnHeaderContext.Provider, {
         children: activeColumns.map((column) => {
-          var _a2;
+          var _a;
           return jsx(ColumnContext.Provider, {
             value: column.id,
             children: jsxs(ColumnHeader, {
-              className: cx(classes == null ? void 0 : classes.headerCell, (_a2 = column.classes) == null ? void 0 : _a2.headerCell),
+              className: cx(classes == null ? void 0 : classes.headerCell, (_a = column.classes) == null ? void 0 : _a.headerCell),
               css: [defaultClasses.headerCell, columnStyleOverride.get(column.id), stickyHeader && defaultClasses.sticky, stickyHeader instanceof Object && stickyHeader],
               children: [jsx(SortComponent, {
                 children: column.header
@@ -2061,26 +2082,45 @@ const defaultTableTheme = {
   spacing: "5px"
 };
 const emptyStore = new Store(void 0);
-function useTheme() {
+function useTheme(selector) {
   var _a, _b;
-  const table = 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 = useContext(TableThemeContext);
-  return mergeThemes(defaultTableTheme, globalTableTheme, contextTableTheme, localTheme);
+  const table = useContext(TableContext);
+  const columnId = useContext(ColumnContext);
+  const memo2 = 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) ? memo2("theme.classes.cell", cell) : cell
+      }),
+      text: __spreadProps(__spreadValues({}, t.text), {
+        selected: selected instanceof Function || Array.isArray(selected) ? memo2("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 = mergeThemes(defaultTableTheme, globalTableTheme, contextTableTheme, localTheme, columnsTheme);
+    return selector(process(theme2));
+  })) != null ? _a : emptyStore.useState()) != null ? _b : selector(process(mergeThemes(defaultTableTheme, globalTableTheme, contextTableTheme)));
+  return theme;
 }
 function AutoFocusTextField(props) {
-  const {
-    components: {
-      TextField: TextField2
-    }
-  } = useTheme();
+  const TextField2 = useTheme((t) => t.components.TextField);
   const ref = useRef(null);
   const {
     visible
@@ -2240,16 +2280,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] = useState(new Date());
   const [dateInView, setDateInView] = useState(baseDate);
   const [dirty, setDirty] = useState();
@@ -2463,21 +2499,21 @@ function DatePicker({
           setDirty(void 0);
           onChange(today());
         },
-        children: text.today
+        children: textToday
       }), jsx(Button2, {
         variant: "text",
         onClick: () => {
           setDirty(void 0);
           onChange(thisWeek(firstDayOfWeek));
         },
-        children: text.thisWeek
+        children: textThisWeek
       }), jsx(Button2, {
         variant: "text",
         onClick: () => {
           setDirty(void 0);
           onChange(null);
         },
-        children: text.reset
+        children: textReset
       })]
     })]
   });
@@ -2564,34 +2600,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] = 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) {
@@ -2601,6 +2621,16 @@ function SelectFilter(_m) {
       return filterValue.has(value2);
     }
   }));
+  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), item))));
+  });
+  const [query, setQuery] = useState("");
+  const filtered = options.filter((option) => !query || stringValue(option).toLowerCase().includes(query.toLowerCase()));
   return jsxs("div", {
     css: {
       padding: "calc(var(--spacing) * 2)",
@@ -2630,7 +2660,7 @@ function SelectFilter(_m) {
           onChange: () => onChange(/* @__PURE__ */ new Set())
         }),
         label: jsxs(Fragment, {
-          children: ["<", text.selected(value.size), ">"]
+          children: ["<", selected(value.size), ">"]
         })
       }), filtered.map((option, index) => jsx(FormControlLabel, {
         control: jsx(Checkbox2, {
@@ -2643,7 +2673,7 @@ function SelectFilter(_m) {
       css: {
         textAlign: "center"
       },
-      children: text.noResults
+      children: noResults
     })]
   });
 }
@@ -2674,6 +2704,8 @@ function debounce(fn, ms) {
 function useFilter(impl) {
   const table = useTableContext();
   const columnId = useColumnContext();
+  const cache = useTableMemo();
+  const filterBy = impl.filterBy && cache("", impl.filterBy);
   useEffect(() => {
     table.update((state) => {
       if (impl.defaultValue !== void 0) {
@@ -2683,7 +2715,7 @@ function useFilter(impl) {
   }, []);
   useEffect(() => {
     table.update((state) => {
-      state.filters.set(columnId, castDraft(impl));
+      state.filters.set(columnId, castDraft(__spreadProps(__spreadValues({}, impl), { filterBy })));
       if (impl.value !== void 0) {
         state.filterValues.set(columnId, impl.value);
       }
@@ -2718,7 +2750,8 @@ function useFilter(impl) {
   return {
     value: dirtyValue != null ? dirtyValue : value,
     onChange,
-    close: useContext(FilterControlContext)
+    close: useContext(FilterControlContext),
+    filterBy: filterBy != null ? filterBy : (x) => x
   };
 }
 const textMatch = (text, query) => {
@@ -2748,15 +2781,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