schummar-table 0.2.1 → 0.4.0

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, item, rowIndex), 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) => (_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 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/esm/components/row.js

@@ -6,23 +6,26 @@ import { Cell } from './cell';
 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 function calcClassName(classes, item, index) {
+    return 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 });
+}
+export const Row = memo(function Row({ itemId, rowIndex }) {
     var _a, _b;
     const commonClasses = useCommonClasses();
     const state = useTableContext();
     const divRef = 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: calcClassName(state.props.classes, index),
+            className: calcClassName(state.props.classes, item, index),
             indent: item ? 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]);
     useEffect(() => {
@@ -40,5 +43,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), rowAction] }), 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 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/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/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/esm/internalState/tableStateStorage.js

@@ -0,0 +1,70 @@
+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());
+    });
+};
+import { useEffect } from 'react';
+import { useTableContext } from '..';
+import { Queue } from '../misc/queue';
+const KEYS = ['sort', 'selection', 'expanded', 'hiddenColumns'];
+export function useTableStateStorage() {
+    const state = useTableContext();
+    // On mount: load
+    useEffect(() => {
+        const { storeState, debug } = state.getState().props;
+        if (!storeState)
+            return;
+        let isCanceled = false;
+        const q = new 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;
+        };
+    }, []);
+}

package/dist/esm/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/esm/misc/queue.js

@@ -0,0 +1,38 @@
+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());
+    });
+};
+export 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;
+        });
+    }
+}

package/dist/esm/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/esm/table.js

@@ -8,6 +8,7 @@ import { SelectComponent } from './components/selectComponent';
 import { SortComponent } from './components/sortComponent';
 import { useCommonClasses } from './components/useCommonClasses';
 import { Virtualized } from './components/virtualized';
+import { useTableStateStorage } from './internalState/tableStateStorage';
 import { useTableState } from './internalState/useTableState';
 import { c } from './misc/helpers';
 export const TableContext = createContext(null);
@@ -24,14 +25,23 @@ export function useColumnContext() {
         throw Error('No column context available');
     return value;
 }
+let defaultProps = {};
+export function configureTables(props) {
+    defaultProps = props;
+}
+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) });
+}
 export function Table(props) {
     var _a, _b;
+    props = mergeProps(props);
     const state = useTableState(props);
     (_b = (_a = state.getState().props).debug) === null || _b === void 0 ? void 0 : _b.call(_a, 'render table');
     return (_jsx(TableContext.Provider, Object.assign({ value: state }, { children: _jsx(TableInner, {}, void 0) }), void 0));
 }
 const TableInner = memo(function TableInner() {
     var _a, _b;
+    useTableStateStorage();
     const commonClasses = useCommonClasses();
     const state = useTableContext();
     const fullWidth = state.useState('props.fullWidth');
@@ -59,5 +69,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

@@ -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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "schummar-table",
   "repository": "schummar/schummar-table",
-  "version": "0.2.1",
+  "version": "0.4.0",
   "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:*",
@@ -42,15 +42,16 @@
     "schummar-state": ">=0.0.36"
   },
   "devDependencies": {
-    "@testing-library/react": "^12.1.0",
+    "@testing-library/react": "^12.1.2",
     "@types/react": "*",
-    "@typescript-eslint/eslint-plugin": "^4.31.1",
-    "@typescript-eslint/parser": "^4.31.1",
+    "@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",
+    "localforage": "^1.10.0",
     "npm-run-all": "^4.1.5",
     "nyc": "^15.1.0",
     "prettier": "^2.4.1",
@@ -58,8 +59,8 @@
     "react-dom": "^17.0.2",
     "rimraf": "^3.0.2",
     "schummar-state": "*",
-    "ts-node": "^9.1.1",
-    "typescript": "^4.4.3"
+    "ts-node": "^10.4.0",
+    "typescript": "^4.5.2"
   },
   "files": [
     "dist"