schummar-table 0.1.0 → 0.3.1

package/dist/cjs/internalState/calcProps.js

@@ -16,14 +16,9 @@ const react_1 = require("react");
 const helpers_1 = require("../misc/helpers");
 const noopParentId = () => undefined;
 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 = react_1.useMemo(() => {
+    const columnCache = (0, react_1.useRef)(new Map());
+    return (0, react_1.useMemo)(() => {
+        var _a, _b;
         let id;
         if (props.id instanceof Function) {
             id = props.id;
@@ -41,34 +36,54 @@ 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 = helpers_1.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 = helpers_1.asString, exportCell = helpers_1.asString, sortBy = (v) => (typeof v === 'number' || v instanceof Date ? v : String(v)), dependencies = [] } = _a, props = __rest(_a, ["id", "header", "renderCell", "exportCell", "sortBy", "dependencies"]);
+            const [depsInCache, columnInCache] = (_b = columnCache.current.get(id !== null && id !== void 0 ? id : index)) !== null && _b !== void 0 ? _b : [];
+            let column;
+            if (depsInCache &&
+                columnInCache &&
+                depsInCache.length === dependencies.length &&
+                depsInCache.every((x, i) => dependencies[i] === x)) {
+                column = columnInCache;
+            }
+            else {
+                column = Object.assign({ id: id !== null && id !== void 0 ? id : index, header,
+                    renderCell,
+                    exportCell,
+                    sortBy,
+                    dependencies }, props);
+            }
+            newColumnCache.set(id !== null && id !== void 0 ? id : index, [dependencies, column]);
+            return column;
         });
-        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 react_1.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]);
 }
 exports.calcProps = calcProps;

package/dist/cjs/internalState/cleanupState.js

