schummar-table 0.2.1 → 0.4.0

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, item, rowIndex), (0, row_1.calcClassName)(column === null || column === void 0 ? void 0 : column.classes, item, 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 function calcClassName<T>(classes: InternalColumn<any, any>['classes'] | undefined, item: T, index: number): string;
+export declare const Row: React.MemoExoticComponent<(<T>({ itemId, rowIndex }: {
     itemId: Id;
+    rowIndex: number;
 }) => JSX.Element | null)>;

package/dist/cjs/components/row.js

@@ -9,24 +9,27 @@ const cell_1 = require("./cell");
 const expandComponent_1 = require("./expandComponent");
 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 });
+function calcClassName(classes, item, index) {
+    return (0, helpers_1.c)((classes === null || classes === void 0 ? void 0 : classes.cell) instanceof Function ? classes.cell(item, index) : 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)();
     const divRef = (0, react_1.useRef)(null);
-    const { className, indent, hasChildren, hasDeferredChildren, columnIds, enableSelection } = state.useState((state) => {
+    const { className, indent, hasChildren, hasDeferredChildren, columnIds, enableSelection, rowAction } = state.useState((state) => {
         var _a, _b;
         const item = state.activeItemsById.get(itemId);
         const index = !item ? -1 : state.activeItems.indexOf(item);
         return {
-            className: (0, exports.calcClassName)(state.props.classes, index),
+            className: calcClassName(state.props.classes, item, index),
             indent: item ? (0, helpers_1.getAncestors)(state.activeItemsById, item).size : 0,
             hasChildren: !!(item === null || item === void 0 ? void 0 : item.children.length),
             hasDeferredChildren: item && ((_b = (_a = state.props).hasDeferredChildren) === null || _b === void 0 ? void 0 : _b.call(_a, item)),
             columnIds: state.activeColumns.map((column) => column.id),
             enableSelection: state.props.enableSelection,
+            rowAction: state.props.rowAction instanceof Function ? (item ? state.props.rowAction(item, index) : null) : state.props.rowAction,
         };
     }, [itemId]);
     (0, react_1.useEffect)(() => {
@@ -44,5 +47,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), rowAction] }), 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 type { 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/internalState/tableStateStorage.d.ts

@@ -0,0 +1,11 @@
+export declare type TableStateStorage = {
+    getItem: (key: string) => string | null | Promise<string | null>;
+    setItem: (key: string, value: string) => unknown | Promise<unknown>;
+    removeItem: (key: string) => unknown | Promise<unknown>;
+} & ({
+    keys: () => string[] | Promise<string[]>;
+} | {
+    length: number | (() => number | Promise<number>);
+    key: (keyIndex: number) => string | null | Promise<string | null>;
+});
+export declare function useTableStateStorage(): void;

package/dist/cjs/internalState/tableStateStorage.js

@@ -0,0 +1,74 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTableStateStorage = void 0;
+const react_1 = require("react");
+const __1 = require("..");
+const queue_1 = require("../misc/queue");
+const KEYS = ['sort', 'selection', 'expanded', 'hiddenColumns'];
+function useTableStateStorage() {
+    const state = (0, __1.useTableContext)();
+    // On mount: load
+    (0, react_1.useEffect)(() => {
+        const { storeState, debug } = state.getState().props;
+        if (!storeState)
+            return;
+        let isCanceled = false;
+        const q = new queue_1.Queue();
+        q.run(() => __awaiter(this, void 0, void 0, function* () {
+            try {
+                const { storage, id = 'table', include } = storeState;
+                const json = yield storage.getItem(`${id}_state`);
+                if (isCanceled || !json)
+                    return;
+                const data = JSON.parse(json);
+                state.update((state) => {
+                    for (const key of KEYS) {
+                        if (!include || include[key]) {
+                            const value = key === 'sort' ? data.sort : new Set(data[key]);
+                            state[key] = value;
+                        }
+                    }
+                });
+            }
+            catch (e) {
+                debug === null || debug === void 0 ? void 0 : debug('Failed to load table state:', e);
+            }
+        }));
+        state.subscribe((state) => {
+            if (!state.props.storeState)
+                return;
+            const data = {};
+            for (const key of KEYS) {
+                if (!state.props.storeState.include || state.props.storeState.include[key]) {
+                    const value = key === 'sort' ? state.sort : Array.from(state[key]);
+                    data[key] = value;
+                }
+            }
+            return {
+                storage: state.props.storeState.storage,
+                id: state.props.storeState.id,
+                data,
+            };
+        }, (props) => {
+            if (!props)
+                return;
+            const { storage, id = 'table', data } = props;
+            q.run(() => __awaiter(this, void 0, void 0, function* () {
+                yield storage.setItem(`${id}_state`, JSON.stringify(data));
+            }));
+        });
+        return () => {
+            isCanceled = true;
+        };
+    }, []);
+}
+exports.useTableStateStorage = useTableStateStorage;

package/dist/cjs/misc/queue.d.ts

@@ -0,0 +1,6 @@
+export declare class Queue {
+    private q;
+    private isRunning;
+    run<T>(job: () => Promise<T>): Promise<T>;
+    private start;
+}

package/dist/cjs/misc/queue.js

@@ -0,0 +1,42 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Queue = void 0;
+class Queue {
+    constructor() {
+        this.q = new Array();
+        this.isRunning = false;
+    }
+    run(job) {
+        return new Promise((resolve, reject) => {
+            this.q.push({ job, resolve, reject });
+            if (!this.isRunning)
+                this.start();
+        });
+    }
+    start() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.isRunning = true;
+            let next;
+            while ((next = this.q.shift())) {
+                try {
+                    const result = yield next.job();
+                    next.resolve(result);
+                }
+                catch (e) {
+                    next.reject(e);
+                }
+            }
+            this.isRunning = false;
+        });
+    }
+}
+exports.Queue = Queue;

