schummar-table 0.2.0 → 0.3.2

package/dist/cjs/components/cell.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Id } from '..';
-export declare const Cell: React.MemoExoticComponent<(<T>({ itemId }: {
+export declare const Cell: React.MemoExoticComponent<(<T>({ itemId, rowIndex }: {
     itemId: Id;
-}) => JSX.Element)>;
+    rowIndex: number;
+}) => JSX.Element | null)>;

package/dist/cjs/components/cell.js

@@ -7,22 +7,25 @@ const __1 = require("..");
 const helpers_1 = require("../misc/helpers");
 const row_1 = require("./row");
 const useCommonClasses_1 = require("./useCommonClasses");
-exports.Cell = (0, react_1.memo)(function Cell({ itemId }) {
+exports.Cell = (0, react_1.memo)(function Cell({ itemId, rowIndex }) {
     var _a, _b;
     const commonClasses = (0, useCommonClasses_1.useCommonClasses)();
     const state = (0, __1.useTableContext)();
     const columnId = (0, __1.useColumnContext)();
-    const content = state.useState((state) => {
-        var _a;
-        const item = state.activeItemsById.get(itemId);
-        const column = state.activeColumns.find((column) => column.id === columnId);
-        if (!item || !column)
-            return null;
-        const index = item ? state.activeItems.indexOf(item) : -1;
-        const className = (0, helpers_1.c)((0, row_1.calcClassName)(state.props.classes, index), (0, row_1.calcClassName)(column === null || column === void 0 ? void 0 : column.classes, index));
-        const wrapCell = (_a = state.props.wrapCell) !== null && _a !== void 0 ? _a : ((cell) => (0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, helpers_1.c)(commonClasses.cell, className) }, { children: cell }), void 0));
-        return wrapCell(column.renderCell(column.value(item), item), item);
-    }, [itemId, columnId, commonClasses]);
+    const column = state.useState((state) => state.activeColumns.find((column) => column.id === columnId), [columnId]);
+    const item = state.useState((state) => state.activeItemsById.get(itemId), [itemId]);
+    const classes = state.useState('props.classes');
+    let wrapCell = state.useState('props.wrapCell');
+    if (!column || !item)
+        return null;
     (_b = (_a = state.getState().props).debug) === null || _b === void 0 ? void 0 : _b.call(_a, 'render cell', itemId, columnId);
-    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: content }, void 0);
+    const className = (0, helpers_1.c)((0, row_1.calcClassName)(classes, rowIndex), (0, row_1.calcClassName)(column === null || column === void 0 ? void 0 : column.classes, rowIndex));
+    const content = column.renderCell(column.value(item), item);
+    if (!wrapCell && typeof content === 'string') {
+        wrapCell = (content) => ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, helpers_1.c)(commonClasses.cell, className) }, { children: (0, jsx_runtime_1.jsx)("span", Object.assign({ className: (0, helpers_1.c)(commonClasses.text) }, { children: content }), void 0) }), void 0));
+    }
+    else if (!wrapCell) {
+        wrapCell = (content) => (0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, helpers_1.c)(commonClasses.cell, className) }, { children: content }), void 0);
+    }
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: wrapCell(content, item) }, void 0);
 });

package/dist/cjs/components/columnSelection.js

@@ -32,6 +32,6 @@ function ColumnSelection() {
         }
         onHiddenColumnsChange === null || onHiddenColumnsChange === void 0 ? void 0 : onHiddenColumnsChange(newValue);
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(core_1.IconButton, Object.assign({ color: "inherit", onClick: (e) => setAnchor(e.currentTarget) }, { children: (0, jsx_runtime_1.jsx)(icons_1.Settings, {}, void 0) }), void 0), (0, jsx_runtime_1.jsx)(core_1.Popover, Object.assign({ open: !!anchor, onClose: () => setAnchor(null), anchorEl: anchor, anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, transformOrigin: { vertical: 'top', horizontal: 'center' } }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: classes.list }, { children: columns.map((column) => ((0, jsx_runtime_1.jsx)(core_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(core_1.Checkbox, { checked: !hiddenColumns.has(column.id), onChange: () => toggle(column), disabled: column.cannotHide }, void 0), label: column.header }, column.id))) }), void 0) }), void 0)] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(core_1.IconButton, Object.assign({ color: "inherit", size: "small", onClick: (e) => setAnchor(e.currentTarget) }, { children: (0, jsx_runtime_1.jsx)(icons_1.Settings, {}, void 0) }), void 0), (0, jsx_runtime_1.jsx)(core_1.Popover, Object.assign({ open: !!anchor, onClose: () => setAnchor(null), anchorEl: anchor, anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, transformOrigin: { vertical: 'top', horizontal: 'left' } }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: classes.list }, { children: columns.map((column) => ((0, jsx_runtime_1.jsx)(core_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(core_1.Checkbox, { checked: !hiddenColumns.has(column.id), onChange: () => toggle(column), disabled: column.cannotHide }, void 0), label: column.header }, column.id))) }), void 0) }), void 0)] }, void 0));
 }
 exports.ColumnSelection = ColumnSelection;

package/dist/cjs/components/expandComponent.js

@@ -30,7 +30,7 @@ function ExpandComponent({ itemId }) {
             });
         }
     }