@@ -4,7 +4,7 @@ exports.cleanupState = void 0;
 const react_1 = require("react");
 const helpers_1 = require("../misc/helpers");
 function cleanupState(state) {
-    react_1.useEffect(() => state.addReaction((state) => [state.props.columns, state.itemsById, state.activeItemsById, state.activeColumns], ([columns, itemsById, activeItemsById, activeColumns], draft) => {
+    (0, react_1.useEffect)(() => state.addReaction((state) => [state.props.columns, state.itemsById, state.activeItemsById, state.activeColumns], ([columns, itemsById, activeItemsById, activeColumns], draft) => {
         var _a, _b, _c, _d, _e, _f;
         const columnIds = new Set(columns.map((column) => column.id));
         const activeColumnIds = new Set(activeColumns.map((column) => column.id));
@@ -26,13 +26,13 @@ function cleanupState(state) {
         }
         if (draft.props.items) {
             // Remove selection for non active items
-            const newSelection = helpers_1.intersect(draft.selection, activeItemsById);
+            const newSelection = (0, helpers_1.intersect)(draft.selection, activeItemsById);
             if (newSelection.size !== draft.selection.size) {
                 draft.selection = newSelection;
                 (_d = (_c = draft.props).onSelectionChange) === null || _d === void 0 ? void 0 : _d.call(_c, newSelection);
             }
             // Remove expanded for non existing items
-            const newExpanded = helpers_1.intersect(draft.expanded, itemsById);
+            const newExpanded = (0, helpers_1.intersect)(draft.expanded, itemsById);
             if (newExpanded.size < draft.expanded.size) {
                 draft.expanded = newExpanded;
                 (_f = (_e = draft.props).onExpandedChange) === null || _f === void 0 ? void 0 : _f.call(_e, newExpanded);

package/dist/cjs/internalState/filterColumns.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.filterColumns = void 0;
 const react_1 = require("react");
 function filterColumns(state) {
-    react_1.useEffect(() => state.addReaction((state) => [state.props.columns, state.hiddenColumns], ([columns, hiddenColumns], draft) => {
+    (0, react_1.useEffect)(() => state.addReaction((state) => [state.props.columns, state.hiddenColumns], ([columns, hiddenColumns], draft) => {
         draft.activeColumns = columns.filter((column) => !hiddenColumns.has(column.id));
     }, { runNow: true }), [state]);
 }

package/dist/cjs/internalState/syncSelections.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.syncSelections = void 0;
 const react_1 = require("react");
 function syncSelections(state) {
-    react_1.useEffect(() => state.addReaction((state) => [state.props.selectSyncChildren, state.selection, state.activeItems], ([selectSyncChildren, selection, activeItems], state) => {
+    (0, react_1.useEffect)(() => state.addReaction((state) => [state.props.selectSyncChildren, state.selection, state.activeItems], ([selectSyncChildren, selection, activeItems], state) => {
         var _a, _b;
         if (!selectSyncChildren)
             return;

package/dist/cjs/internalState/useTableState.js

@@ -10,8 +10,8 @@ const cleanupState_1 = require("./cleanupState");
 const filterColumns_1 = require("./filterColumns");
 const syncSelections_1 = require("./syncSelections");
 function useTableState(_props) {
-    const props = calcProps_1.calcProps(_props);
-    const state = react_1.useMemo(() => {
+    const props = (0, calcProps_1.calcProps)(_props);
+    const state = (0, react_1.useMemo)(() => {
         var _a, _b, _c, _d;
         return new react_2.Store({
             props,
@@ -36,13 +36,13 @@ function useTableState(_props) {
             lastSelectedId: undefined,
         });
     }, []);
-    filterColumns_1.filterColumns(state);
-    calcItems_1.calcItems(state);
-    syncSelections_1.syncSelections(state);
-    cleanupState_1.cleanupState(state);
-    react_1.useEffect(() => {
+    (0, filterColumns_1.filterColumns)(state);
+    (0, calcItems_1.calcItems)(state);
+    (0, syncSelections_1.syncSelections)(state);
+    (0, cleanupState_1.cleanupState)(state);
+    (0, react_1.useEffect)(() => {
         state.update((state) => {
-            state.props = immer_1.castDraft(props);
+            state.props = (0, immer_1.castDraft)(props);
             if (props.sort)
                 state.sort = props.sort;
             if (props.selection)

package/dist/cjs/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/cjs/misc/csvExport.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.csvExport = void 0;
+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);
+}
+exports.csvExport = csvExport;

package/dist/cjs/misc/helpers.js

@@ -65,7 +65,7 @@ const getDescendants = (...items) => {
     return result;
 };
 exports.getDescendants = getDescendants;
-const c = (...classNames) => exports.flatMap(classNames, (item) => {
+const c = (...classNames) => (0, exports.flatMap)(classNames, (item) => {
     if (item === undefined)
         return [];
     if (typeof item === 'string')

package/dist/cjs/misc/textMatch.js

@@ -4,7 +4,7 @@ exports.termMatch = exports.textMatch = void 0;
 const textMatch = (text, query) => {
     text = text.toLowerCase();
     query = query.toLowerCase();
-    return query.split(/\s+/).every((part) => exports.termMatch(text, part));
+    return query.split(/\s+/).every((part) => (0, exports.termMatch)(text, part));
 };
 exports.textMatch = textMatch;
 const termMatch = (text, query) => {

package/dist/cjs/table.js

@@ -4,6 +4,7 @@ exports.Table = exports.useColumnContext = exports.useTableContext = exports.Col
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const columnSelection_1 = require("./components/columnSelection");
+const export_1 = require("./components/export");
 const filterComponent_1 = require("./components/filterComponent");
 const row_1 = require("./components/row");
 const selectComponent_1 = require("./components/selectComponent");
@@ -12,17 +13,17 @@ const useCommonClasses_1 = require("./components/useCommonClasses");
 const virtualized_1 = require("./components/virtualized");
 const useTableState_1 = require("./internalState/useTableState");
 const helpers_1 = require("./misc/helpers");
-exports.TableContext = react_1.createContext(null);
-exports.ColumnContext = react_1.createContext(null);
+exports.TableContext = (0, react_1.createContext)(null);
+exports.ColumnContext = (0, react_1.createContext)(null);
 function useTableContext() {
-    const value = react_1.useContext(exports.TableContext);
+    const value = (0, react_1.useContext)(exports.TableContext);
     if (!value)
         throw Error('No table context available');
     return value;
 }
 exports.useTableContext = useTableContext;
 function useColumnContext() {
-    const value = react_1.useContext(exports.ColumnContext);
+    const value = (0, react_1.useContext)(exports.ColumnContext);
     if (value === null)
         throw Error('No column context available');
     return value;
@@ -30,14 +31,14 @@ function useColumnContext() {
 exports.useColumnContext = useColumnContext;
 function Table(props) {
     var _a, _b;
-    const state = useTableState_1.useTableState(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 (jsx_runtime_1.jsx(exports.TableContext.Provider, Object.assign({ value: state }, { children: jsx_runtime_1.jsx(TableInner, {}, void 0) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(exports.TableContext.Provider, Object.assign({ value: state }, { children: (0, jsx_runtime_1.jsx)(TableInner, {}, void 0) }), void 0));
 }
 exports.Table = Table;
-const TableInner = react_1.memo(function TableInner() {
+const TableInner = (0, react_1.memo)(function TableInner() {
     var _a, _b;
-    const commonClasses = useCommonClasses_1.useCommonClasses();
+    const commonClasses = (0, useCommonClasses_1.useCommonClasses)();
     const state = useTableContext();
     const fullWidth = state.useState('props.fullWidth');
     const activeColumns = state.useState((state) => state.activeColumns.map((column) => ({
@@ -49,8 +50,11 @@ const TableInner = react_1.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_runtime_1.jsx(virtualized_1.Virtualized, Object.assign({ className: helpers_1.c(commonClasses.table, classes === null || classes === void 0 ? void 0 : classes.table), style: {
+    return ((0, jsx_runtime_1.jsx)(virtualized_1.Virtualized, Object.assign({ className: (0, helpers_1.c)(commonClasses.table, classes === null || classes === void 0 ? void 0 : classes.table), style: {
             gridTemplateColumns: [
                 //
                 fullWidth === 'right' || fullWidth === true ? 'auto' : '0',
@@ -58,8 +62,8 @@ const TableInner = react_1.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: jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [jsx_runtime_1.jsx("div", { className: helpers_1.c(commonClasses.headerFill, { [commonClasses.sticky]: !!stickyHeader }, classes === null || classes === void 0 ? void 0 : classes.headerCell) }, void 0), jsx_runtime_1.jsxs("div", Object.assign({ className: helpers_1.c(commonClasses.headerCell, { [commonClasses.sticky]: !!stickyHeader }, classes === null || classes === void 0 ? void 0 : classes.headerCell) }, { children: [jsx_runtime_1.jsx(selectComponent_1.SelectComponent, {}, void 0), jsx_runtime_1.jsx(columnSelection_1.ColumnSelection, {}, void 0)] }), void 0), activeColumns.map((column) => {
+        }, header: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: (0, helpers_1.c)(commonClasses.headerFill, { [commonClasses.sticky]: !!stickyHeader }, classes === null || classes === void 0 ? void 0 : classes.headerCell) }, void 0), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, helpers_1.c)(commonClasses.headerCell, { [commonClasses.sticky]: !!stickyHeader }, classes === null || classes === void 0 ? void 0 : classes.headerCell) }, { children: [enableSelection && (0, jsx_runtime_1.jsx)(selectComponent_1.SelectComponent, {}, void 0), enableColumnSelection && (0, jsx_runtime_1.jsx)(columnSelection_1.ColumnSelection, {}, void 0), enableExport && (0, jsx_runtime_1.jsx)(export_1.Export, {}, void 0)] }), void 0), activeColumns.map((column) => {
                     var _a;
-                    return (jsx_runtime_1.jsx(exports.ColumnContext.Provider, Object.assign({ value: column.id }, { children: jsx_runtime_1.jsxs("div", Object.assign({ className: helpers_1.c(commonClasses.headerCell, { [commonClasses.sticky]: !!stickyHeader }, classes === null || classes === void 0 ? void 0 : classes.headerCell, (_a = column.classes) === null || _a === void 0 ? void 0 : _a.headerCell) }, { children: [jsx_runtime_1.jsx(sortComponent_1.SortComponent, { children: column.header }, void 0), jsx_runtime_1.jsx(filterComponent_1.FilterComponent, {}, void 0)] }), column.id) }), column.id));
-                }), jsx_runtime_1.jsx("div", { className: helpers_1.c(commonClasses.headerFill, { [commonClasses.sticky]: !!stickyHeader }, classes === null || classes === void 0 ? void 0 : classes.headerCell) }, void 0)] }, void 0) }, { children: (itemIds) => itemIds.map((itemId) => jsx_runtime_1.jsx(row_1.Row, { itemId: itemId }, itemId)) }), void 0));
+                    return ((0, jsx_runtime_1.jsx)(exports.ColumnContext.Provider, Object.assign({ value: column.id }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, helpers_1.c)(commonClasses.headerCell, { [commonClasses.sticky]: !!stickyHeader }, classes === null || classes === void 0 ? void 0 : classes.headerCell, (_a = column.classes) === null || _a === void 0 ? void 0 : _a.headerCell) }, { children: [(0, jsx_runtime_1.jsx)(sortComponent_1.SortComponent, { children: column.header }, void 0), (0, jsx_runtime_1.jsx)(filterComponent_1.FilterComponent, {}, void 0)] }), column.id) }), column.id));
+                }), (0, jsx_runtime_1.jsx)("div", { className: (0, helpers_1.c)(commonClasses.headerFill, { [commonClasses.sticky]: !!stickyHeader }, classes === null || classes === void 0 ? void 0 : classes.headerCell) }, void 0)] }, void 0) }, { children: (itemIds, startIndex) => itemIds.map((itemId, index) => (0, jsx_runtime_1.jsx)(row_1.Row, { itemId: itemId, rowIndex: startIndex + index }, itemId)) }), void 0));
 });

package/dist/cjs/types.d.ts

@@ -1,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/dist/esm/components/cell.d.ts

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

package/dist/esm/components/cell.js

@@ -1,23 +1,28 @@
-import { 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';
 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 { className, content } = state.useState((state) => {
-        const item = state.activeItemsById.get(itemId);
-        const column = state.activeColumns.find((column) => column.id === columnId);
-        const index = item ? state.activeItems.indexOf(item) : -1;
-        return {
-            className: c(calcClassName(state.props.classes, index), calcClassName(column === null || column === void 0 ? void 0 : column.classes, index)),
-            content: item && column && column.renderCell(column.value(item), item),
-        };
-    }, [itemId, columnId]);
+    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("div", Object.assign({ className: c(commonClasses.cell, className) }, { children: content }), void 0);
+    const className = c(calcClassName(classes, rowIndex), calcClassName(column === null || column === void 0 ? void 0 : column.classes, rowIndex));
+    const content = column.renderCell(column.value(item), item);
+    if (!wrapCell && typeof content === 'string') {
+        wrapCell = (content) => (_jsx("div", Object.assign({ className: c(commonClasses.cell, className) }, { children: _jsx("span", Object.assign({ className: c(commonClasses.text) }, { children: content }), void 0) }), void 0));
+    }
+    else if (!wrapCell) {
+        wrapCell = (content) => _jsx("div", Object.assign({ className: c(commonClasses.cell, className) }, { children: content }), void 0);
+    }
+    return _jsx(_Fragment, { children: wrapCell(content, item) }, void 0);
 });

package/dist/esm/components/columnSelection.js

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

package/dist/esm/components/defaultFilterComponent.js

@@ -24,11 +24,10 @@ export function DefaultFilterComponent({ filterBy: _filterBy, options: _options,
     const classes = useClasses();
     const state = useTableContext();
     const columnId = useColumnContext();
-    const deps = state.useState('props.dependencies');
     const filterBy = useCallback((value, item) => {
         const values = _filterBy ? _filterBy(value, item) : value;
         return values instanceof Array ? values : [values];
-    }, deps !== null && deps !== void 0 ? deps : [_filterBy]);
+    }, [_filterBy]);
     const { text, options, filter } = state.useState((state) => {
         const column = state.activeColumns.find((column) => column.id === columnId);
         const _filter = state.filters.get(columnId);

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.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function Export<T>(): JSX.Element;

package/dist/esm/components/export.js

@@ -0,0 +1,44 @@
+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 } from '@material-ui/icons';
+import { useState } from 'react';
+import { csvExport } from '../misc/csvExport';
+import { useTableContext } from '../table';
+const useClasses = makeStyles((theme) => ({
+    dialog: {
+        padding: theme.spacing(2),
+        display: 'grid',
+        justifyItems: 'stretch',
+        '& > *': {
+            justifyContent: 'start',
+        },
+    },
+}));
+export function Export() {
+    const classes = useClasses();
+    const [anchor, setAnchor] = useState(null);
+    const state = useTableContext();
+    const textTitle = state.useState('props.text.exportTitle');
+    const textCopy = state.useState('props.text.exportCopy');
+    const textDownload = state.useState('props.text.exportDownload');
+    const generate = (options) => {
+        const { activeColumns, activeItems } = state.getState();
+        const data = [
+            activeColumns.map((column) => String(column.id)),
+            ...activeItems.map((item) => activeColumns.map((column) => column.exportCell(column.value(item), item))),
+        ];
+        return csvExport(data, options);
+    };
+    const copy = () => {
+        navigator.clipboard.writeText(generate(state.getState().props.enableExport.copy));
+    };
+    const download = () => {
+        const a = document.createElement('a');
+        a.href = 'data:text/csv;charset=utf-8,' + encodeURIComponent(generate(state.getState().props.enableExport.download));
+        a.download = 'export.csv';
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(IconButton, Object.assign({ color: "inherit", size: "small", onClick: (e) => setAnchor(e.currentTarget) }, { children: _jsx(CloudDownload, {}, void 0) }), void 0), _jsx(Popover, Object.assign({ open: !!anchor, onClose: () => setAnchor(null), anchorEl: anchor, anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, transformOrigin: { vertical: 'top', horizontal: 'left' } }, { children: _jsxs("div", Object.assign({ className: classes.dialog }, { children: [_jsx(Typography, Object.assign({ variant: "caption" }, { children: textTitle !== null && textTitle !== void 0 ? textTitle : 'Export' }), void 0), _jsx(Button, Object.assign({ startIcon: _jsx(AssignmentReturn, {}, void 0), fullWidth: true, onClick: copy }, { children: textCopy !== null && textCopy !== void 0 ? textCopy : 'In die Zwischenablage' }), void 0), _jsx(Button, Object.assign({ startIcon: _jsx(CloudDownload, {}, void 0), fullWidth: true, onClick: download }, { children: textDownload !== null && textDownload !== void 0 ? textDownload : 'Herunterladen' }), void 0)] }), void 0) }), void 0)] }, void 0));
+}

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

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

package/dist/esm/components/row.js

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

package/dist/esm/components/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;