package/dist/cjs/table.d.ts

@@ -5,4 +5,7 @@ export declare const TableContext: React.Context<Store<InternalTableState<any>>
 export declare const ColumnContext: React.Context<Id | null>;
 export declare function useTableContext<T>(): Store<InternalTableState<T>>;
 export declare function useColumnContext(): Id;
+declare let defaultProps: Pick<TableProps<unknown>, 'text' | 'classes'>;
+export declare function configureTables(props: typeof defaultProps): void;
 export declare function Table<T>(props: TableProps<T>): JSX.Element;
+export {};

package/dist/cjs/table.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Table = exports.useColumnContext = exports.useTableContext = exports.ColumnContext = exports.TableContext = void 0;
+exports.Table = exports.configureTables = exports.useColumnContext = exports.useTableContext = exports.ColumnContext = exports.TableContext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const columnSelection_1 = require("./components/columnSelection");
@@ -11,6 +11,7 @@ const selectComponent_1 = require("./components/selectComponent");
 const sortComponent_1 = require("./components/sortComponent");
 const useCommonClasses_1 = require("./components/useCommonClasses");
 const virtualized_1 = require("./components/virtualized");
+const tableStateStorage_1 = require("./internalState/tableStateStorage");
 const useTableState_1 = require("./internalState/useTableState");
 const helpers_1 = require("./misc/helpers");
 exports.TableContext = (0, react_1.createContext)(null);
@@ -29,8 +30,17 @@ function useColumnContext() {
     return value;
 }
 exports.useColumnContext = useColumnContext;
+let defaultProps = {};
+function configureTables(props) {
+    defaultProps = props;
+}
+exports.configureTables = configureTables;
+function mergeProps(props) {
+    return Object.assign(Object.assign({}, props), { text: Object.assign(Object.assign({}, defaultProps.text), props.text), classes: Object.assign(Object.assign({}, defaultProps.classes), props.classes) });
+}
 function Table(props) {
     var _a, _b;
+    props = mergeProps(props);
     const state = (0, useTableState_1.useTableState)(props);
     (_b = (_a = state.getState().props).debug) === null || _b === void 0 ? void 0 : _b.call(_a, 'render table');
     return ((0, jsx_runtime_1.jsx)(exports.TableContext.Provider, Object.assign({ value: state }, { children: (0, jsx_runtime_1.jsx)(TableInner, {}, void 0) }), void 0));
@@ -38,6 +48,7 @@ function Table(props) {
 exports.Table = Table;
 const TableInner = (0, react_1.memo)(function TableInner() {
     var _a, _b;
+    (0, tableStateStorage_1.useTableStateStorage)();
     const commonClasses = (0, useCommonClasses_1.useCommonClasses)();
     const state = useTableContext();
     const fullWidth = state.useState('props.fullWidth');
@@ -65,5 +76,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

@@ -1,6 +1,7 @@
 import { CSSProperties, ReactNode } from 'react';
 import { Filter } from './components/filterComponent';
 import { CsvExportOptions } from './misc/csvExport';
+import { TableStateStorage } from './internalState/tableStateStorage';
 export declare type Sort = {
     columnId: string | number;
     direction: SortDirection;
@@ -16,6 +17,7 @@ export declare type TableProps<T> = {
     parentId?: ((item: T) => Id | undefined) | KeyOfType<T, Id | undefined>;
     hasDeferredChildren?: (item: T) => boolean;
     columns: Column<T, any>[] | ((col: <V>(value: (item: T) => V, column: Omit<Column<T, V>, 'value'>) => Column<T, V>) => Column<T, any>[]);
+    rowAction?: ReactNode | ((item: T, index: number) => ReactNode);
     defaultSort?: Sort[];
     sort?: Sort[];
     onSortChange?: (sort: Sort[]) => void;
@@ -38,17 +40,20 @@ export declare type TableProps<T> = {
         rowHeight?: number;
         initalRowHeight?: number;
         throttleScroll?: number;
+        overscan?: number;
+        overscanBottom?: number;
+        overscanTop?: number;
     };
     text?: {
-        deselectAll?: string;
-        exportTitle?: string;
-        exportCopy?: string;
-        exportDownload?: string;
+        deselectAll?: ReactNode;
+        exportTitle?: ReactNode;
+        exportCopy?: ReactNode;
+        exportDownload?: ReactNode;
     };
     classes?: {
         table?: string;
         headerCell?: string;
-        cell?: string;
+        cell?: string | ((item: T, index: number) => string | undefined);
         evenCell?: string;
         oddCell?: string;
     };
@@ -60,6 +65,16 @@ export declare type TableProps<T> = {
         copy?: boolean | CsvExportOptions;
         download?: boolean | CsvExportOptions;
     };
+    storeState?: {
+        storage: TableStateStorage;
+        id?: string;
+        include?: {
+            sort?: boolean;
+            selection?: boolean;
+            expanded?: boolean;
+            hiddenColumns?: boolean;
+        };
+    };
 };
 export declare type InternalTableProps<T> = Omit<TableProps<T>, 'id' | 'parentId' | 'columns' | 'enableSelection' | 'enableColumnSelection' | 'enableExport'> & {
     id: (item: T) => Id;
@@ -93,10 +108,12 @@ export declare type Column<T, V> = {
     justifyContent?: CSSProperties['justifyContent'];
     classes?: {
         headerCell?: string;
-        cell?: string;
+        cell?: string | ((item: T, index: number) => string | undefined);
         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)>;