-    return ((0, jsx_runtime_1.jsx)(core_1.IconButton, Object.assign({ onClick: toggle }, { children: (0, jsx_runtime_1.jsx)(icons_1.ChevronRight, { style: {
+    return ((0, jsx_runtime_1.jsx)(core_1.IconButton, Object.assign({ size: "small", onClick: toggle }, { children: (0, jsx_runtime_1.jsx)(icons_1.ChevronRight, { style: {
                 transition: 'all 500ms',
                 transform: isExpanded ? 'rotate3d(0, 0, 1, 90deg)' : 'none',
             } }, void 0) }), void 0));

package/dist/cjs/components/export.js

@@ -43,6 +43,6 @@ function Export() {
         a.click();
         document.body.removeChild(a);
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(core_1.IconButton, Object.assign({ color: "inherit", onClick: (e) => setAnchor(e.currentTarget) }, { children: (0, jsx_runtime_1.jsx)(icons_1.GetApp, {}, void 0) }), void 0), (0, jsx_runtime_1.jsx)(core_1.Popover, Object.assign({ open: !!anchor, onClose: () => setAnchor(null), anchorEl: anchor, anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, transformOrigin: { vertical: 'top', horizontal: 'center' } }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: classes.dialog }, { children: [(0, jsx_runtime_1.jsx)(core_1.Typography, Object.assign({ variant: "caption" }, { children: textTitle !== null && textTitle !== void 0 ? textTitle : 'Export' }), void 0), (0, jsx_runtime_1.jsx)(core_1.Button, Object.assign({ startIcon: (0, jsx_runtime_1.jsx)(icons_1.AssignmentReturn, {}, void 0), fullWidth: true, onClick: copy }, { children: textCopy !== null && textCopy !== void 0 ? textCopy : 'In die Zwischenablage' }), void 0), (0, jsx_runtime_1.jsx)(core_1.Button, Object.assign({ startIcon: (0, jsx_runtime_1.jsx)(icons_1.CloudDownload, {}, void 0), fullWidth: true, onClick: download }, { children: textDownload !== null && textDownload !== void 0 ? textDownload : 'Herunterladen' }), void 0)] }), void 0) }), void 0)] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(core_1.IconButton, Object.assign({ color: "inherit", size: "small", onClick: (e) => setAnchor(e.currentTarget) }, { children: (0, jsx_runtime_1.jsx)(icons_1.CloudDownload, {}, void 0) }), void 0), (0, jsx_runtime_1.jsx)(core_1.Popover, Object.assign({ open: !!anchor, onClose: () => setAnchor(null), anchorEl: anchor, anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, transformOrigin: { vertical: 'top', horizontal: 'left' } }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: classes.dialog }, { children: [(0, jsx_runtime_1.jsx)(core_1.Typography, Object.assign({ variant: "caption" }, { children: textTitle !== null && textTitle !== void 0 ? textTitle : 'Export' }), void 0), (0, jsx_runtime_1.jsx)(core_1.Button, Object.assign({ startIcon: (0, jsx_runtime_1.jsx)(icons_1.AssignmentReturn, {}, void 0), fullWidth: true, onClick: copy }, { children: textCopy !== null && textCopy !== void 0 ? textCopy : 'In die Zwischenablage' }), void 0), (0, jsx_runtime_1.jsx)(core_1.Button, Object.assign({ startIcon: (0, jsx_runtime_1.jsx)(icons_1.CloudDownload, {}, void 0), fullWidth: true, onClick: download }, { children: textDownload !== null && textDownload !== void 0 ? textDownload : 'Herunterladen' }), void 0)] }), void 0) }), void 0)] }, void 0));
 }
 exports.Export = Export;

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Id, InternalColumn } from '../types';
 export declare const calcClassName: (classes: InternalColumn<any, any>['classes'] | undefined, index: number) => string;
-export declare const Row: React.MemoExoticComponent<(<T>({ itemId }: {
+export declare const Row: React.MemoExoticComponent<(<T>({ itemId, rowIndex }: {
     itemId: Id;
+    rowIndex: number;
 }) => JSX.Element | null)>;

package/dist/cjs/components/row.js

@@ -11,7 +11,7 @@ const selectComponent_1 = require("./selectComponent");
 const useCommonClasses_1 = require("./useCommonClasses");
 const calcClassName = (classes, index) => (0, helpers_1.c)(classes === null || classes === void 0 ? void 0 : classes.cell, (classes === null || classes === void 0 ? void 0 : classes.evenCell) === undefined ? undefined : { [classes.evenCell]: index % 2 === 0 }, (classes === null || classes === void 0 ? void 0 : classes.oddCell) === undefined ? undefined : { [classes.oddCell]: index % 2 === 1 });
 exports.calcClassName = calcClassName;
-exports.Row = (0, react_1.memo)(function Row({ itemId }) {
+exports.Row = (0, react_1.memo)(function Row({ itemId, rowIndex }) {
     var _a, _b;
     const commonClasses = (0, useCommonClasses_1.useCommonClasses)();
     const state = (0, table_1.useTableContext)();
@@ -44,5 +44,5 @@ exports.Row = (0, react_1.memo)(function Row({ itemId }) {
         return () => o.disconnect();
     }, [divRef.current]);
     (_b = (_a = state.getState().props).debug) === null || _b === void 0 ? void 0 : _b.call(_a, 'render row', itemId);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: (0, helpers_1.c)(commonClasses.cellFill, className), ref: divRef }, void 0), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, helpers_1.c)(commonClasses.cell, commonClasses.firstCell, className) }, { children: [(0, jsx_runtime_1.jsx)("div", { style: { width: indent * 20 } }, void 0), enableSelection && (0, jsx_runtime_1.jsx)(selectComponent_1.SelectComponent, { itemId: itemId }, void 0), (hasChildren || hasDeferredChildren) && (0, jsx_runtime_1.jsx)(expandComponent_1.ExpandComponent, { itemId: itemId }, void 0)] }), void 0), columnIds.map((columnId) => ((0, jsx_runtime_1.jsx)(table_1.ColumnContext.Provider, Object.assign({ value: columnId }, { children: (0, jsx_runtime_1.jsx)(cell_1.Cell, { itemId: itemId }, void 0) }), columnId))), (0, jsx_runtime_1.jsx)("div", { className: (0, helpers_1.c)(commonClasses.cellFill, className) }, void 0)] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: (0, helpers_1.c)(commonClasses.cellFill, className), ref: divRef }, void 0), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, helpers_1.c)(commonClasses.cell, commonClasses.firstCell, className) }, { children: [(0, jsx_runtime_1.jsx)("div", { style: { width: indent * 20 } }, void 0), enableSelection && (0, jsx_runtime_1.jsx)(selectComponent_1.SelectComponent, { itemId: itemId }, void 0), (hasChildren || hasDeferredChildren) && (0, jsx_runtime_1.jsx)(expandComponent_1.ExpandComponent, { itemId: itemId }, void 0)] }), void 0), columnIds.map((columnId) => ((0, jsx_runtime_1.jsx)(table_1.ColumnContext.Provider, Object.assign({ value: columnId }, { children: (0, jsx_runtime_1.jsx)(cell_1.Cell, { itemId: itemId, rowIndex: rowIndex }, void 0) }), columnId))), (0, jsx_runtime_1.jsx)("div", { className: (0, helpers_1.c)(commonClasses.cellFill, className) }, void 0)] }, void 0));
 });

