schummar-table 0.6.0 → 0.8.0

package/dist/es/mui4Theme.js

@@ -37,7 +37,7 @@ import "react-dom";
 import "@emotion/react";
 const mui4Theme = {
   components: {
-    Button: (props) => jsx(Button, __spreadProps(__spreadValues({}, props), {
+    Button: (props) => /* @__PURE__ */ jsx(Button, __spreadProps(__spreadValues({}, props), {
       size: "small",
       fullWidth: true,
       css: {
@@ -45,11 +45,11 @@ const mui4Theme = {
       },
       color: props.variant === "contained" ? "primary" : "inherit"
     })),
-    IconButton: (props) => jsx(IconButton, __spreadProps(__spreadValues({}, props), {
+    IconButton: (props) => /* @__PURE__ */ jsx(IconButton, __spreadProps(__spreadValues({}, props), {
       size: "small",
       color: "inherit"
     })),
-    Checkbox: (props) => jsx(Checkbox, __spreadProps(__spreadValues({}, props), {
+    Checkbox: (props) => /* @__PURE__ */ jsx(Checkbox, __spreadProps(__spreadValues({}, props), {
       color: "primary",
       size: "medium"
     })),
@@ -61,7 +61,7 @@ const mui4Theme = {
       } = _b, props = __objRest(_b, [
         "endIcon"
       ]);
-      return jsx(TextField, __spreadProps(__spreadValues({}, props), {
+      return /* @__PURE__ */ jsx(TextField, __spreadProps(__spreadValues({}, props), {
         InputProps: {
           endAdornment: endIcon
         },
@@ -85,7 +85,7 @@ function Mui4TableThemeProvider({
       }
     }, mui4Theme, theme != null ? theme : {});
   }, [muiTheme, theme]);
-  return jsx(TableThemeContext.Provider, {
+  return /* @__PURE__ */ jsx(TableThemeContext.Provider, {
     value: _theme,
     children
   });

package/dist/es/mui4Theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"mui4Theme.js","sources":["../../src/theme/mui4Theme/index.tsx"],"sourcesContent":["import { Badge, Button, Checkbox, CircularProgress, IconButton, TextField, useTheme } from '@material-ui/core';\nimport { ReactNode, useMemo } from 'react';\nimport { PartialTableTheme } from '../../types';\nimport { Popover } from '../defaultTheme/popover';\nimport { mergeThemes, TableThemeContext } from '../tableTheme';\n\nexport const mui4Theme: PartialTableTheme = {\n  components: {\n    Button: (props) => (\n      <Button\n        {...props}\n        size=\"small\"\n        fullWidth\n        css={{ justifyContent: 'start !important' }}\n        color={props.variant === 'contained' ? 'primary' : 'inherit'}\n      />\n    ),\n    IconButton: (props) => <IconButton {...props} size=\"small\" color=\"inherit\" />,\n    Checkbox: (props) => <Checkbox {...props} color=\"primary\" size=\"medium\" />,\n    Popover,\n    Badge,\n    TextField: ({ endIcon, ...props }) => <TextField {...props} InputProps={{ endAdornment: endIcon }} size=\"small\" variant=\"outlined\" />,\n    Spinner: CircularProgress,\n  },\n};\n\nexport function Mui4TableThemeProvider({ theme, children }: { theme?: PartialTableTheme; children: ReactNode }) {\n  const muiTheme = useTheme();\n\n  const _theme = useMemo(() => {\n    return mergeThemes(\n      {\n        colors: {\n          primary: muiTheme.palette.primary,\n          secondary: muiTheme.palette.secondary,\n        },\n      },\n      mui4Theme,\n      theme ?? {},\n    );\n  }, [muiTheme, theme]);\n\n  return <TableThemeContext.Provider value={_theme}>{children}</TableThemeContext.Provider>;\n}\n"],"names":["mui4Theme","components","Button","props","_jsx","justifyContent","variant","IconButton","Checkbox","Popover","Badge","TextField","endIcon","endAdornment","Spinner","CircularProgress","theme","children","muiTheme","useTheme","_theme","useMemo","mergeThemes","colors","primary","palette","secondary"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAMaA,YAA+B;AAAA,EAC1CC,YAAY;AAAA,IACVC,QAASC,WACPC,IAAC,yCACKD;MACJ,MAAK;AAAA,MACL;MACA,KAAK;AAAA,QAAEE,gBAAgB;AAAA;AAAA,MACvB,OAAOF,MAAMG,YAAY,cAAc,YAAY;AAAA;AAAA,IAGvDC,YAAaJ,WAAUC,IAAC,6CAAeD;MAAO,MAAK;AAAA,MAAQ,OAAM;AAAA;AAAA,IACjEK,UAAWL,WAAUC,IAAC,2CAAaD;MAAO,OAAM;AAAA,MAAU,MAAK;AAAA;AAAA,IAC/DM;AAAAA,IACAC;AAAAA,IACAC,WAAW,CAAC;AAAA,mBAAEC;AAAAA;AAAAA,UAAF,IAAcT,kBAAd,IAAcA;AAAAA,QAAZS;AAAAA;AAAwBR,iBAAC,4CAAcD;QAAO,YAAY;AAAA,UAAEU,cAAcD;AAAAA;AAAAA,QAAW,MAAK;AAAA,QAAQ,SAAQ;AAAA;AAAA;AAAA,IACxHE,SAASC;AAAAA;AAAAA;gCAI0B;AAAA,EAAEC;AAAAA,EAAOC;AAAAA,GAAgE;QACxGC,WAAWC;QAEXC,SAASC,QAAQ,MAAM;WACpBC,YACL;AAAA,MACEC,QAAQ;AAAA,QACNC,SAASN,SAASO,QAAQD;AAAAA,QAC1BE,WAAWR,SAASO,QAAQC;AAAAA;AAAAA,OAGhC1B,WACAgB,wBAAS;AAAA,KAEV,CAACE,UAAUF;SAEPZ,IAAC,kBAAkB;IAAS,OAAOgB;AAAAA;;;;"}
+{"version":3,"file":"mui4Theme.js","sources":["../../src/theme/mui4Theme/index.tsx"],"sourcesContent":["import { Badge, Button, Checkbox, CircularProgress, IconButton, TextField, useTheme } from '@material-ui/core';\nimport { ReactNode, useMemo } from 'react';\nimport { PartialTableTheme } from '../../types';\nimport { Popover } from '../defaultTheme/popover';\nimport { mergeThemes, TableThemeContext } from '../tableTheme';\n\nexport const mui4Theme: PartialTableTheme = {\n  components: {\n    Button: (props) => (\n      <Button\n        {...props}\n        size=\"small\"\n        fullWidth\n        css={{ justifyContent: 'start !important' }}\n        color={props.variant === 'contained' ? 'primary' : 'inherit'}\n      />\n    ),\n    IconButton: (props) => <IconButton {...props} size=\"small\" color=\"inherit\" />,\n    Checkbox: (props) => <Checkbox {...props} color=\"primary\" size=\"medium\" />,\n    Popover,\n    Badge,\n    TextField: ({ endIcon, ...props }) => <TextField {...props} InputProps={{ endAdornment: endIcon }} size=\"small\" variant=\"outlined\" />,\n    Spinner: CircularProgress,\n  },\n};\n\nexport function Mui4TableThemeProvider({ theme, children }: { theme?: PartialTableTheme; children: ReactNode }) {\n  const muiTheme = useTheme();\n\n  const _theme = useMemo(() => {\n    return mergeThemes(\n      {\n        colors: {\n          primary: muiTheme.palette.primary,\n          secondary: muiTheme.palette.secondary,\n        },\n      },\n      mui4Theme,\n      theme ?? {},\n    );\n  }, [muiTheme, theme]);\n\n  return <TableThemeContext.Provider value={_theme}>{children}</TableThemeContext.Provider>;\n}\n"],"names":["mui4Theme","components","Button","props","justifyContent","variant","IconButton","Checkbox","Popover","Badge","TextField","endIcon","endAdornment","Spinner","CircularProgress","theme","children","muiTheme","useTheme","_theme","useMemo","mergeThemes","colors","primary","palette","secondary"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAMaA,YAA+B;AAAA,EAC1CC,YAAY;AAAA,IACVC,QAASC,+BACN,yCACKA;MACJ,MAAK;AAAA,MACL;MACA,KAAK;AAAA,QAAEC,gBAAgB;AAAA;MACvB,OAAOD,MAAME,YAAY,cAAc,YAAY;AAAA;IAGvDC,YAAaH,+BAAW,6CAAeA;MAAO,MAAK;AAAA,MAAQ,OAAM;AAAA;IACjEI,UAAWJ,+BAAW,2CAAaA;MAAO,OAAM;AAAA,MAAU,MAAK;AAAA;IAC/DK;AAAAA,IACAC;AAAAA,IACAC,WAAW,CAAC;AAAA,mBAAEC;AAAAA;AAAAA,UAAF,IAAcR,kBAAd,IAAcA;AAAAA,QAAZQ;AAAAA;iCAAyB,4CAAcR;QAAO,YAAY;AAAA,UAAES,cAAcD;AAAAA;QAAW,MAAK;AAAA,QAAQ,SAAQ;AAAA;;IACxHE,SAASC;AAAAA;AAhB+B;gCAoBL;AAAA,EAAEC;AAAAA,EAAOC;AAAAA,GAAgE;QACxGC,WAAWC;QAEXC,SAASC,QAAQ,MAAM;WACpBC,YACL;AAAA,MACEC,QAAQ;AAAA,QACNC,SAASN,SAASO,QAAQD;AAAAA,QAC1BE,WAAWR,SAASO,QAAQC;AAAAA;OAGhCzB,WACAe,wBAAS,EARO;AAAA,KAUjB,CAACE,UAAUF,KAAX,CAXmB;6BAad,kBAAkB;IAAS,OAAOI;AAAAA;;AAC3C;;"}

package/dist/es/mui5Theme.js

@@ -37,7 +37,7 @@ import "react-dom";
 import "@emotion/react";
 const mui5Theme = {
   components: {
-    Button: (props) => jsx(Button, __spreadProps(__spreadValues({}, props), {
+    Button: (props) => /* @__PURE__ */ jsx(Button, __spreadProps(__spreadValues({}, props), {
       size: "small",
       fullWidth: true,
       css: {
@@ -45,14 +45,14 @@ const mui5Theme = {
       },
       color: props.variant === "contained" ? "primary" : "inherit"
     })),
-    IconButton: (props) => jsx(IconButton, __spreadProps(__spreadValues({}, props), {
+    IconButton: (props) => /* @__PURE__ */ jsx(IconButton, __spreadProps(__spreadValues({}, props), {
       size: "small",
       css: {
         fontSize: "0.8em"
       },
       color: "inherit"
     })),
-    Checkbox: (props) => jsx(Checkbox, __spreadProps(__spreadValues({}, props), {
+    Checkbox: (props) => /* @__PURE__ */ jsx(Checkbox, __spreadProps(__spreadValues({}, props), {
       color: "primary",
       size: "small"
     })),
@@ -64,14 +64,14 @@ const mui5Theme = {
       } = _b, props = __objRest(_b, [
         "endIcon"
       ]);
-      return jsx(TextField, __spreadProps(__spreadValues({}, props), {
+      return /* @__PURE__ */ jsx(TextField, __spreadProps(__spreadValues({}, props), {
         InputProps: {
           endAdornment: endIcon
         },
         size: "small"
       }));
     },
-    Spinner: (props) => jsx(CircularProgress, __spreadProps(__spreadValues({}, props), {
+    Spinner: (props) => /* @__PURE__ */ jsx(CircularProgress, __spreadProps(__spreadValues({}, props), {
       size: 20
     }))
   }
@@ -89,7 +89,7 @@ function Mui5TableThemeProvider({
       }
     }, mui5Theme, theme != null ? theme : {});
   }, [muiTheme, theme]);
-  return jsx(TableThemeContext.Provider, {
+  return /* @__PURE__ */ jsx(TableThemeContext.Provider, {
     value: _theme,
     children
   });

package/dist/es/mui5Theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"mui5Theme.js","sources":["../../src/theme/mui5Theme/index.tsx"],"sourcesContent":["import { Badge, Button, Checkbox, CircularProgress, IconButton, TextField, useTheme } from '@mui/material';\nimport { ReactNode, useMemo } from 'react';\nimport { PartialTableTheme } from '../../types';\nimport { Popover } from '../defaultTheme/popover';\nimport { mergeThemes, TableThemeContext } from '../tableTheme';\n\nexport const mui5Theme: PartialTableTheme = {\n  components: {\n    Button: (props) => (\n      <Button\n        {...props}\n        size=\"small\"\n        fullWidth\n        css={{ justifyContent: 'start !important' }}\n        color={props.variant === 'contained' ? 'primary' : 'inherit'}\n      />\n    ),\n    IconButton: (props) => <IconButton {...props} size=\"small\" css={{ fontSize: '0.8em' }} color=\"inherit\" />,\n    Checkbox: (props) => <Checkbox {...props} color=\"primary\" size=\"small\" />,\n    Popover,\n    Badge,\n    TextField: ({ endIcon, ...props }) => <TextField {...props} InputProps={{ endAdornment: endIcon }} size=\"small\" />,\n    Spinner: (props) => <CircularProgress {...props} size={20} />,\n  },\n};\n\nexport function Mui5TableThemeProvider({ theme, children }: { theme?: PartialTableTheme; children: ReactNode }) {\n  const muiTheme = useTheme();\n\n  const _theme = useMemo(() => {\n    return mergeThemes(\n      {\n        colors: {\n          primary: muiTheme.palette.primary,\n          secondary: muiTheme.palette.secondary,\n        },\n      },\n      mui5Theme,\n      theme ?? {},\n    );\n  }, [muiTheme, theme]);\n\n  return <TableThemeContext.Provider value={_theme}>{children}</TableThemeContext.Provider>;\n}\n"],"names":["mui5Theme","components","Button","props","_jsx","justifyContent","variant","IconButton","fontSize","Checkbox","Popover","Badge","TextField","endIcon","endAdornment","Spinner","theme","children","muiTheme","useTheme","_theme","useMemo","mergeThemes","colors","primary","palette","secondary"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAMaA,YAA+B;AAAA,EAC1CC,YAAY;AAAA,IACVC,QAASC,WACPC,IAAC,yCACKD;MACJ,MAAK;AAAA,MACL;MACA,KAAK;AAAA,QAAEE,gBAAgB;AAAA;AAAA,MACvB,OAAOF,MAAMG,YAAY,cAAc,YAAY;AAAA;AAAA,IAGvDC,YAAaJ,WAAUC,IAAC,6CAAeD;MAAO,MAAK;AAAA,MAAQ,KAAK;AAAA,QAAEK,UAAU;AAAA;AAAA,MAAW,OAAM;AAAA;AAAA,IAC7FC,UAAWN,WAAUC,IAAC,2CAAaD;MAAO,OAAM;AAAA,MAAU,MAAK;AAAA;AAAA,IAC/DO;AAAAA,IACAC;AAAAA,IACAC,WAAW,CAAC;AAAA,mBAAEC;AAAAA;AAAAA,UAAF,IAAcV,kBAAd,IAAcA;AAAAA,QAAZU;AAAAA;AAAwBT,iBAAC,4CAAcD;QAAO,YAAY;AAAA,UAAEW,cAAcD;AAAAA;AAAAA,QAAW,MAAK;AAAA;AAAA;AAAA,IACxGE,SAAUZ,WAAUC,IAAC,mDAAqBD;MAAO,MAAM;AAAA;AAAA;AAAA;gCAIpB;AAAA,EAAEa;AAAAA,EAAOC;AAAAA,GAAgE;QACxGC,WAAWC;QAEXC,SAASC,QAAQ,MAAM;WACpBC,YACL;AAAA,MACEC,QAAQ;AAAA,QACNC,SAASN,SAASO,QAAQD;AAAAA,QAC1BE,WAAWR,SAASO,QAAQC;AAAAA;AAAAA,OAGhC1B,WACAgB,wBAAS;AAAA,KAEV,CAACE,UAAUF;SAEPZ,IAAC,kBAAkB;IAAS,OAAOgB;AAAAA;;;;"}
+{"version":3,"file":"mui5Theme.js","sources":["../../src/theme/mui5Theme/index.tsx"],"sourcesContent":["import { Badge, Button, Checkbox, CircularProgress, IconButton, TextField, useTheme } from '@mui/material';\nimport { ReactNode, useMemo } from 'react';\nimport { PartialTableTheme } from '../../types';\nimport { Popover } from '../defaultTheme/popover';\nimport { mergeThemes, TableThemeContext } from '../tableTheme';\n\nexport const mui5Theme: PartialTableTheme = {\n  components: {\n    Button: (props) => (\n      <Button\n        {...props}\n        size=\"small\"\n        fullWidth\n        css={{ justifyContent: 'start !important' }}\n        color={props.variant === 'contained' ? 'primary' : 'inherit'}\n      />\n    ),\n    IconButton: (props) => <IconButton {...props} size=\"small\" css={{ fontSize: '0.8em' }} color=\"inherit\" />,\n    Checkbox: (props) => <Checkbox {...props} color=\"primary\" size=\"small\" />,\n    Popover,\n    Badge,\n    TextField: ({ endIcon, ...props }) => <TextField {...props} InputProps={{ endAdornment: endIcon }} size=\"small\" />,\n    Spinner: (props) => <CircularProgress {...props} size={20} />,\n  },\n};\n\nexport function Mui5TableThemeProvider({ theme, children }: { theme?: PartialTableTheme; children: ReactNode }) {\n  const muiTheme = useTheme();\n\n  const _theme = useMemo(() => {\n    return mergeThemes(\n      {\n        colors: {\n          primary: muiTheme.palette.primary,\n          secondary: muiTheme.palette.secondary,\n        },\n      },\n      mui5Theme,\n      theme ?? {},\n    );\n  }, [muiTheme, theme]);\n\n  return <TableThemeContext.Provider value={_theme}>{children}</TableThemeContext.Provider>;\n}\n"],"names":["mui5Theme","components","Button","props","justifyContent","variant","IconButton","fontSize","Checkbox","Popover","Badge","TextField","endIcon","endAdornment","Spinner","theme","children","muiTheme","useTheme","_theme","useMemo","mergeThemes","colors","primary","palette","secondary"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAMaA,YAA+B;AAAA,EAC1CC,YAAY;AAAA,IACVC,QAASC,+BACN,yCACKA;MACJ,MAAK;AAAA,MACL;MACA,KAAK;AAAA,QAAEC,gBAAgB;AAAA;MACvB,OAAOD,MAAME,YAAY,cAAc,YAAY;AAAA;IAGvDC,YAAaH,+BAAW,6CAAeA;MAAO,MAAK;AAAA,MAAQ,KAAK;AAAA,QAAEI,UAAU;AAAA;MAAW,OAAM;AAAA;IAC7FC,UAAWL,+BAAW,2CAAaA;MAAO,OAAM;AAAA,MAAU,MAAK;AAAA;IAC/DM;AAAAA,IACAC;AAAAA,IACAC,WAAW,CAAC;AAAA,mBAAEC;AAAAA;AAAAA,UAAF,IAAcT,kBAAd,IAAcA;AAAAA,QAAZS;AAAAA;iCAAyB,4CAAcT;QAAO,YAAY;AAAA,UAAEU,cAAcD;AAAAA;QAAW,MAAK;AAAA;;IACxGE,SAAUX,+BAAW,mDAAqBA;MAAO,MAAM;AAAA;;AAhBf;gCAoBL;AAAA,EAAEY;AAAAA,EAAOC;AAAAA,GAAgE;QACxGC,WAAWC;QAEXC,SAASC,QAAQ,MAAM;WACpBC,YACL;AAAA,MACEC,QAAQ;AAAA,QACNC,SAASN,SAASO,QAAQD;AAAAA,QAC1BE,WAAWR,SAASO,QAAQC;AAAAA;OAGhCzB,WACAe,wBAAS,EARO;AAAA,KAUjB,CAACE,UAAUF,KAAX,CAXmB;6BAad,kBAAkB;IAAS,OAAOI;AAAAA;;AAC3C;;"}

package/dist/es/tableTheme.js

@@ -48,6 +48,12 @@ const defaultClasses = {
     borderBottom: `1px solid #c9cfda`,
     background: white
   }),
+  footerCell: css(cell, {
+    padding: `var(--spacing) 0 var(--spacing) calc(2 * var(--spacing))`,
+    borderTop: `1px solid #c9cfda`,
+    borderBottom: "none",
+    background: white
+  }),
   firstCell: css({
     justifyContent: "start"
   }),
@@ -56,10 +62,19 @@ const defaultClasses = {
     top: 0,
     zIndex: 2
   }),
+  stickyBottom: css({
+    position: "sticky",
+    bottom: 0,
+    zIndex: 2
+  }),
   headerFill: css({
     borderBottom: `1px solid #c9cfda`,
     background: white
   }),
+  footerFill: css({
+    borderTop: `1px solid #c9cfda`,
+    background: white
+  }),
   text: css({
     minWidth: 0,
     overflow: "hidden",
@@ -140,10 +155,10 @@ const Popover = ({
   }), [depth, visible]);
   if (!open)
     return null;
-  return jsx(PopoverContext.Provider, {
+  return /* @__PURE__ */ jsx(PopoverContext.Provider, {
     value: context,
-    children: createPortal(jsxs(Fragment, {
-      children: [jsx("div", {
+    children: createPortal(/* @__PURE__ */ jsxs(Fragment, {
+      children: [/* @__PURE__ */ jsx("div", {
         css: [{
           position: "fixed",
           left: 0,
@@ -155,7 +170,7 @@ const Popover = ({
           display: "none"
         }],
         onClick: () => onClose()
-      }), jsx("div", {
+      }), /* @__PURE__ */ jsx("div", {
         ref: popper,
         className,
         css: [defaultClasses.card, __spreadProps(__spreadValues({
@@ -183,7 +198,7 @@ function TableThemeProvider({
   theme,
   children
 }) {
-  return jsx(TableThemeContext.Provider, {
+  return /* @__PURE__ */ jsx(TableThemeContext.Provider, {
     value: theme,
     children
   });

package/dist/es/tableTheme.js.map

@@ -1 +1 @@
-{"version":3,"file":"tableTheme.js","sources":["../../src/theme/defaultTheme/defaultClasses.ts","../../src/theme/defaultTheme/popover.tsx","../../src/theme/tableTheme.tsx"],"sourcesContent":["import { css } from '@emotion/react';\n\nexport const white = '#ffffff';\nexport const lightGray = '#eeeeee';\nexport const gray = '#bdbdbd';\nexport const darkGray = '#777';\n\nconst cell = css({\n  padding: `calc(var(--spacing) * 0.1) calc(2 * var(--spacing))`,\n  display: 'flex',\n  alignItems: 'center',\n  borderBottom: `1px solid #dfe2e9`,\n  whiteSpace: 'nowrap',\n  overflow: 'hidden',\n  background: 'white',\n});\n\nexport const defaultClasses = {\n  table: css({\n    position: 'relative',\n    display: 'grid',\n  }),\n\n  cell,\n\n  cellFill: css({\n    borderBottom: `1px solid ${lightGray}`,\n  }),\n\n  headerCell: css(cell, {\n    padding: `var(--spacing) 0 var(--spacing) calc(2 * var(--spacing))`,\n    borderBottom: `1px solid #c9cfda`,\n    background: white,\n  }),\n\n  firstCell: css({\n    justifyContent: 'start',\n  }),\n\n  sticky: css({\n    position: 'sticky',\n    top: 0,\n    zIndex: 2,\n  }),\n\n  headerFill: css({\n    borderBottom: `1px solid #c9cfda`,\n    background: white,\n  }),\n\n  text: css({\n    minWidth: 0,\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n  }),\n\n  card: css({\n    borderRadius: 4,\n    boxShadow: '0px 3px 14px 2px rgb(0 0 0 / 12%)',\n    background: 'white',\n  }),\n};\n","import React, { createContext, useContext, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { TableTheme } from '../../types';\nimport { defaultClasses } from './defaultClasses';\n\nconst MARGIN = 10;\nconst MAX_OFFSET = 20;\n\nexport const PopoverContext = createContext({ depth: 0, visible: false });\n\nexport const Popover: TableTheme['components']['Popover'] = ({ anchorEl, open, hidden, onClose, children, className, align }) => {\n  const popper = useRef<HTMLDivElement>(null);\n  const [position, setPosition] = useState<{ left: number; top: number }>();\n\n  useLayoutEffect(() => {\n    if (!anchorEl || !open) {\n      setPosition(undefined);\n      return;\n    }\n\n    let last: { left: number; top: number } | undefined;\n\n    function check() {\n      if (!anchorEl) return;\n      const { left: anchorLeft, bottom: anchorBottom, width: anchorWidth } = anchorEl.getBoundingClientRect();\n      const { width: popperWidth = 0, height: popperHeight = 0 } = popper.current?.getBoundingClientRect() ?? {};\n      const viewportWidth = document.documentElement.clientWidth;\n      const viewportHeight = document.documentElement.clientHeight;\n\n      const next = {\n        left:\n          align === 'center'\n            ? anchorLeft + anchorWidth / 2 - popperWidth / 2\n            : anchorLeft - Math.min(popperWidth ? popperWidth / 2 : Infinity, MAX_OFFSET),\n        top: anchorBottom,\n      };\n\n      if (next.left + popperWidth + MARGIN > viewportWidth) {\n        next.left = viewportWidth - popperWidth - MARGIN;\n      }\n      if (next.top + popperHeight + MARGIN > viewportHeight) {\n        next.top = viewportHeight - popperHeight - MARGIN;\n      }\n\n      if (next.left !== last?.left || next.top !== last?.top) {\n        setPosition(next);\n      }\n\n      last = next;\n    }\n    check();\n\n    const handle = setInterval(check, 16);\n    return () => {\n      clearInterval(handle);\n    };\n  }, [anchorEl, open]);\n\n  const { depth } = useContext(PopoverContext);\n  const visible = !hidden && !!position;\n  const context = useMemo(() => ({ depth: depth + 1, visible }), [depth, visible]);\n\n  if (!open) return null;\n\n  return (\n    <PopoverContext.Provider value={context}>\n      {createPortal(\n        <>\n          <div\n            css={[\n              {\n                position: 'fixed',\n                left: 0,\n                right: 0,\n                top: 0,\n                bottom: 0,\n                zIndex: 1000 + depth * 2,\n              },\n              hidden && { display: 'none' },\n            ]}\n            onClick={() => onClose()}\n          />\n\n          <div\n            ref={popper}\n            className={className}\n            css={[\n              defaultClasses.card,\n              {\n                position: 'fixed',\n                maxWidth: document.documentElement.clientWidth,\n                maxHeight: document.documentElement.clientHeight,\n                ...position,\n                zIndex: 1001 + depth * 2,\n              },\n              hidden && { display: 'none' },\n              !position && { visibility: 'hidden' },\n            ]}\n          >\n            {children}\n          </div>\n        </>,\n        document.body,\n      )}\n    </PopoverContext.Provider>\n  );\n};\n","import { createContext, ReactNode } from 'react';\nimport { PartialTableTheme } from '../types';\n\nexport let globalTableTheme: PartialTableTheme = {};\nexport function configureTableTheme(tableTheme: PartialTableTheme) {\n  globalTableTheme = tableTheme;\n}\n\nexport const TableThemeContext = createContext<PartialTableTheme>({});\n\nexport function TableThemeProvider({ theme, children }: { theme: PartialTableTheme; children: ReactNode }) {\n  return <TableThemeContext.Provider value={theme}>{children}</TableThemeContext.Provider>;\n}\n\nexport function mergeThemes<T>(...themes: PartialTableTheme<T>[]): PartialTableTheme<T> {\n  return {\n    text: Object.assign({}, ...themes.map((theme) => theme.text)),\n    classes: Object.assign({}, ...themes.map((theme) => theme.classes)),\n    components: Object.assign({}, ...themes.map((theme) => theme.components)),\n    icons: Object.assign({}, ...themes.map((theme) => theme.icons)),\n    colors: {\n      primary: Object.assign({}, ...themes.map((theme) => theme.colors?.primary)),\n      secondary: Object.assign({}, ...themes.map((theme) => theme.colors?.secondary)),\n    },\n    spacing: themes\n      .map((theme) => theme.spacing)\n      .reverse()\n      .find((x) => x !== undefined),\n  };\n}\n"],"names":["MARGIN","MAX_OFFSET","PopoverContext","createContext","depth","visible","Popover","anchorEl","open","hidden","onClose","children","className","align","popper","useRef","position","setPosition","useState","undefined","last","left","anchorLeft","bottom","anchorBottom","width","anchorWidth","getBoundingClientRect","popperWidth","height","popperHeight","current","viewportWidth","document","documentElement","clientWidth","viewportHeight","clientHeight","next","Math","min","Infinity","top","handle","setInterval","check","useContext","context","useMemo","_jsx","createPortal","_jsxs","right","zIndex","display","defaultClasses","card","maxWidth","maxHeight","visibility","body","globalTableTheme","tableTheme","TableThemeContext","theme","themes","text","Object","assign","map","classes","components","icons","colors","primary","secondary","spacing","reverse","find","x"],"mappings":"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"}
+{"version":3,"file":"tableTheme.js","sources":["../../src/theme/defaultTheme/defaultClasses.ts","../../src/theme/defaultTheme/popover.tsx","../../src/theme/tableTheme.tsx"],"sourcesContent":["import { css } from '@emotion/react';\n\nexport const white = '#ffffff';\nexport const lightGray = '#eeeeee';\nexport const gray = '#bdbdbd';\nexport const darkGray = '#777';\n\nconst cell = css({\n  padding: `calc(var(--spacing) * 0.1) calc(2 * var(--spacing))`,\n  display: 'flex',\n  alignItems: 'center',\n  borderBottom: `1px solid #dfe2e9`,\n  whiteSpace: 'nowrap',\n  overflow: 'hidden',\n  background: 'white',\n});\n\nexport const defaultClasses = {\n  table: css({\n    position: 'relative',\n    display: 'grid',\n  }),\n\n  cell,\n\n  cellFill: css({\n    borderBottom: `1px solid ${lightGray}`,\n  }),\n\n  headerCell: css(cell, {\n    padding: `var(--spacing) 0 var(--spacing) calc(2 * var(--spacing))`,\n    borderBottom: `1px solid #c9cfda`,\n    background: white,\n  }),\n\n  footerCell: css(cell, {\n    padding: `var(--spacing) 0 var(--spacing) calc(2 * var(--spacing))`,\n    borderTop: `1px solid #c9cfda`,\n    borderBottom: 'none',\n    background: white,\n  }),\n\n  firstCell: css({\n    justifyContent: 'start',\n  }),\n\n  sticky: css({\n    position: 'sticky',\n    top: 0,\n    zIndex: 2,\n  }),\n\n  stickyBottom: css({\n    position: 'sticky',\n    bottom: 0,\n    zIndex: 2,\n  }),\n\n  headerFill: css({\n    borderBottom: `1px solid #c9cfda`,\n    background: white,\n  }),\n\n  footerFill: css({\n    borderTop: `1px solid #c9cfda`,\n    background: white,\n  }),\n\n  text: css({\n    minWidth: 0,\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n  }),\n\n  card: css({\n    borderRadius: 4,\n    boxShadow: '0px 3px 14px 2px rgb(0 0 0 / 12%)',\n    background: 'white',\n  }),\n};\n","import React, { createContext, useContext, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { TableTheme } from '../../types';\nimport { defaultClasses } from './defaultClasses';\n\nconst MARGIN = 10;\nconst MAX_OFFSET = 20;\n\nexport const PopoverContext = createContext({ depth: 0, visible: false });\n\nexport const Popover: TableTheme['components']['Popover'] = ({ anchorEl, open, hidden, onClose, children, className, align }) => {\n  const popper = useRef<HTMLDivElement>(null);\n  const [position, setPosition] = useState<{ left: number; top: number }>();\n\n  useLayoutEffect(() => {\n    if (!anchorEl || !open) {\n      setPosition(undefined);\n      return;\n    }\n\n    let last: { left: number; top: number } | undefined;\n\n    function check() {\n      if (!anchorEl) return;\n      const { left: anchorLeft, bottom: anchorBottom, width: anchorWidth } = anchorEl.getBoundingClientRect();\n      const { width: popperWidth = 0, height: popperHeight = 0 } = popper.current?.getBoundingClientRect() ?? {};\n      const viewportWidth = document.documentElement.clientWidth;\n      const viewportHeight = document.documentElement.clientHeight;\n\n      const next = {\n        left:\n          align === 'center'\n            ? anchorLeft + anchorWidth / 2 - popperWidth / 2\n            : anchorLeft - Math.min(popperWidth ? popperWidth / 2 : Infinity, MAX_OFFSET),\n        top: anchorBottom,\n      };\n\n      if (next.left + popperWidth + MARGIN > viewportWidth) {\n        next.left = viewportWidth - popperWidth - MARGIN;\n      }\n      if (next.top + popperHeight + MARGIN > viewportHeight) {\n        next.top = viewportHeight - popperHeight - MARGIN;\n      }\n\n      if (next.left !== last?.left || next.top !== last?.top) {\n        setPosition(next);\n      }\n\n      last = next;\n    }\n    check();\n\n    const handle = setInterval(check, 16);\n    return () => {\n      clearInterval(handle);\n    };\n  }, [anchorEl, open]);\n\n  const { depth } = useContext(PopoverContext);\n  const visible = !hidden && !!position;\n  const context = useMemo(() => ({ depth: depth + 1, visible }), [depth, visible]);\n\n  if (!open) return null;\n\n  return (\n    <PopoverContext.Provider value={context}>\n      {createPortal(\n        <>\n          <div\n            css={[\n              {\n                position: 'fixed',\n                left: 0,\n                right: 0,\n                top: 0,\n                bottom: 0,\n                zIndex: 1000 + depth * 2,\n              },\n              hidden && { display: 'none' },\n            ]}\n            onClick={() => onClose()}\n          />\n\n          <div\n            ref={popper}\n            className={className}\n            css={[\n              defaultClasses.card,\n              {\n                position: 'fixed',\n                maxWidth: document.documentElement.clientWidth,\n                maxHeight: document.documentElement.clientHeight,\n                ...position,\n                zIndex: 1001 + depth * 2,\n              },\n              hidden && { display: 'none' },\n              !position && { visibility: 'hidden' },\n            ]}\n          >\n            {children}\n          </div>\n        </>,\n        document.body,\n      )}\n    </PopoverContext.Provider>\n  );\n};\n","import { createContext, ReactNode } from 'react';\nimport { PartialTableTheme } from '../types';\n\nexport let globalTableTheme: PartialTableTheme = {};\nexport function configureTableTheme(tableTheme: PartialTableTheme) {\n  globalTableTheme = tableTheme;\n}\n\nexport const TableThemeContext = createContext<PartialTableTheme>({});\n\nexport function TableThemeProvider({ theme, children }: { theme: PartialTableTheme; children: ReactNode }) {\n  return <TableThemeContext.Provider value={theme}>{children}</TableThemeContext.Provider>;\n}\n\nexport function mergeThemes<T>(...themes: PartialTableTheme<T>[]): PartialTableTheme<T> {\n  return {\n    text: Object.assign({}, ...themes.map((theme) => theme.text)),\n    classes: Object.assign({}, ...themes.map((theme) => theme.classes)),\n    components: Object.assign({}, ...themes.map((theme) => theme.components)),\n    icons: Object.assign({}, ...themes.map((theme) => theme.icons)),\n    colors: {\n      primary: Object.assign({}, ...themes.map((theme) => theme.colors?.primary)),\n      secondary: Object.assign({}, ...themes.map((theme) => theme.colors?.secondary)),\n    },\n    spacing: themes\n      .map((theme) => theme.spacing)\n      .reverse()\n      .find((x) => x !== undefined),\n  };\n}\n"],"names":["MARGIN","MAX_OFFSET","PopoverContext","createContext","depth","visible","Popover","anchorEl","open","hidden","onClose","children","className","align","popper","useRef","position","setPosition","useState","undefined","last","left","anchorLeft","bottom","anchorBottom","width","anchorWidth","getBoundingClientRect","popperWidth","height","popperHeight","current","viewportWidth","document","documentElement","clientWidth","viewportHeight","clientHeight","next","Math","min","Infinity","top","handle","setInterval","check","useContext","context","useMemo","createPortal","right","zIndex","display","defaultClasses","card","maxWidth","maxHeight","visibility","body","globalTableTheme","tableTheme","TableThemeContext","theme","themes","text","Object","assign","map","classes","components","icons","colors","primary","secondary","spacing","reverse","find","x"],"mappings":"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"}

package/dist/types/components/columnFooter.d.ts

@@ -0,0 +1 @@
+export declare function ColumnFooter(): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/types/components/columnHeader.d.ts

@@ -1,7 +1,6 @@
-import { HTMLProps } from 'react';
 import { StoreScope } from 'schummar-state/react';
 import { Id } from '..';
 export declare const ColumnHeaderContext: StoreScope<{
     items: Map<Id, HTMLDivElement>;
 }>;
-export declare function ColumnHeader(props: HTMLProps<HTMLDivElement>): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function ColumnHeader(): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/types/components/row.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Id, InternalColumn } from '../types';
-export declare function calcClassNames<T>(classes: InternalColumn<any, any>['classes'] | undefined, item: T, index: number): (string | false | undefined)[];
+import { Id, MemoizedTableTheme } from '../types';
+export declare function calcClassNames<T>(classes: MemoizedTableTheme<any>['classes'] | undefined, item: T, index: number): (string | false | undefined)[];
 export declare const Row: React.MemoExoticComponent<(<T>({ itemId, rowIndex }: {
     itemId: Id;
     rowIndex: number;

package/dist/types/components/virtualized.d.ts

@@ -1,6 +1,7 @@
 import { HTMLProps, ReactNode } from 'react';
 import { Id } from '../types';
-export declare function Virtualized<T>({ header, children, ...props }: {
+export declare function Virtualized<T>({ header, footer, children, ...props }: {
     header: ReactNode;
+    footer: ReactNode;
     children: (itemIds: Id[], startIndex: number) => ReactNode;
 } & HTMLProps<HTMLDivElement>): JSX.Element;

package/dist/types/hooks/useFilter.d.ts

@@ -3,4 +3,5 @@ export declare function useFilter<T, V, F, S extends SerializableValue>(impl: Fi
     value: S | undefined;
     onChange: (value?: S | undefined) => void;
     close: () => void;
+    filterBy: (value: V, item: T) => F | F[];
 };

package/dist/types/hooks/useMemoMap.d.ts

@@ -0,0 +1,2 @@
+import { FunctionWithDeps } from '../types';
+export declare function useMemoMap(): <Fn extends (...args: any[]) => any>(key: string, fn: FunctionWithDeps<Fn>) => Fn;

package/dist/types/hooks/useTableMemo.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+import { FunctionWithDeps } from '../types';
+export declare function TableMemoContextProvider({ children }: {
+    children: ReactNode;
+}): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function useTableMemo(): <Fn extends (...args: any[]) => any>(key: string, fn: FunctionWithDeps<Fn>) => Fn;

package/dist/types/hooks/useTheme.d.ts

@@ -1,2 +1,2 @@
-import { TableTheme } from '../types';
-export declare function useTheme<T>(): TableTheme<T>;
+import { MemoizedTableTheme } from '../types';
+export declare function useTheme<T, S>(selector: (theme: MemoizedTableTheme<T>) => S): S;

package/dist/types/misc/throttle.d.ts

@@ -1,4 +1,5 @@
 export declare function throttle<Args extends any[]>(fn: (...args: Args) => void, ms: number): {
     (...args: Args): void;
     flush(): void;
+    cancel(): void;
 };

package/dist/types/theme/defaultTheme/defaultClasses.d.ts

@@ -7,9 +7,12 @@ export declare const defaultClasses: {
     cell: import("@emotion/utils").SerializedStyles;
     cellFill: import("@emotion/utils").SerializedStyles;
     headerCell: import("@emotion/utils").SerializedStyles;
+    footerCell: import("@emotion/utils").SerializedStyles;
     firstCell: import("@emotion/utils").SerializedStyles;
     sticky: import("@emotion/utils").SerializedStyles;
+    stickyBottom: import("@emotion/utils").SerializedStyles;
     headerFill: import("@emotion/utils").SerializedStyles;
+    footerFill: import("@emotion/utils").SerializedStyles;
     text: import("@emotion/utils").SerializedStyles;
     card: import("@emotion/utils").SerializedStyles;
 };

package/dist/types/types.d.ts

@@ -1,5 +1,5 @@
 import { CSSInterpolation } from '@emotion/serialize';
-import React, { ComponentType, ReactNode, Ref } from 'react';
+import React, { ComponentType, DependencyList, ReactNode, Ref } from 'react';
 import { TableStateStorage } from './internalState/tableStateStorage';
 import { CsvExportOptions } from './misc/csvExport';
 export declare type Sort = {
@@ -11,6 +11,10 @@ export declare type Id = string | number;
 export declare type KeyOfType<T, S> = {
     [K in keyof T]: T[K] extends S ? K : never;
 }[keyof T];
+export declare type FunctionWithDeps<F extends (...args: any[]) => any> = F | [function: F, ...deps: DependencyList];
+export declare type MemoizedFunctions<T> = {
+    [K in keyof T]: Exclude<T[K], [function: (...args: any[]) => any, ...deps: DependencyList[]]>;
+};
 export interface TableTheme<T = unknown> {
     /** Define display texts. */
     text: {
@@ -23,17 +27,18 @@ export interface TableTheme<T = unknown> {
         thisWeek: ReactNode;
         reset: ReactNode;
         loading: ReactNode;
-        selected: (count: number) => ReactNode;
+        selected: FunctionWithDeps<(count: number) => ReactNode>;
     };
     /** Define styles. */
     classes?: {
         table?: string;
         headerCell?: string;
-        cell?: string | ((item: T, index: number) => string | undefined);
+        footerCell?: string;
+        cell?: string | FunctionWithDeps<(item: T, index: number) => string | undefined>;
         evenCell?: string;
         oddCell?: string;
     };
-    /** Defined components to be used in the table. */
+    /** Define components to be used in the table. */
     components: {
         IconButton: ComponentType<{
             children: ReactNode;
@@ -102,19 +107,27 @@ export interface TableTheme<T = unknown> {
 export declare type PartialTableTheme<T = unknown> = {
     [K in keyof TableTheme<T>]?: TableTheme<T>[K] extends Record<string, any> ? Partial<TableTheme<T>[K]> : TableTheme<T>[K];
 };
+export declare type MemoizedTableTheme<T> = Omit<TableTheme, 'classes' | 'text'> & {
+    classes: MemoizedFunctions<TableTheme<T>['classes']>;
+    text: MemoizedFunctions<TableTheme<T>['text']>;
+};
 export interface TableProps<T> extends PartialTableTheme<T> {
     /** The data to be rendered. One item per row. */
     items?: T[];
     /** Unique id for each item/row. */
-    id: ((item: T) => Id) | KeyOfType<T, Id>;
+    id: FunctionWithDeps<(item: T) => Id> | KeyOfType<T, Id>;
     /** Create a nested structure by assigning parents to items. Child items are hidden until the parent is expanded. */
-    parentId?: ((item: T) => Id | undefined) | KeyOfType<T, Id | undefined>;
+    parentId?: FunctionWithDeps<(item: T) => Id | undefined> | KeyOfType<T, Id | undefined>;
     /** If true for an item, it means that children will be loaded asynchronously as soon as item is expanded. */
     hasDeferredChildren?: (item: T) => boolean;
     /** Column definitions. */
     columns: Column<T, any>[] | ((col: <V>(value: (item: T) => V, column: Omit<Column<T, V>, 'value'>) => Column<T, V>) => Column<T, any>[]);
+    /** Default props for all column. Will take effect if not overriden in column definition. */
+    defaultColumnProps?: Omit<Column<T, unknown>, 'id' | 'value'>;
+    /** Wrap each cell */
+    wrapCell?: FunctionWithDeps<(content: ReactNode, value: unknown, item: T, index: number) => ReactNode>;
     /** Display a cell at the start of each row. Useful for "go to details" button for example. */
-    rowAction?: ReactNode | ((item: T, index: number) => ReactNode);
+    rowAction?: ReactNode | FunctionWithDeps<(item: T, index: number) => ReactNode>;
     /** Default sort order. */
     defaultSort?: Sort[];
     /** If given, controls the sort order. */
@@ -155,16 +168,20 @@ export interface TableProps<T> extends PartialTableTheme<T> {
     hiddenColumns?: Set<Id>;
     /** Called when hidden columns change. */
     onHiddenColumnsChange?: (hiddenColumns: Set<Id>) => void;
-    /** Default width for columns. */
-    defaultWidth?: string;
     /** Whether to stretch the table component over the available space. If value is "left" or "right", align accordingly. */
     fullWidth?: boolean | 'left' | 'right';
     /** Whether the table header should be sticky.
-     * @default false
+     * @default true
      */
     stickyHeader?: boolean | {
         top: number;
     };
+    /** Whether the table footer should be sticky.
+     * @default true
+     */
+    stickyFooter?: boolean | {
+        bottom: number;
+    };
     /** Whether the table cells should only be rendered when in viewport.
      * @default true
      */
@@ -205,7 +222,7 @@ export interface TableProps<T> extends PartialTableTheme<T> {
     debug?: (...output: any) => void;
     debugRender?: (...output: any) => void;
 }
-export declare type InternalTableProps<T> = Omit<TableProps<T>, 'id' | 'parentId' | 'columns' | 'enableExport'> & {
+export declare type InternalTableProps<T> = MemoizedFunctions<Omit<TableProps<T>, 'id' | 'parentId' | 'columns' | 'defaultColumnProps' | 'enableExport'> & {
     id: (item: T) => Id;
     parentId?: (item: T) => Id | undefined;
     columns: InternalColumn<T, unknown>[];
@@ -213,11 +230,12 @@ export declare type InternalTableProps<T> = Omit<TableProps<T>, 'id' | 'parentId
         copy?: CsvExportOptions;
         download?: CsvExportOptions;
     };
-};
-export declare type TableItem<T = unknown> = T & {
+}>;
+export declare type TableItem<T = unknown> = {
     id: Id;
     parentId?: Id;
     children: TableItem<T>[];
+    value: T;
 };
 export declare type Column<T, V> = {
     /** Column id. If not provided, the index in the column array will be used.
@@ -225,15 +243,17 @@ export declare type Column<T, V> = {
      */
     id?: string;
     /** Render table header for this column. */
-    header?: ReactNode;
+    header?: ReactNode | FunctionWithDeps<(values: V[], items: T[]) => ReactNode>;
+    /** Render table header for this column. */
+    footer?: ReactNode | FunctionWithDeps<(values: V[], items: T[]) => ReactNode>;
     /** Extract value for this column */
-    value: (item: T) => V;
+    value: FunctionWithDeps<(item: T) => V>;
     /** Render table cell. If not provided, a string representation of the value will be rendered. */
-    renderCell?: (value: V, item: T) => ReactNode;
+    renderCell?: FunctionWithDeps<(value: V, item: T) => ReactNode>;
     /** Serialize column value for exports. If not provided, a string representation of the value will be used. */
     exportCell?: (value: V, item: T) => string | number;
     /** Customize sort criteria. By default it will be the value itself in case it's a number or Date, or a string representation of the value otherwise. */
-    sortBy?: ((value: V, item: T) => unknown) | ((value: V) => unknown)[];
+    sortBy?: FunctionWithDeps<(value: V, item: T) => unknown>[];
     /** Set filter component that will be displayed in the column header */
     filter?: ReactNode;
     /** Prevent hiding the column. */
@@ -244,12 +264,11 @@ export declare type Column<T, V> = {
     width?: string;
     /** Provide css class names to override columns styles. */
     classes?: TableTheme<T>['classes'];
-    /** If the column definition changes, supply parameters that it depends on. If not set, the column will not update */
-    dependencies?: any[];
 };
-export declare type InternalColumn<T, V> = Required<Omit<Column<T, V>, 'id'>, 'header' | 'renderCell' | 'exportCell' | 'sortBy'> & {
+export declare type InternalColumn<T, V> = MemoizedFunctions<Required<Omit<Column<T, V>, 'id' | 'sortBy'>, 'header' | 'renderCell' | 'exportCell' | 'sortBy'> & {
     id: Id;
-};
+    sortBy: ((value: V, item: T) => unknown)[];
+}>;
 declare type Required<T, S> = T & {
     [P in keyof T as P extends S ? P : never]-?: T[P];
 };
@@ -259,7 +278,7 @@ export declare type InternalTableState<T> = {
     selection: Set<Id>;
     expanded: Set<Id>;
     rowHeights: Map<Id, number>;
-    filters: Map<Id, FilterImplementation<T, any, any, any>>;
+    filters: Map<Id, MemoizedFunctions<FilterImplementation<T, any, any, any>>>;
     filterValues: Map<Id, any>;
     hiddenColumns: Set<Id>;
     columnWidths: Map<Id, string>;
@@ -274,7 +293,7 @@ export declare type InternalTableState<T> = {
 };
 export declare type CommonFilterProps<T, V, F, S extends SerializableValue> = {
     /** Filter by? By default the column value will be used. If filterBy returns an array, an items will be active if at least one entry matches the active filter. */
-    filterBy?: (value: V, item: T) => F | F[];
+    filterBy?: FunctionWithDeps<(value: V, item: T) => F | F[]>;
     /** Preselected filter value. */
     defaultValue?: S;
     /** Controlled filter value. */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "schummar-table",
   "repository": "schummar/schummar-table",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "description": "",
   "type": "module",
   "sideEffects": false,
@@ -58,7 +58,7 @@
     "docs:build": "npm -w docs run build"
   },
   "dependencies": {
-    "@emotion/react": "^11.8.1",
+    "@emotion/react": "^11.9.0",
     "dayzed": "^3.2.2",
     "immer": "^9.0.12",
     "schummar-state": "0.2.1-experimental-13"
@@ -84,21 +84,21 @@
   },
   "devDependencies": {
     "@emotion/styled": "^11.8.1",
-    "@material-ui/core": "^4.12.3",
-    "@mui/material": "^5.5.0",
+    "@material-ui/core": "^4.12.4",
+    "@mui/material": "^5.6.3",
     "@types/react": "17",
     "@types/react-dom": "^17.0.13",
-    "@typescript-eslint/eslint-plugin": "^5.14.0",
-    "@typescript-eslint/parser": "^5.14.0",
-    "@vitejs/plugin-react": "^1.2.0",
-    "eslint": "^8.10.0",
+    "@typescript-eslint/eslint-plugin": "^5.21.0",
+    "@typescript-eslint/parser": "^5.21.0",
+    "@vitejs/plugin-react": "^1.3.1",
+    "eslint": "^8.14.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.5.1",
+    "prettier": "^2.6.2",
     "react": "17",
     "react-dom": "17",
     "rimraf": "^3.0.2",
-    "typescript": "^4.6.2",
-    "vite": "^2.8.6"
+    "typescript": "^4.6.3",
+    "vite": "^2.9.5"
   },
   "files": [
     "dist"