schummar-table 0.3.0 → 0.4.1

package/dist/cjs/components/cell.js

@@ -15,13 +15,17 @@ exports.Cell = (0, react_1.memo)(function Cell({ itemId, rowIndex }) {
     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');
-    const wrapCell = state.useState('props.wrapCell');
+    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);
-    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 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)
-        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: wrapCell(content, item) }, void 0);
-    return (0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, helpers_1.c)(commonClasses.cell, className) }, { children: content }), void 0);
+    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/row.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Id, InternalColumn } from '../types';
-export declare const calcClassName: (classes: InternalColumn<any, any>['classes'] | undefined, index: number) => string;
+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;

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, 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, rowIndex }) {
         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, rowIndex: rowIndex }, 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

@@ -4,13 +4,11 @@ exports.useCommonClasses = void 0;
 const core_1 = require("@material-ui/core");
 const cell = (theme) => ({
     padding: theme.spacing(0.1, 1),
-    display: 'grid',
-    gridAutoFlow: 'column',
+    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: {
@@ -43,4 +41,9 @@ exports.useCommonClasses = (0, core_1.makeStyles)((theme) => ({
         display: 'grid',
         justifyContent: 'center',
     },
+    text: {
+        minWidth: 0,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+    },
 }));

package/dist/cjs/index.d.ts

@@ -1,5 +1,7 @@
 export { DefaultFilter, DefaultFilterComponent } from './components/defaultFilterComponent';
+export type { Filter } from './components/filterComponent';
 export { TextFilter, TextFilterComponent } from './components/textFilterComponent';
+export type { TableStateStorage } from './internalState/tableStateStorage';
 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 { ColumnContext, configureTables, Table, TableContext, useColumnContext, useTableContext } from './table';
+export type { Column, Id, InternalColumn, Rows, Sort, SortDirection, TableProps } from './types';

package/dist/cjs/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTableContext = exports.useColumnContext = exports.TableContext = exports.Table = exports.ColumnContext = exports.textMatch = exports.termMatch = exports.TextFilterComponent = exports.TextFilter = exports.DefaultFilterComponent = exports.DefaultFilter = void 0;
+exports.useTableContext = exports.useColumnContext = exports.TableContext = exports.Table = exports.configureTables = exports.ColumnContext = exports.textMatch = exports.termMatch = exports.TextFilterComponent = exports.TextFilter = exports.DefaultFilterComponent = exports.DefaultFilter = void 0;
 var defaultFilterComponent_1 = require("./components/defaultFilterComponent");
 Object.defineProperty(exports, "DefaultFilter", { enumerable: true, get: function () { return defaultFilterComponent_1.DefaultFilter; } });
 Object.defineProperty(exports, "DefaultFilterComponent", { enumerable: true, get: function () { return defaultFilterComponent_1.DefaultFilterComponent; } });
@@ -12,6 +12,7 @@ Object.defineProperty(exports, "termMatch", { enumerable: true, get: function ()
 Object.defineProperty(exports, "textMatch", { enumerable: true, get: function () { return textMatch_1.textMatch; } });
 var table_1 = require("./table");
 Object.defineProperty(exports, "ColumnContext", { enumerable: true, get: function () { return table_1.ColumnContext; } });
+Object.defineProperty(exports, "configureTables", { enumerable: true, get: function () { return table_1.configureTables; } });
 Object.defineProperty(exports, "Table", { enumerable: true, get: function () { return table_1.Table; } });
 Object.defineProperty(exports, "TableContext", { enumerable: true, get: function () { return table_1.TableContext; } });
 Object.defineProperty(exports, "useColumnContext", { enumerable: true, get: function () { return table_1.useColumnContext; } });

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');

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;
@@ -43,15 +45,15 @@ export declare type TableProps<T> = {
         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;
     };
@@ -63,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;
@@ -96,7 +108,7 @@ 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;
     };

package/dist/esm/components/cell.js

@@ -1,4 +1,4 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { memo } from 'react';
 import { useColumnContext, useTableContext } from '..';
 import { c } from '../misc/helpers';
@@ -12,13 +12,17 @@ export const Cell = memo(function Cell({ itemId, rowIndex }) {
     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');
-    const wrapCell = state.useState('props.wrapCell');
+    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);
-    const className = c(calcClassName(classes, rowIndex), calcClassName(column === null || column === void 0 ? void 0 : column.classes, rowIndex));
+    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)
-        return _jsx(_Fragment, { children: wrapCell(content, item) }, void 0);
-    return _jsx("div", Object.assign({ className: c(commonClasses.cell, className) }, { children: content }), void 0);
+    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/row.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Id, InternalColumn } from '../types';
-export declare const calcClassName: (classes: InternalColumn<any, any>['classes'] | undefined, index: number) => string;
+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;

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 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, rowIndex }) {
         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, rowIndex: rowIndex }, 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.1, 1),
-    display: 'grid',
-    gridAutoFlow: 'column',
+    display: 'flex',
     alignItems: 'center',
     borderBottom: `1px solid ${theme.palette.grey[200]}`,
     whiteSpace: 'nowrap',
     overflow: 'hidden',
-    textOverflow: 'ellipsis',
 });
 export const useCommonClasses = makeStyles((theme) => ({
     table: {
@@ -40,4 +38,9 @@ export const useCommonClasses = makeStyles((theme) => ({
         display: 'grid',
         justifyContent: 'center',
     },
+    text: {
+        minWidth: 0,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+    },
 }));

package/dist/esm/index.d.ts

@@ -1,5 +1,7 @@
 export { DefaultFilter, DefaultFilterComponent } from './components/defaultFilterComponent';
+export type { Filter } from './components/filterComponent';
 export { TextFilter, TextFilterComponent } from './components/textFilterComponent';
+export type { TableStateStorage } from './internalState/tableStateStorage';
 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 { ColumnContext, configureTables, Table, TableContext, useColumnContext, useTableContext } from './table';
+export type { Column, Id, InternalColumn, Rows, Sort, SortDirection, TableProps } from './types';

package/dist/esm/index.js

@@ -1,4 +1,4 @@
 export { DefaultFilter, DefaultFilterComponent } from './components/defaultFilterComponent';
 export { TextFilter, TextFilterComponent } from './components/textFilterComponent';
 export { termMatch, textMatch } from './misc/textMatch';
-export { ColumnContext, Table, TableContext, useColumnContext, useTableContext } from './table';
+export { ColumnContext, configureTables, Table, TableContext, useColumnContext, useTableContext } from './table';

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');

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;
@@ -43,15 +45,15 @@ export declare type TableProps<T> = {
         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;
     };
@@ -63,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;
@@ -96,7 +108,7 @@ 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;
     };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "schummar-table",
   "repository": "schummar/schummar-table",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "description": "",
   "type": "module",
   "sideEffects": false,
@@ -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"