package/dist/cjs/components/textFilterComponent.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import '../misc/textMatch';
 import { Filter } from './filterComponent';
 export declare class TextFilter<T> implements Filter<T> {
     readonly query: string;

package/dist/cjs/components/textFilterComponent.js

@@ -6,7 +6,6 @@ const core_1 = require("@material-ui/core");
 const icons_1 = require("@material-ui/icons");
 const react_1 = require("react");
 const helpers_1 = require("../misc/helpers");
-require("../misc/textMatch");
 const textMatch_1 = require("../misc/textMatch");
 const table_1 = require("../table");
 class TextFilter {

package/dist/cjs/components/useCommonClasses.d.ts

@@ -1 +1 @@
-export declare const useCommonClasses: (props?: any) => import("@material-ui/styles").ClassNameMap<"table" | "cell" | "sticky" | "headerCell" | "cellFill" | "firstCell" | "headerFill" | "deferredPlaceholder">;
+export declare const useCommonClasses: (props?: any) => import("@material-ui/styles").ClassNameMap<"table" | "text" | "cell" | "sticky" | "headerCell" | "cellFill" | "firstCell" | "headerFill" | "deferredPlaceholder">;

package/dist/cjs/components/useCommonClasses.js

@@ -3,14 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCommonClasses = void 0;
 const core_1 = require("@material-ui/core");
 const cell = (theme) => ({
-    padding: theme.spacing(0.5, 1),
-    display: 'grid',
-    gridAutoFlow: 'column',
+    padding: theme.spacing(0.1, 1),
+    display: 'flex',
     alignItems: 'center',
     borderBottom: `1px solid ${theme.palette.grey[200]}`,
     whiteSpace: 'nowrap',
     overflow: 'hidden',
-    textOverflow: 'ellipsis',
 });
 exports.useCommonClasses = (0, core_1.makeStyles)((theme) => ({
     table: {
@@ -21,7 +19,7 @@ exports.useCommonClasses = (0, core_1.makeStyles)((theme) => ({
     cellFill: {
         borderBottom: `1px solid ${theme.palette.grey[200]}`,
     },
-    headerCell: Object.assign(Object.assign({}, cell(theme)), { borderBottom: 'none', gridTemplateColumns: 'minmax(0, 1fr) max-content', background: theme.palette.primary.main, color: theme.palette.primary.contrastText, fontWeight: 'bold', '&:not(:first-child)': {
+    headerCell: Object.assign(Object.assign({}, cell(theme)), { borderBottom: `2px solid ${theme.palette.grey[400]}`, gridTemplateColumns: 'minmax(0, 1fr) max-content', background: theme.palette.common.white, '&:not(:first-child)': {
             borderLeft: `1px solid ${theme.palette.background.default}`,
         } }),
     firstCell: {
@@ -33,7 +31,8 @@ exports.useCommonClasses = (0, core_1.makeStyles)((theme) => ({
         zIndex: 1,
     },
     headerFill: {
-        background: theme.palette.primary.main,
+        borderBottom: `3px solid ${theme.palette.grey[200]}`,
+        background: theme.palette.common.white,
     },
     deferredPlaceholder: {
         padding: theme.spacing(1),
@@ -42,4 +41,9 @@ exports.useCommonClasses = (0, core_1.makeStyles)((theme) => ({
         display: 'grid',
         justifyContent: 'center',
     },
+    text: {
+        minWidth: 0,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+    },
 }));

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

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

package/dist/cjs/components/virtualized.js

@@ -50,7 +50,7 @@ function Virtualized(_a) {
     const virtual = state.useState('props.virtual');
     const probeRef = (0, react_1.useRef)(null);
     const [counter, setCounter] = (0, react_1.useState)(0);
-    const { itemIds = [], from, to, before = 0, after = 0, } = state.useState((state) => {
+    const { itemIds = [], from = 0, to, before = 0, after = 0, } = state.useState((state) => {
         var _a;
         const itemIds = state.activeItems.map((item) => item.id);
         const root = probeRef.current && findScrollRoot(probeRef.current);
@@ -58,7 +58,7 @@ function Virtualized(_a) {
             return { itemIds };
         if (!probeRef.current || !root || !document.contains(root))
             return {};
-        const { rowHeight, initalRowHeight } = (_a = (state.props.virtual instanceof Object ? state.props.virtual : undefined)) !== null && _a !== void 0 ? _a : {};
+        const { rowHeight, initalRowHeight, overscan = 200, overscanTop, overscanBottom, } = (_a = (state.props.virtual instanceof Object ? state.props.virtual : undefined)) !== null && _a !== void 0 ? _a : {};
         let totalHeight = 0;
         const rowHeights = itemIds.map((itemId, index) => {
             var _a, _b;
@@ -72,13 +72,13 @@ function Virtualized(_a) {
         const bottomOfTable = topOfTable + root.clientHeight - headerHeight;
         let from = 0, to = itemIds.length, before = 0, after = 0;
         for (const h of rowHeights) {
-            if (before + h > topOfTable)
+            if (before + h > topOfTable - (overscanTop !== null && overscanTop !== void 0 ? overscanTop : overscan))
                 break;
             from++;
             before += h;
         }
         for (const h of rowHeights.reverse()) {
-            if (after + h > totalHeight - bottomOfTable)
+            if (after + h > totalHeight - bottomOfTable - (overscanBottom !== null && overscanBottom !== void 0 ? overscanBottom : overscan))
                 break;
             to--;
             after += h;
@@ -93,6 +93,6 @@ function Virtualized(_a) {
         return onAncestorScroll(probeRef.current, incCounter);
     }, [probeRef.current, incCounter]);
     (_e = (_d = state.getState().props).debug) === null || _e === void 0 ? void 0 : _e.call(_d, `Virtualalized render ${from} to ${to}`);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, props, { children: [header, virtual && (0, jsx_runtime_1.jsx)("div", { style: { gridColumn: '1 / -1', height: before }, ref: probeRef }, void 0), children(itemIds), virtual && (0, jsx_runtime_1.jsx)("div", { style: { gridColumn: '1 / -1', height: after } }, void 0)] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, props, { children: [header, virtual && (0, jsx_runtime_1.jsx)("div", { style: { gridColumn: '1 / -1', height: before }, ref: probeRef }, void 0), children(itemIds, from), virtual && (0, jsx_runtime_1.jsx)("div", { style: { gridColumn: '1 / -1', height: after } }, void 0)] }), void 0));
 }
 exports.Virtualized = Virtualized;

package/dist/cjs/index.d.ts

@@ -1,5 +1,6 @@
 export { DefaultFilter, DefaultFilterComponent } from './components/defaultFilterComponent';
+export { Filter } from './components/filterComponent';
 export { TextFilter, TextFilterComponent } from './components/textFilterComponent';
 export { termMatch, textMatch } from './misc/textMatch';
 export { ColumnContext, Table, TableContext, useColumnContext, useTableContext } from './table';
-export type { Column, Id, Rows, Sort, SortDirection, TableProps } from './types';
+export type { Column, Id, InternalColumn, Rows, Sort, SortDirection, TableProps } from './types';

package/dist/cjs/internalState/calcProps.js

@@ -16,6 +16,7 @@ const react_1 = require("react");
 const helpers_1 = require("../misc/helpers");
 const noopParentId = () => undefined;
 function calcProps(props) {
+    const columnCache = (0, react_1.useRef)(new Map());
     return (0, react_1.useMemo)(() => {
         var _a, _b;
         let id;
@@ -40,15 +41,31 @@ function calcProps(props) {
             inputColumns = props.columns((value, column) => (Object.assign(Object.assign({}, column), { value })));
         }
         else {
-            inputColumns = props.columns;
+            inputColumns = props.columns.map((column) => (Object.assign(Object.assign({}, column), { dependecies: undefined })));
         }
+        const newColumnCache = new Map();
         const columns = inputColumns.map(function (_a, index) {
-            var { id, header = null, renderCell = helpers_1.asString, exportCell = helpers_1.asString, sortBy = (v) => (typeof v === 'number' || v instanceof Date ? v : String(v)) } = _a, props = __rest(_a, ["id", "header", "renderCell", "exportCell", "sortBy"]);
-            return Object.assign({ id: id !== null && id !== void 0 ? id : index, header,
-                renderCell,
-                exportCell,
-                sortBy }, props);
+            var _b;
+            var { id, header = null, renderCell = helpers_1.asString, exportCell = helpers_1.asString, sortBy = (v) => (typeof v === 'number' || v instanceof Date ? v : String(v)), dependencies = [] } = _a, props = __rest(_a, ["id", "header", "renderCell", "exportCell", "sortBy", "dependencies"]);
+            const [depsInCache, columnInCache] = (_b = columnCache.current.get(id !== null && id !== void 0 ? id : index)) !== null && _b !== void 0 ? _b : [];
+            let column;
+            if (depsInCache &&
+                columnInCache &&
+                depsInCache.length === dependencies.length &&
+                depsInCache.every((x, i) => dependencies[i] === x)) {
+                column = columnInCache;
+            }
+            else {
+                column = Object.assign({ id: id !== null && id !== void 0 ? id : index, header,
+                    renderCell,
+                    exportCell,
+                    sortBy,
+                    dependencies }, props);
+            }
+            newColumnCache.set(id !== null && id !== void 0 ? id : index, [dependencies, column]);
+            return column;
         });
+        columnCache.current = newColumnCache;
         let copy;
         if (props.enableExport === true || (props.enableExport instanceof Object && props.enableExport.copy === true)) {
             copy = { separator: '\t' };

package/dist/cjs/table.js

@@ -65,5 +65,5 @@ const TableInner = (0, react_1.memo)(function TableInner() {
         }, header: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: (0, helpers_1.c)(commonClasses.headerFill, { [commonClasses.sticky]: !!stickyHeader }, classes === null || classes === void 0 ? void 0 : classes.headerCell) }, void 0), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, helpers_1.c)(commonClasses.headerCell, { [commonClasses.sticky]: !!stickyHeader }, classes === null || classes === void 0 ? void 0 : classes.headerCell) }, { children: [enableSelection && (0, jsx_runtime_1.jsx)(selectComponent_1.SelectComponent, {}, void 0), enableColumnSelection && (0, jsx_runtime_1.jsx)(columnSelection_1.ColumnSelection, {}, void 0), enableExport && (0, jsx_runtime_1.jsx)(export_1.Export, {}, void 0)] }), void 0), activeColumns.map((column) => {
                     var _a;
                     return ((0, jsx_runtime_1.jsx)(exports.ColumnContext.Provider, Object.assign({ value: column.id }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, helpers_1.c)(commonClasses.headerCell, { [commonClasses.sticky]: !!stickyHeader }, classes === null || classes === void 0 ? void 0 : classes.headerCell, (_a = column.classes) === null || _a === void 0 ? void 0 : _a.headerCell) }, { children: [(0, jsx_runtime_1.jsx)(sortComponent_1.SortComponent, { children: column.header }, void 0), (0, jsx_runtime_1.jsx)(filterComponent_1.FilterComponent, {}, void 0)] }), column.id) }), column.id));
-                }), (0, jsx_runtime_1.jsx)("div", { className: (0, helpers_1.c)(commonClasses.headerFill, { [commonClasses.sticky]: !!stickyHeader }, classes === null || classes === void 0 ? void 0 : classes.headerCell) }, void 0)] }, void 0) }, { children: (itemIds) => itemIds.map((itemId) => (0, jsx_runtime_1.jsx)(row_1.Row, { itemId: itemId }, itemId)) }), void 0));
+                }), (0, jsx_runtime_1.jsx)("div", { className: (0, helpers_1.c)(commonClasses.headerFill, { [commonClasses.sticky]: !!stickyHeader }, classes === null || classes === void 0 ? void 0 : classes.headerCell) }, void 0)] }, void 0) }, { children: (itemIds, startIndex) => itemIds.map((itemId, index) => (0, jsx_runtime_1.jsx)(row_1.Row, { itemId: itemId, rowIndex: startIndex + index }, itemId)) }), void 0));
 });

