schummar-table 0.1.0 → 0.3.1

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/internalState/calcProps.js

@@ -9,18 +9,13 @@ 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) {
-    let inputColumns;
-    if (props.columns instanceof Function) {
-        inputColumns = props.columns((value, column) => (Object.assign(Object.assign({}, column), { value })));
-    }
-    else {
-        inputColumns = props.columns;
-    }
-    const withMemoizedFunctions = useMemo(() => {
+    const columnCache = useRef(new Map());
+    return useMemo(() => {
+        var _a, _b;
         let id;
         if (props.id instanceof Function) {
             id = props.id;
@@ -38,33 +33,53 @@ export function calcProps(props) {
         else {
             parentId = noopParentId;
         }
-        const columns = inputColumns.map(function ({ id, value, sortBy = (v) => (typeof v === 'number' || v instanceof Date ? v : String(v)), renderCell = asString, filterComponent, onFilterChange, }, index) {
-            return {
-                id: id !== null && id !== void 0 ? id : index,
-                value,
-                sortBy,
-                renderCell,
-                filterComponent,
-                onFilterChange,
-            };
+        let inputColumns;
+        if (props.columns instanceof Function) {
+            inputColumns = props.columns((value, column) => (Object.assign(Object.assign({}, column), { value })));
+        }
+        else {
+            inputColumns = props.columns.map((column) => (Object.assign(Object.assign({}, column), { dependecies: undefined })));
+        }
+        const newColumnCache = new Map();
+        const columns = inputColumns.map(function (_a, index) {
+            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;
         });
-        return {
-            id,
+        columnCache.current = newColumnCache;
+        let copy;
+        if (props.enableExport === true || (props.enableExport instanceof Object && props.enableExport.copy === true)) {
+            copy = { separator: '\t' };
+        }
+        else if (props.enableExport && props.enableExport.copy instanceof Object) {
+            copy = props.enableExport.copy;
+        }
+        let download;
+        if (props.enableExport === true || (props.enableExport instanceof Object && props.enableExport.download === true)) {
+            download = { sepPrefix: true };
+        }
+        else if (props.enableExport && props.enableExport.download instanceof Object) {
+            download = props.enableExport.download;
+        }
+        const enableExport = { copy, download };
+        return Object.assign(Object.assign({}, props), { id,
             parentId,
-            hasDeferredChildren: props.hasDeferredChildren,
-            onSortChange: props.onSortChange,
-            onExpandedChange: props.onExpandedChange,
-            onHiddenColumnsChange: props.onHiddenColumnsChange,
-            debug: props.debug,
-            columns,
-        };
-    }, props.dependencies);
-    const columns = inputColumns.map(function (_a, index) {
-        var { id, header = null, value, sortBy = (v) => (typeof v === 'number' || v instanceof Date ? v : String(v)), renderCell = (v) => v } = _a, props = __rest(_a, ["id", "header", "value", "sortBy", "renderCell"]);
-        return Object.assign(Object.assign(Object.assign({}, props), { id: id !== null && id !== void 0 ? id : index, header,
-            value,
-            sortBy,
-            renderCell }), withMemoizedFunctions.columns.find((c) => c.id === (id !== null && id !== void 0 ? id : index)));
-    });
-    return useMemo(() => (Object.assign(Object.assign(Object.assign({}, props), withMemoizedFunctions), { columns })), [props]);
+            columns, enableSelection: (_a = props.enableSelection) !== null && _a !== void 0 ? _a : true, enableColumnSelection: (_b = props.enableColumnSelection) !== null && _b !== void 0 ? _b : true, enableExport });
+    }, [props]);
 }

package/dist/esm/misc/csvExport.d.ts

@@ -0,0 +1,7 @@
+export declare type CsvExportOptions = {
+    sepPrefix?: boolean;
+    separator?: string;
+    quote?: string;
+    eol?: string;
+};
+export declare function csvExport(data: (string | number)[][], { sepPrefix, separator, quote, eol }?: CsvExportOptions): string;

package/dist/esm/misc/csvExport.js

@@ -0,0 +1,11 @@
+export function csvExport(data, { sepPrefix, separator = ',', quote = '"', eol = '\n' } = {}) {
+    const cells = data.map((line) => line.map((value) => {
+        if (typeof value === 'number')
+            return String(value);
+        if (![separator, quote, eol].some((c) => value.includes(c)))
+            return value;
+        const clean = value.replace(new RegExp(quote, 'g'), `${quote}${quote}`);
+        return `${quote}${clean}${quote}`;
+    }));
+    return (sepPrefix ? `SEP=${separator}\n` : '') + cells.map((line) => line.join(separator)).join(eol);
+}

package/dist/esm/table.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { createContext, memo, useContext } from 'react';
 import { ColumnSelection } from './components/columnSelection';
+import { Export } from './components/export';
 import { FilterComponent } from './components/filterComponent';
 import { Row } from './components/row';
 import { SelectComponent } from './components/selectComponent';
@@ -43,6 +44,9 @@ const TableInner = memo(function TableInner() {
     const defaultWidth = state.useState('props.defaultWidth');
     const classes = state.useState('props.classes');
     const stickyHeader = state.useState('props.stickyHeader');
+    const enableSelection = state.useState('props.enableSelection');
+    const enableColumnSelection = state.useState('props.enableColumnSelection');
+    const enableExport = state.useState((state) => !!state.props.enableExport.copy || !!state.props.enableExport.download);
     (_b = (_a = state.getState().props).debug) === null || _b === void 0 ? void 0 : _b.call(_a, 'render table inner');
     return (_jsx(Virtualized, Object.assign({ className: c(commonClasses.table, classes === null || classes === void 0 ? void 0 : classes.table), style: {
             gridTemplateColumns: [
@@ -52,8 +56,8 @@ const TableInner = memo(function TableInner() {
                 ...activeColumns.map((column) => { var _a, _b; return (_b = (_a = column.width) !== null && _a !== void 0 ? _a : defaultWidth) !== null && _b !== void 0 ? _b : 'max-content'; }),
                 fullWidth === 'left' || fullWidth === true ? 'auto' : '0',
             ].join(' '),
-        }, 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: [_jsx(SelectComponent, {}, void 0), _jsx(ColumnSelection, {}, void 0)] }), void 0), activeColumns.map((column) => {
+        }, 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,5 +1,6 @@
-import { CSSProperties, DependencyList, ReactNode } from 'react';
+import { CSSProperties, ReactNode } from 'react';
 import { Filter } from './components/filterComponent';
+import { CsvExportOptions } from './misc/csvExport';
 export declare type Sort = {
     columnId: string | number;
     direction: SortDirection;
@@ -32,15 +33,20 @@ export declare type TableProps<T> = {
     onHiddenColumnsChange?: (hiddenColumns: Set<Id>) => void;
     defaultWidth?: string;
     fullWidth?: boolean | 'left' | 'right';
-    dependencies?: DependencyList;
     stickyHeader?: boolean;
     virtual?: boolean | {
         rowHeight?: number;
         initalRowHeight?: number;
         throttleScroll?: number;
+        overscan?: number;
+        overscanBottom?: number;
+        overscanTop?: number;
     };
     text?: {
         deselectAll?: string;
+        exportTitle?: string;
+        exportCopy?: string;
+        exportDownload?: string;
     };
     classes?: {
         table?: string;
@@ -49,12 +55,25 @@ export declare type TableProps<T> = {
         evenCell?: string;
         oddCell?: string;
     };
+    wrapCell?: (cell: ReactNode, item: T) => ReactNode;
     debug?: (...output: any) => void;
+    enableSelection?: boolean;
+    enableColumnSelection?: boolean;
+    enableExport?: boolean | {
+        copy?: boolean | CsvExportOptions;
+        download?: boolean | CsvExportOptions;
+    };
 };
-export declare type InternalTableProps<T> = Omit<TableProps<T>, 'id' | 'parentId' | 'columns'> & {
+export declare type InternalTableProps<T> = Omit<TableProps<T>, 'id' | 'parentId' | 'columns' | 'enableSelection' | 'enableColumnSelection' | 'enableExport'> & {
     id: (item: T) => Id;
     parentId?: (item: T) => Id | undefined;
     columns: InternalColumn<T, unknown>[];
+    enableSelection: boolean;
+    enableColumnSelection: boolean;
+    enableExport: {
+        copy?: CsvExportOptions;
+        download?: CsvExportOptions;
+    };
 };
 export declare type TableItem<T = unknown> = T & {
     id: Id;
@@ -66,6 +85,7 @@ export declare type Column<T, V> = {
     header?: ReactNode;
     value: (item: T) => V;
     renderCell?: (value: V, item: T) => ReactNode;
+    exportCell?: (value: V, item: T) => string | number;
     sortBy?: ((value: V, item: T) => unknown) | ((value: V) => unknown)[];
     filterComponent?: ReactNode;
     defaultFilter?: Filter<V>;
@@ -80,10 +100,12 @@ export declare type Column<T, V> = {
         evenCell?: string;
         oddCell?: string;
     };
+    /** If the column definition changes, supply parameters that it depends on. If not set, the column will not update */
+    dependencies?: any[];
 };
 export declare type InternalColumn<T, V> = Required<Omit<Column<T, V>, 'id'> & {
     id: Id;
-}, 'header' | 'stringValue' | 'sortBy' | 'renderValue' | 'renderCell'>;
+}, 'header' | 'stringValue' | 'sortBy' | 'renderValue' | 'renderCell' | 'exportCell'>;
 declare type Required<T, S> = T & {
     [P in keyof T as P extends S ? P : never]-?: T[P];
 };

package/package.json

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