package/dist/cjs/types.d.ts

@@ -38,6 +38,9 @@ export declare type TableProps<T> = {
         rowHeight?: number;
         initalRowHeight?: number;
         throttleScroll?: number;
+        overscan?: number;
+        overscanBottom?: number;
+        overscanTop?: number;
     };
     text?: {
         deselectAll?: string;
@@ -97,6 +100,8 @@ export declare type Column<T, V> = {
         evenCell?: string;
         oddCell?: string;
     };
+    /** 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'> & {
     id: Id;

package/dist/esm/components/cell.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Id } from '..';
-export declare const Cell: React.MemoExoticComponent<(<T>({ itemId }: {
+export declare const Cell: React.MemoExoticComponent<(<T>({ itemId, rowIndex }: {
     itemId: Id;
-}) => JSX.Element)>;
+    rowIndex: number;
+}) => JSX.Element | null)>;

package/dist/esm/components/cell.js

@@ -4,22 +4,25 @@ import { useColumnContext, useTableContext } from '..';
 import { c } from '../misc/helpers';
 import { calcClassName } from './row';
 import { useCommonClasses } from './useCommonClasses';
-export const Cell = memo(function Cell({ itemId }) {
+export const Cell = memo(function Cell({ itemId, rowIndex }) {
     var _a, _b;
     const commonClasses = useCommonClasses();
     const state = useTableContext();
     const columnId = useColumnContext();
-    const content = state.useState((state) => {
-        var _a;
-        const item = state.activeItemsById.get(itemId);
-        const column = state.activeColumns.find((column) => column.id === columnId);
-        if (!item || !column)
-            return null;
-        const index = item ? state.activeItems.indexOf(item) : -1;
-        const className = c(calcClassName(state.props.classes, index), calcClassName(column === null || column === void 0 ? void 0 : column.classes, index));
-        const wrapCell = (_a = state.props.wrapCell) !== null && _a !== void 0 ? _a : ((cell) => _jsx("div", Object.assign({ className: c(commonClasses.cell, className) }, { children: cell }), void 0));
-        return wrapCell(column.renderCell(column.value(item), item), item);
-    }, [itemId, columnId, commonClasses]);
+    const column = state.useState((state) => state.activeColumns.find((column) => column.id === columnId), [columnId]);
+    const item = state.useState((state) => state.activeItemsById.get(itemId), [itemId]);
+    const classes = state.useState('props.classes');
+    let wrapCell = state.useState('props.wrapCell');
+    if (!column || !item)
+        return null;
     (_b = (_a = state.getState().props).debug) === null || _b === void 0 ? void 0 : _b.call(_a, 'render cell', itemId, columnId);
-    return _jsx(_Fragment, { children: content }, void 0);
+    const className = c(calcClassName(classes, rowIndex), calcClassName(column === null || column === void 0 ? void 0 : column.classes, rowIndex));
+    const content = column.renderCell(column.value(item), item);
+    if (!wrapCell && typeof content === 'string') {
+        wrapCell = (content) => (_jsx("div", Object.assign({ className: c(commonClasses.cell, className) }, { children: _jsx("span", Object.assign({ className: c(commonClasses.text) }, { children: content }), void 0) }), void 0));
+    }
+    else if (!wrapCell) {
+        wrapCell = (content) => _jsx("div", Object.assign({ className: c(commonClasses.cell, className) }, { children: content }), void 0);
+    }
+    return _jsx(_Fragment, { children: wrapCell(content, item) }, void 0);
 });

package/dist/esm/components/columnSelection.js

@@ -29,5 +29,5 @@ export function ColumnSelection() {
         }
         onHiddenColumnsChange === null || onHiddenColumnsChange === void 0 ? void 0 : onHiddenColumnsChange(newValue);
     };
-    return (_jsxs(_Fragment, { children: [_jsx(IconButton, Object.assign({ color: "inherit", onClick: (e) => setAnchor(e.currentTarget) }, { children: _jsx(Settings, {}, void 0) }), void 0), _jsx(Popover, Object.assign({ open: !!anchor, onClose: () => setAnchor(null), anchorEl: anchor, anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, transformOrigin: { vertical: 'top', horizontal: 'center' } }, { children: _jsx("div", Object.assign({ className: classes.list }, { children: columns.map((column) => (_jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: !hiddenColumns.has(column.id), onChange: () => toggle(column), disabled: column.cannotHide }, void 0), label: column.header }, column.id))) }), void 0) }), void 0)] }, void 0));
+    return (_jsxs(_Fragment, { children: [_jsx(IconButton, Object.assign({ color: "inherit", size: "small", onClick: (e) => setAnchor(e.currentTarget) }, { children: _jsx(Settings, {}, void 0) }), void 0), _jsx(Popover, Object.assign({ open: !!anchor, onClose: () => setAnchor(null), anchorEl: anchor, anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, transformOrigin: { vertical: 'top', horizontal: 'left' } }, { children: _jsx("div", Object.assign({ className: classes.list }, { children: columns.map((column) => (_jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: !hiddenColumns.has(column.id), onChange: () => toggle(column), disabled: column.cannotHide }, void 0), label: column.header }, column.id))) }), void 0) }), void 0)] }, void 0));
 }

package/dist/esm/components/expandComponent.js

@@ -27,7 +27,7 @@ export function ExpandComponent({ itemId }) {
             });
         }
     }
-    return (_jsx(IconButton, Object.assign({ onClick: toggle }, { children: _jsx(ChevronRight, { style: {
+    return (_jsx(IconButton, Object.assign({ size: "small", onClick: toggle }, { children: _jsx(ChevronRight, { style: {
                 transition: 'all 500ms',
                 transform: isExpanded ? 'rotate3d(0, 0, 1, 90deg)' : 'none',
             } }, void 0) }), void 0));

package/dist/esm/components/export.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Button, IconButton, makeStyles, Popover, Typography } from '@material-ui/core';
-import { AssignmentReturn, CloudDownload, GetApp } from '@material-ui/icons';
+import { AssignmentReturn, CloudDownload } from '@material-ui/icons';
 import { useState } from 'react';
 import { csvExport } from '../misc/csvExport';
 import { useTableContext } from '../table';
@@ -40,5 +40,5 @@ export function Export() {
         a.click();
         document.body.removeChild(a);
     };
-    return (_jsxs(_Fragment, { children: [_jsx(IconButton, Object.assign({ color: "inherit", onClick: (e) => setAnchor(e.currentTarget) }, { children: _jsx(GetApp, {}, void 0) }), void 0), _jsx(Popover, Object.assign({ open: !!anchor, onClose: () => setAnchor(null), anchorEl: anchor, anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, transformOrigin: { vertical: 'top', horizontal: 'center' } }, { children: _jsxs("div", Object.assign({ className: classes.dialog }, { children: [_jsx(Typography, Object.assign({ variant: "caption" }, { children: textTitle !== null && textTitle !== void 0 ? textTitle : 'Export' }), void 0), _jsx(Button, Object.assign({ startIcon: _jsx(AssignmentReturn, {}, void 0), fullWidth: true, onClick: copy }, { children: textCopy !== null && textCopy !== void 0 ? textCopy : 'In die Zwischenablage' }), void 0), _jsx(Button, Object.assign({ startIcon: _jsx(CloudDownload, {}, void 0), fullWidth: true, onClick: download }, { children: textDownload !== null && textDownload !== void 0 ? textDownload : 'Herunterladen' }), void 0)] }), void 0) }), void 0)] }, void 0));
+    return (_jsxs(_Fragment, { children: [_jsx(IconButton, Object.assign({ color: "inherit", size: "small", onClick: (e) => setAnchor(e.currentTarget) }, { children: _jsx(CloudDownload, {}, void 0) }), void 0), _jsx(Popover, Object.assign({ open: !!anchor, onClose: () => setAnchor(null), anchorEl: anchor, anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, transformOrigin: { vertical: 'top', horizontal: 'left' } }, { children: _jsxs("div", Object.assign({ className: classes.dialog }, { children: [_jsx(Typography, Object.assign({ variant: "caption" }, { children: textTitle !== null && textTitle !== void 0 ? textTitle : 'Export' }), void 0), _jsx(Button, Object.assign({ startIcon: _jsx(AssignmentReturn, {}, void 0), fullWidth: true, onClick: copy }, { children: textCopy !== null && textCopy !== void 0 ? textCopy : 'In die Zwischenablage' }), void 0), _jsx(Button, Object.assign({ startIcon: _jsx(CloudDownload, {}, void 0), fullWidth: true, onClick: download }, { children: textDownload !== null && textDownload !== void 0 ? textDownload : 'Herunterladen' }), void 0)] }), void 0) }), void 0)] }, void 0));
 }

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Id, InternalColumn } from '../types';
 export declare const calcClassName: (classes: InternalColumn<any, any>['classes'] | undefined, index: number) => string;
-export declare const Row: React.MemoExoticComponent<(<T>({ itemId }: {
+export declare const Row: React.MemoExoticComponent<(<T>({ itemId, rowIndex }: {
     itemId: Id;
+    rowIndex: number;
 }) => JSX.Element | null)>;

package/dist/esm/components/row.js

@@ -7,7 +7,7 @@ import { ExpandComponent } from './expandComponent';
 import { SelectComponent } from './selectComponent';
 import { useCommonClasses } from './useCommonClasses';
 export const calcClassName = (classes, index) => c(classes === null || classes === void 0 ? void 0 : classes.cell, (classes === null || classes === void 0 ? void 0 : classes.evenCell) === undefined ? undefined : { [classes.evenCell]: index % 2 === 0 }, (classes === null || classes === void 0 ? void 0 : classes.oddCell) === undefined ? undefined : { [classes.oddCell]: index % 2 === 1 });
-export const Row = memo(function Row({ itemId }) {
+export const Row = memo(function Row({ itemId, rowIndex }) {
     var _a, _b;
     const commonClasses = useCommonClasses();
     const state = useTableContext();
@@ -40,5 +40,5 @@ export const Row = memo(function Row({ itemId }) {
         return () => o.disconnect();
     }, [divRef.current]);
     (_b = (_a = state.getState().props).debug) === null || _b === void 0 ? void 0 : _b.call(_a, 'render row', itemId);
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: c(commonClasses.cellFill, className), ref: divRef }, void 0), _jsxs("div", Object.assign({ className: c(commonClasses.cell, commonClasses.firstCell, className) }, { children: [_jsx("div", { style: { width: indent * 20 } }, void 0), enableSelection && _jsx(SelectComponent, { itemId: itemId }, void 0), (hasChildren || hasDeferredChildren) && _jsx(ExpandComponent, { itemId: itemId }, void 0)] }), void 0), columnIds.map((columnId) => (_jsx(ColumnContext.Provider, Object.assign({ value: columnId }, { children: _jsx(Cell, { itemId: itemId }, void 0) }), columnId))), _jsx("div", { className: c(commonClasses.cellFill, className) }, void 0)] }, void 0));
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: c(commonClasses.cellFill, className), ref: divRef }, void 0), _jsxs("div", Object.assign({ className: c(commonClasses.cell, commonClasses.firstCell, className) }, { children: [_jsx("div", { style: { width: indent * 20 } }, void 0), enableSelection && _jsx(SelectComponent, { itemId: itemId }, void 0), (hasChildren || hasDeferredChildren) && _jsx(ExpandComponent, { itemId: itemId }, void 0)] }), void 0), columnIds.map((columnId) => (_jsx(ColumnContext.Provider, Object.assign({ value: columnId }, { children: _jsx(Cell, { itemId: itemId, rowIndex: rowIndex }, void 0) }), columnId))), _jsx("div", { className: c(commonClasses.cellFill, className) }, void 0)] }, void 0));
 });

package/dist/esm/components/textFilterComponent.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import '../misc/textMatch';
 import { Filter } from './filterComponent';
 export declare class TextFilter<T> implements Filter<T> {
     readonly query: string;

package/dist/esm/components/textFilterComponent.js

@@ -3,7 +3,6 @@ import { IconButton, makeStyles, TextField } from '@material-ui/core';
 import { Clear, Search } from '@material-ui/icons';
 import { useEffect, useState } from 'react';
 import { asString } from '../misc/helpers';
-import '../misc/textMatch';
 import { textMatch } from '../misc/textMatch';
 import { useColumnContext, useTableContext } from '../table';
 export class TextFilter {

package/dist/esm/components/useCommonClasses.d.ts

@@ -1 +1 @@
-export declare const useCommonClasses: (props?: any) => import("@material-ui/styles").ClassNameMap<"table" | "cell" | "sticky" | "headerCell" | "cellFill" | "firstCell" | "headerFill" | "deferredPlaceholder">;
+export declare const useCommonClasses: (props?: any) => import("@material-ui/styles").ClassNameMap<"table" | "text" | "cell" | "sticky" | "headerCell" | "cellFill" | "firstCell" | "headerFill" | "deferredPlaceholder">;

package/dist/esm/components/useCommonClasses.js

@@ -1,13 +1,11 @@
 import { makeStyles } from '@material-ui/core';
 const cell = (theme) => ({
-    padding: theme.spacing(0.5, 1),
-    display: 'grid',
-    gridAutoFlow: 'column',
+    padding: theme.spacing(0.1, 1),
+    display: 'flex',
     alignItems: 'center',
     borderBottom: `1px solid ${theme.palette.grey[200]}`,
     whiteSpace: 'nowrap',
     overflow: 'hidden',
-    textOverflow: 'ellipsis',
 });
 export const useCommonClasses = makeStyles((theme) => ({
     table: {
@@ -18,7 +16,7 @@ export const useCommonClasses = makeStyles((theme) => ({
     cellFill: {
         borderBottom: `1px solid ${theme.palette.grey[200]}`,
     },
-    headerCell: Object.assign(Object.assign({}, cell(theme)), { borderBottom: 'none', gridTemplateColumns: 'minmax(0, 1fr) max-content', background: theme.palette.primary.main, color: theme.palette.primary.contrastText, fontWeight: 'bold', '&:not(:first-child)': {
+    headerCell: Object.assign(Object.assign({}, cell(theme)), { borderBottom: `2px solid ${theme.palette.grey[400]}`, gridTemplateColumns: 'minmax(0, 1fr) max-content', background: theme.palette.common.white, '&:not(:first-child)': {
             borderLeft: `1px solid ${theme.palette.background.default}`,
         } }),
     firstCell: {
@@ -30,7 +28,8 @@ export const useCommonClasses = makeStyles((theme) => ({
         zIndex: 1,
     },
     headerFill: {
-        background: theme.palette.primary.main,
+        borderBottom: `3px solid ${theme.palette.grey[200]}`,
+        background: theme.palette.common.white,
     },
     deferredPlaceholder: {
         padding: theme.spacing(1),
@@ -39,4 +38,9 @@ export const useCommonClasses = makeStyles((theme) => ({
         display: 'grid',
         justifyContent: 'center',
     },
+    text: {
+        minWidth: 0,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+    },
 }));

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

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

package/dist/esm/components/virtualized.js

@@ -47,7 +47,7 @@ export function Virtualized(_a) {
     const virtual = state.useState('props.virtual');
     const probeRef = useRef(null);
     const [counter, setCounter] = useState(0);
-    const { itemIds = [], from, to, before = 0, after = 0, } = state.useState((state) => {
+    const { itemIds = [], from = 0, to, before = 0, after = 0, } = state.useState((state) => {
         var _a;
         const itemIds = state.activeItems.map((item) => item.id);
         const root = probeRef.current && findScrollRoot(probeRef.current);
@@ -55,7 +55,7 @@ export function Virtualized(_a) {
             return { itemIds };
         if (!probeRef.current || !root || !document.contains(root))
             return {};
-        const { rowHeight, initalRowHeight } = (_a = (state.props.virtual instanceof Object ? state.props.virtual : undefined)) !== null && _a !== void 0 ? _a : {};
+        const { rowHeight, initalRowHeight, overscan = 200, overscanTop, overscanBottom, } = (_a = (state.props.virtual instanceof Object ? state.props.virtual : undefined)) !== null && _a !== void 0 ? _a : {};
         let totalHeight = 0;
         const rowHeights = itemIds.map((itemId, index) => {
             var _a, _b;
@@ -69,13 +69,13 @@ export function Virtualized(_a) {
         const bottomOfTable = topOfTable + root.clientHeight - headerHeight;
         let from = 0, to = itemIds.length, before = 0, after = 0;
         for (const h of rowHeights) {
-            if (before + h > topOfTable)
+            if (before + h > topOfTable - (overscanTop !== null && overscanTop !== void 0 ? overscanTop : overscan))
                 break;
             from++;
             before += h;
         }
         for (const h of rowHeights.reverse()) {
-            if (after + h > totalHeight - bottomOfTable)
+            if (after + h > totalHeight - bottomOfTable - (overscanBottom !== null && overscanBottom !== void 0 ? overscanBottom : overscan))
                 break;
             to--;
             after += h;
@@ -90,5 +90,5 @@ export function Virtualized(_a) {
         return onAncestorScroll(probeRef.current, incCounter);
     }, [probeRef.current, incCounter]);
     (_e = (_d = state.getState().props).debug) === null || _e === void 0 ? void 0 : _e.call(_d, `Virtualalized render ${from} to ${to}`);
-    return (_jsxs("div", Object.assign({}, props, { children: [header, virtual && _jsx("div", { style: { gridColumn: '1 / -1', height: before }, ref: probeRef }, void 0), children(itemIds), virtual && _jsx("div", { style: { gridColumn: '1 / -1', height: after } }, void 0)] }), void 0));
+    return (_jsxs("div", Object.assign({}, props, { children: [header, virtual && _jsx("div", { style: { gridColumn: '1 / -1', height: before }, ref: probeRef }, void 0), children(itemIds, from), virtual && _jsx("div", { style: { gridColumn: '1 / -1', height: after } }, void 0)] }), void 0));
 }

package/dist/esm/index.d.ts

@@ -1,5 +1,6 @@
 export { DefaultFilter, DefaultFilterComponent } from './components/defaultFilterComponent';
+export { Filter } from './components/filterComponent';
 export { TextFilter, TextFilterComponent } from './components/textFilterComponent';
 export { termMatch, textMatch } from './misc/textMatch';
 export { ColumnContext, Table, TableContext, useColumnContext, useTableContext } from './table';
-export type { Column, Id, Rows, Sort, SortDirection, TableProps } from './types';
+export type { Column, Id, InternalColumn, Rows, Sort, SortDirection, TableProps } from './types';

package/dist/esm/internalState/calcProps.js

@@ -9,10 +9,11 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { useMemo } from 'react';
+import { useMemo, useRef } from 'react';
 import { asString } from '../misc/helpers';
 const noopParentId = () => undefined;
 export function calcProps(props) {
+    const columnCache = useRef(new Map());
     return useMemo(() => {
         var _a, _b;
         let id;
@@ -37,15 +38,31 @@ export function calcProps(props) {
             inputColumns = props.columns((value, column) => (Object.assign(Object.assign({}, column), { value })));
         }
         else {
-            inputColumns = props.columns;
+            inputColumns = props.columns.map((column) => (Object.assign(Object.assign({}, column), { dependecies: undefined })));
         }
+        const newColumnCache = new Map();
         const columns = inputColumns.map(function (_a, index) {
-            var { id, header = null, renderCell = asString, exportCell = asString, sortBy = (v) => (typeof v === 'number' || v instanceof Date ? v : String(v)) } = _a, props = __rest(_a, ["id", "header", "renderCell", "exportCell", "sortBy"]);
-            return Object.assign({ id: id !== null && id !== void 0 ? id : index, header,
-                renderCell,
-                exportCell,
-                sortBy }, props);
+            var _b;
+            var { id, header = null, renderCell = asString, exportCell = asString, sortBy = (v) => (typeof v === 'number' || v instanceof Date ? v : String(v)), dependencies = [] } = _a, props = __rest(_a, ["id", "header", "renderCell", "exportCell", "sortBy", "dependencies"]);
+            const [depsInCache, columnInCache] = (_b = columnCache.current.get(id !== null && id !== void 0 ? id : index)) !== null && _b !== void 0 ? _b : [];
+            let column;
+            if (depsInCache &&
+                columnInCache &&
+                depsInCache.length === dependencies.length &&
+                depsInCache.every((x, i) => dependencies[i] === x)) {
+                column = columnInCache;
+            }
+            else {
+                column = Object.assign({ id: id !== null && id !== void 0 ? id : index, header,
+                    renderCell,
+                    exportCell,
+                    sortBy,
+                    dependencies }, props);
+            }
+            newColumnCache.set(id !== null && id !== void 0 ? id : index, [dependencies, column]);
+            return column;
         });
+        columnCache.current = newColumnCache;
         let copy;
         if (props.enableExport === true || (props.enableExport instanceof Object && props.enableExport.copy === true)) {
             copy = { separator: '\t' };

package/dist/esm/table.js

@@ -59,5 +59,5 @@ const TableInner = memo(function TableInner() {
         }, header: _jsxs(_Fragment, { children: [_jsx("div", { className: c(commonClasses.headerFill, { [commonClasses.sticky]: !!stickyHeader }, classes === null || classes === void 0 ? void 0 : classes.headerCell) }, void 0), _jsxs("div", Object.assign({ className: c(commonClasses.headerCell, { [commonClasses.sticky]: !!stickyHeader }, classes === null || classes === void 0 ? void 0 : classes.headerCell) }, { children: [enableSelection && _jsx(SelectComponent, {}, void 0), enableColumnSelection && _jsx(ColumnSelection, {}, void 0), enableExport && _jsx(Export, {}, void 0)] }), void 0), activeColumns.map((column) => {
                     var _a;
                     return (_jsx(ColumnContext.Provider, Object.assign({ value: column.id }, { children: _jsxs("div", Object.assign({ className: c(commonClasses.headerCell, { [commonClasses.sticky]: !!stickyHeader }, classes === null || classes === void 0 ? void 0 : classes.headerCell, (_a = column.classes) === null || _a === void 0 ? void 0 : _a.headerCell) }, { children: [_jsx(SortComponent, { children: column.header }, void 0), _jsx(FilterComponent, {}, void 0)] }), column.id) }), column.id));
-                }), _jsx("div", { className: c(commonClasses.headerFill, { [commonClasses.sticky]: !!stickyHeader }, classes === null || classes === void 0 ? void 0 : classes.headerCell) }, void 0)] }, void 0) }, { children: (itemIds) => itemIds.map((itemId) => _jsx(Row, { itemId: itemId }, itemId)) }), void 0));
+                }), _jsx("div", { className: c(commonClasses.headerFill, { [commonClasses.sticky]: !!stickyHeader }, classes === null || classes === void 0 ? void 0 : classes.headerCell) }, void 0)] }, void 0) }, { children: (itemIds, startIndex) => itemIds.map((itemId, index) => _jsx(Row, { itemId: itemId, rowIndex: startIndex + index }, itemId)) }), void 0));
 });

package/dist/esm/types.d.ts

@@ -38,6 +38,9 @@ export declare type TableProps<T> = {
         rowHeight?: number;
         initalRowHeight?: number;
         throttleScroll?: number;
+        overscan?: number;
+        overscanBottom?: number;
+        overscanTop?: number;
     };
     text?: {
         deselectAll?: string;
@@ -97,6 +100,8 @@ export declare type Column<T, V> = {
         evenCell?: string;
         oddCell?: string;
     };
+    /** 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'> & {
     id: Id;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "schummar-table",
   "repository": "schummar/schummar-table",
-  "version": "0.2.0",
+  "version": "0.3.2",
   "description": "",
   "type": "module",
   "sideEffects": false,
@@ -18,7 +18,7 @@
   "license": "ISC",
   "scripts": {
     "start": "npm --prefix example run dev",
-    "dev": "run-p start:*",
+    "dev": "run-p dev:*",
     "dev:esm": "tsc --watch",
     "dev:cjs": "tsc -p tsconfig-cjs.json --watch",
     "build": "npm-run-all -s build:clean -p build:compile:*",
@@ -36,30 +36,30 @@
   "peerDependencies": {
     "@material-ui/core": ">=4.11.4",
     "@material-ui/icons": ">=4.11.2",
-    "@types/react": "^17.0.11",
-    "immer": "^9.0.3",
+    "@types/react": ">=17.0.11",
+    "immer": ">=9.0.3",
     "react": ">=16.8.0",
-    "schummar-state": "^0.0.36"
+    "schummar-state": ">=0.0.36"
   },
   "devDependencies": {
-    "@testing-library/react": "^12.0.0",
+    "@testing-library/react": "^12.1.2",
     "@types/react": "*",
-    "@typescript-eslint/eslint-plugin": "^4.31.0",
-    "@typescript-eslint/parser": "^4.31.0",
+    "@typescript-eslint/eslint-plugin": "^5.4.0",
+    "@typescript-eslint/parser": "^5.4.0",
     "ava": "^3.15.0",
-    "eslint": "^7.32.0",
-    "global-jsdom": "^8.2.0",
+    "eslint": "^8.2.0",
+    "global-jsdom": "^8.3.0",
     "immer": "*",
-    "jsdom": "^17.0.0",
+    "jsdom": "^18.1.0",
     "npm-run-all": "^4.1.5",
     "nyc": "^15.1.0",
-    "prettier": "^2.4.0",
+    "prettier": "^2.4.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "rimraf": "^3.0.2",
     "schummar-state": "*",
-    "ts-node": "^9.1.1",
-    "typescript": "^4.4.2"
+    "ts-node": "^10.4.0",
+    "typescript": "^4.5.2"
   },
   "files": [
     "dist"