schummar-table 0.1.0 → 0.3.1

package/dist/cjs/components/cell.d.ts

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

package/dist/cjs/components/cell.js

@@ -7,20 +7,25 @@ const __1 = require("..");
 const helpers_1 = require("../misc/helpers");
 const row_1 = require("./row");
 const useCommonClasses_1 = require("./useCommonClasses");
-exports.Cell = react_1.memo(function Cell({ itemId }) {
+exports.Cell = (0, react_1.memo)(function Cell({ itemId, rowIndex }) {
     var _a, _b;
-    const commonClasses = useCommonClasses_1.useCommonClasses();
-    const state = __1.useTableContext();
-    const columnId = __1.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: helpers_1.c(row_1.calcClassName(state.props.classes, index), row_1.calcClassName(column === null || column === void 0 ? void 0 : column.classes, index)),
-            content: item && column && column.renderCell(column.value(item), item),
-        };
-    }, [itemId, columnId]);
+    const commonClasses = (0, useCommonClasses_1.useCommonClasses)();
+    const state = (0, __1.useTableContext)();
+    const columnId = (0, __1.useColumnContext)();
+    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_runtime_1.jsx("div", Object.assign({ className: helpers_1.c(commonClasses.cell, className) }, { children: content }), void 0);
+    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 content = column.renderCell(column.value(item), item);
+    if (!wrapCell && typeof content === 'string') {
+        wrapCell = (content) => ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, helpers_1.c)(commonClasses.cell, className) }, { children: (0, jsx_runtime_1.jsx)("span", Object.assign({ className: (0, helpers_1.c)(commonClasses.text) }, { children: content }), void 0) }), void 0));
+    }
+    else if (!wrapCell) {
+        wrapCell = (content) => (0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, helpers_1.c)(commonClasses.cell, className) }, { children: content }), void 0);
+    }
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: wrapCell(content, item) }, void 0);
 });

package/dist/cjs/components/columnSelection.js

@@ -6,7 +6,7 @@ const core_1 = require("@material-ui/core");
 const icons_1 = require("@material-ui/icons");
 const react_1 = require("react");
 const table_1 = require("../table");
-const useClasses = core_1.makeStyles((theme) => ({
+const useClasses = (0, core_1.makeStyles)((theme) => ({
     list: {
         padding: theme.spacing(2),
         display: 'grid',
@@ -14,8 +14,8 @@ const useClasses = core_1.makeStyles((theme) => ({
 }));
 function ColumnSelection() {
     const classes = useClasses();
-    const [anchor, setAnchor] = react_1.useState(null);
-    const state = table_1.useTableContext();
+    const [anchor, setAnchor] = (0, react_1.useState)(null);
+    const state = (0, table_1.useTableContext)();
     const columns = state.useState('props.columns');
     const hiddenColumns = state.useState('hiddenColumns');
     const toggle = (column) => {
@@ -32,6 +32,6 @@ function ColumnSelection() {
         }
         onHiddenColumnsChange === null || onHiddenColumnsChange === void 0 ? void 0 : onHiddenColumnsChange(newValue);
     };
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [jsx_runtime_1.jsx(core_1.IconButton, Object.assign({ color: "inherit", onClick: (e) => setAnchor(e.currentTarget) }, { children: jsx_runtime_1.jsx(icons_1.Settings, {}, void 0) }), void 0), jsx_runtime_1.jsx(core_1.Popover, Object.assign({ open: !!anchor, onClose: () => setAnchor(null), anchorEl: anchor, anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, transformOrigin: { vertical: 'top', horizontal: 'center' } }, { children: jsx_runtime_1.jsx("div", Object.assign({ className: classes.list }, { children: columns.map((column) => (jsx_runtime_1.jsx(core_1.FormControlLabel, { control: jsx_runtime_1.jsx(core_1.Checkbox, { checked: !hiddenColumns.has(column.id), onChange: () => toggle(column), disabled: column.cannotHide }, void 0), label: column.header }, column.id))) }), void 0) }), void 0)] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(core_1.IconButton, Object.assign({ color: "inherit", size: "small", onClick: (e) => setAnchor(e.currentTarget) }, { children: (0, jsx_runtime_1.jsx)(icons_1.Settings, {}, void 0) }), void 0), (0, jsx_runtime_1.jsx)(core_1.Popover, Object.assign({ open: !!anchor, onClose: () => setAnchor(null), anchorEl: anchor, anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, transformOrigin: { vertical: 'top', horizontal: 'left' } }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: classes.list }, { children: columns.map((column) => ((0, jsx_runtime_1.jsx)(core_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(core_1.Checkbox, { checked: !hiddenColumns.has(column.id), onChange: () => toggle(column), disabled: column.cannotHide }, void 0), label: column.header }, column.id))) }), void 0) }), void 0)] }, void 0));
 }
 exports.ColumnSelection = ColumnSelection;

package/dist/cjs/components/defaultFilterComponent.js

@@ -14,7 +14,7 @@ class DefaultFilter {
     }
 }
 exports.DefaultFilter = DefaultFilter;
-const useClasses = core_1.makeStyles((theme) => ({
+const useClasses = (0, core_1.makeStyles)((theme) => ({
     view: {
         padding: theme.spacing(2),
         display: 'grid',
@@ -26,23 +26,22 @@ const useClasses = core_1.makeStyles((theme) => ({
 function DefaultFilterComponent({ filterBy: _filterBy, options: _options, compare = helpers_1.defaultEquals, stringValue = helpers_1.asString, render = stringValue, }) {
     var _a;
     const classes = useClasses();
-    const state = table_1.useTableContext();
-    const columnId = table_1.useColumnContext();
-    const deps = state.useState('props.dependencies');
-    const filterBy = react_1.useCallback((value, item) => {
+    const state = (0, table_1.useTableContext)();
+    const columnId = (0, table_1.useColumnContext)();
+    const filterBy = (0, react_1.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);
         const filter = _filter instanceof DefaultFilter ? _filter : undefined;
-        let options = _options !== null && _options !== void 0 ? _options : helpers_1.orderBy(helpers_1.uniq(helpers_1.flatMap(state.items, (item) => (column ? filterBy(column.value(item), item) : []))));
+        let options = _options !== null && _options !== void 0 ? _options : (0, helpers_1.orderBy)((0, helpers_1.uniq)((0, helpers_1.flatMap)(state.items, (item) => (column ? filterBy(column.value(item), item) : []))));
         if (filter)
             options = options.concat([...filter.values].filter((value) => !options.includes(value)));
         return { text: state.props.text, options, filter };
     }, [_options, columnId, filterBy]);
-    const [input, setInput] = react_1.useState('');
+    const [input, setInput] = (0, react_1.useState)('');
     const filtered = options.filter((option) => !input || stringValue(option).toLowerCase().includes(input.toLowerCase()));
     function toggle(value) {
         var _a;
@@ -82,11 +81,11 @@ function DefaultFilterComponent({ filterBy: _filterBy, options: _options, compar
         }
         (_a = column.onFilterChange) === null || _a === void 0 ? void 0 : _a.call(column);
     }
-    return (jsx_runtime_1.jsxs("div", Object.assign({ className: classes.view }, { children: [jsx_runtime_1.jsx(core_1.TextField, { value: input, onChange: (e) => setInput(e.target.value), InputProps: {
-                    endAdornment: input ? (jsx_runtime_1.jsx(core_1.IconButton, Object.assign({ onClick: () => setInput('') }, { children: jsx_runtime_1.jsx(icons_1.Clear, {}, void 0) }), void 0)) : (jsx_runtime_1.jsx(icons_1.Search, {}, void 0)),
-                } }, void 0), jsx_runtime_1.jsx(core_1.Button, Object.assign({ variant: "outlined", onClick: deselectAll, disabled: !filter }, { children: (_a = text === null || text === void 0 ? void 0 : text.deselectAll) !== null && _a !== void 0 ? _a : 'Deselect all' }), void 0), filtered.map((value, index) => {
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: classes.view }, { children: [(0, jsx_runtime_1.jsx)(core_1.TextField, { value: input, onChange: (e) => setInput(e.target.value), InputProps: {
+                    endAdornment: input ? ((0, jsx_runtime_1.jsx)(core_1.IconButton, Object.assign({ onClick: () => setInput('') }, { children: (0, jsx_runtime_1.jsx)(icons_1.Clear, {}, void 0) }), void 0)) : ((0, jsx_runtime_1.jsx)(icons_1.Search, {}, void 0)),
+                } }, void 0), (0, jsx_runtime_1.jsx)(core_1.Button, Object.assign({ variant: "outlined", onClick: deselectAll, disabled: !filter }, { children: (_a = text === null || text === void 0 ? void 0 : text.deselectAll) !== null && _a !== void 0 ? _a : 'Deselect all' }), void 0), filtered.map((value, index) => {
                 var _a;
-                return (jsx_runtime_1.jsx(core_1.FormControlLabel, { control: jsx_runtime_1.jsx(core_1.Checkbox, { checked: (_a = filter === null || filter === void 0 ? void 0 : filter.values.has(value)) !== null && _a !== void 0 ? _a : false, onChange: () => toggle(value) }, void 0), label: render(value) }, index));
+                return ((0, jsx_runtime_1.jsx)(core_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(core_1.Checkbox, { checked: (_a = filter === null || filter === void 0 ? void 0 : filter.values.has(value)) !== null && _a !== void 0 ? _a : false, onChange: () => toggle(value) }, void 0), label: render(value) }, index));
             })] }), void 0));
 }
 exports.DefaultFilterComponent = DefaultFilterComponent;

package/dist/cjs/components/expandComponent.js

@@ -7,7 +7,7 @@ const icons_1 = require("@material-ui/icons");
 const helpers_1 = require("../misc/helpers");
 const table_1 = require("../table");
 function ExpandComponent({ itemId }) {
-    const state = table_1.useTableContext();
+    const state = (0, table_1.useTableContext)();
     const isExpanded = state.useState((state) => state.expanded.has(itemId), [itemId]);
     function toggle() {
         const { props: { expanded: controlledExpanded, expandOnlyOne, onExpandedChange }, expanded, activeItemsById, } = state.getState();
@@ -19,7 +19,7 @@ function ExpandComponent({ itemId }) {
         else {
             newExpanded.add(itemId);
             const item = activeItemsById.get(itemId);
-            for (const ancestor of item ? helpers_1.getAncestors(activeItemsById, item) : []) {
+            for (const ancestor of item ? (0, helpers_1.getAncestors)(activeItemsById, item) : []) {
                 newExpanded.add(ancestor);
             }
         }
@@ -30,7 +30,7 @@ function ExpandComponent({ itemId }) {
             });
         }
     }
-    return (jsx_runtime_1.jsx(core_1.IconButton, Object.assign({ onClick: toggle }, { children: jsx_runtime_1.jsx(icons_1.ChevronRight, { style: {
+    return ((0, jsx_runtime_1.jsx)(core_1.IconButton, Object.assign({ size: "small", onClick: toggle }, { children: (0, jsx_runtime_1.jsx)(icons_1.ChevronRight, { style: {
                 transition: 'all 500ms',
                 transform: isExpanded ? 'rotate3d(0, 0, 1, 90deg)' : 'none',
             } }, void 0) }), void 0));

package/dist/cjs/components/export.d.ts

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

package/dist/cjs/components/export.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Export = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const core_1 = require("@material-ui/core");
+const icons_1 = require("@material-ui/icons");
+const react_1 = require("react");
+const csvExport_1 = require("../misc/csvExport");
+const table_1 = require("../table");
+const useClasses = (0, core_1.makeStyles)((theme) => ({
+    dialog: {
+        padding: theme.spacing(2),
+        display: 'grid',
+        justifyItems: 'stretch',
+        '& > *': {
+            justifyContent: 'start',
+        },
+    },
+}));
+function Export() {
+    const classes = useClasses();
+    const [anchor, setAnchor] = (0, react_1.useState)(null);
+    const state = (0, table_1.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 (0, csvExport_1.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 ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(core_1.IconButton, Object.assign({ color: "inherit", size: "small", onClick: (e) => setAnchor(e.currentTarget) }, { children: (0, jsx_runtime_1.jsx)(icons_1.CloudDownload, {}, void 0) }), void 0), (0, jsx_runtime_1.jsx)(core_1.Popover, Object.assign({ open: !!anchor, onClose: () => setAnchor(null), anchorEl: anchor, anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, transformOrigin: { vertical: 'top', horizontal: 'left' } }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: classes.dialog }, { children: [(0, jsx_runtime_1.jsx)(core_1.Typography, Object.assign({ variant: "caption" }, { children: textTitle !== null && textTitle !== void 0 ? textTitle : 'Export' }), void 0), (0, jsx_runtime_1.jsx)(core_1.Button, Object.assign({ startIcon: (0, jsx_runtime_1.jsx)(icons_1.AssignmentReturn, {}, void 0), fullWidth: true, onClick: copy }, { children: textCopy !== null && textCopy !== void 0 ? textCopy : 'In die Zwischenablage' }), void 0), (0, jsx_runtime_1.jsx)(core_1.Button, Object.assign({ startIcon: (0, jsx_runtime_1.jsx)(icons_1.CloudDownload, {}, void 0), fullWidth: true, onClick: download }, { children: textDownload !== null && textDownload !== void 0 ? textDownload : 'Herunterladen' }), void 0)] }), void 0) }), void 0)] }, void 0));
+}
+exports.Export = Export;

package/dist/cjs/components/filterComponent.js

@@ -6,20 +6,20 @@ const core_1 = require("@material-ui/core");
 const icons_1 = require("@material-ui/icons");
 const react_1 = require("react");
 const table_1 = require("../table");
-const useClasses = core_1.makeStyles((theme) => ({
+const useClasses = (0, core_1.makeStyles)((theme) => ({
     active: {
         background: theme.palette.primary.main,
     },
 }));
 function FilterComponent() {
-    const state = table_1.useTableContext();
-    const columnId = table_1.useColumnContext();
+    const state = (0, table_1.useTableContext)();
+    const columnId = (0, table_1.useColumnContext)();
     const classes = useClasses();
     const isActive = state.useState((state) => !!state.filters.get(columnId), [columnId]);
     const filterComponent = state.useState((state) => { var _a; return (_a = state.activeColumns.find((column) => column.id === columnId)) === null || _a === void 0 ? void 0 : _a.filterComponent; });
-    const [anchor, setAnchor] = react_1.useState(null);
+    const [anchor, setAnchor] = (0, react_1.useState)(null);
     if (!filterComponent)
         return null;
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [jsx_runtime_1.jsx(core_1.IconButton, Object.assign({ size: "small", color: "inherit", onClick: (e) => setAnchor(e.currentTarget), className: isActive ? classes.active : undefined }, { children: isActive ? jsx_runtime_1.jsx(icons_1.FilterList, {}, void 0) : jsx_runtime_1.jsx(icons_1.ArrowDropDown, {}, void 0) }), void 0), jsx_runtime_1.jsx(core_1.Popover, Object.assign({ open: !!anchor, onClose: () => setAnchor(null), anchorEl: anchor, anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, transformOrigin: { vertical: 'top', horizontal: 'center' } }, { children: filterComponent }), void 0)] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(core_1.IconButton, Object.assign({ size: "small", color: "inherit", onClick: (e) => setAnchor(e.currentTarget), className: isActive ? classes.active : undefined }, { children: isActive ? (0, jsx_runtime_1.jsx)(icons_1.FilterList, {}, void 0) : (0, jsx_runtime_1.jsx)(icons_1.ArrowDropDown, {}, void 0) }), void 0), (0, jsx_runtime_1.jsx)(core_1.Popover, Object.assign({ open: !!anchor, onClose: () => setAnchor(null), anchorEl: anchor, anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, transformOrigin: { vertical: 'top', horizontal: 'center' } }, { children: filterComponent }), void 0)] }, void 0));
 }
 exports.FilterComponent = FilterComponent;

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

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

package/dist/cjs/components/row.js

@@ -9,26 +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) => 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 });
+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 });
 exports.calcClassName = calcClassName;
-exports.Row = react_1.memo(function Row({ itemId }) {
+exports.Row = (0, react_1.memo)(function Row({ itemId, rowIndex }) {
     var _a, _b;
-    const commonClasses = useCommonClasses_1.useCommonClasses();
-    const state = table_1.useTableContext();
-    const divRef = react_1.useRef(null);
-    const { className, indent, hasChildren, hasDeferredChildren, columnIds } = state.useState((state) => {
+    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) => {
         var _a, _b;
         const item = state.activeItemsById.get(itemId);
         const index = !item ? -1 : state.activeItems.indexOf(item);
         return {
-            className: exports.calcClassName(state.props.classes, index),
-            indent: item ? helpers_1.getAncestors(state.activeItemsById, item).size : 0,
+            className: (0, exports.calcClassName)(state.props.classes, 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,
         };
     }, [itemId]);
-    react_1.useEffect(() => {
+    (0, react_1.useEffect)(() => {
         const div = divRef.current;
         if (!div)
             return;
@@ -43,5 +44,5 @@ exports.Row = react_1.memo(function Row({ itemId }) {
         return () => o.disconnect();
     }, [divRef.current]);
     (_b = (_a = state.getState().props).debug) === null || _b === void 0 ? void 0 : _b.call(_a, 'render row', itemId);
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [jsx_runtime_1.jsx("div", { className: helpers_1.c(commonClasses.cellFill, className), ref: divRef }, void 0), jsx_runtime_1.jsxs("div", Object.assign({ className: helpers_1.c(commonClasses.cell, commonClasses.firstCell, className) }, { children: [jsx_runtime_1.jsx("div", { style: { width: indent * 20 } }, void 0), jsx_runtime_1.jsx(selectComponent_1.SelectComponent, { itemId: itemId }, void 0), (hasChildren || hasDeferredChildren) && jsx_runtime_1.jsx(expandComponent_1.ExpandComponent, { itemId: itemId }, void 0)] }), void 0), columnIds.map((columnId) => (jsx_runtime_1.jsx(table_1.ColumnContext.Provider, Object.assign({ value: columnId }, { children: jsx_runtime_1.jsx(cell_1.Cell, { itemId: itemId }, void 0) }), columnId))), jsx_runtime_1.jsx("div", { className: 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)] }), 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/selectComponent.js

@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const core_1 = require("@material-ui/core");
 const helpers_1 = require("../misc/helpers");
 const table_1 = require("../table");
-const useClasses = core_1.makeStyles({
+const useClasses = (0, core_1.makeStyles)({
     justifiedCheckbox: {
         justifySelf: 'start',
         color: 'inherit',
@@ -13,7 +13,7 @@ const useClasses = core_1.makeStyles({
 });
 function SelectComponent({ itemId }) {
     const classes = useClasses();
-    const state = table_1.useTableContext();
+    const state = (0, table_1.useTableContext)();
     const isSelected = state.useState((state) => {
         const itemIds = itemId ? [itemId] : [...state.activeItemsById.keys()];
         return state.activeItemsById.size > 0 && itemIds.every((itemId) => state.selection.has(itemId));
@@ -39,10 +39,10 @@ function SelectComponent({ itemId }) {
                 newSelection.add(item.id);
         }
         if (selectSyncChildren && isSelected) {
-            for (const ancestor of helpers_1.getAncestors(activeItemsById, ...range)) {
+            for (const ancestor of (0, helpers_1.getAncestors)(activeItemsById, ...range)) {
                 newSelection.delete(ancestor);
             }
-            for (const descendant of helpers_1.getDescendants(...range)) {
+            for (const descendant of (0, helpers_1.getDescendants)(...range)) {
                 newSelection.delete(descendant);
             }
         }
@@ -56,6 +56,6 @@ function SelectComponent({ itemId }) {
             state.lastSelectedId = itemId;
         });
     }
-    return jsx_runtime_1.jsx(core_1.Checkbox, { className: classes.justifiedCheckbox, checked: isSelected, onChange: toggle }, void 0);
+    return (0, jsx_runtime_1.jsx)(core_1.Checkbox, { className: classes.justifiedCheckbox, checked: isSelected, onChange: toggle }, void 0);
 }
 exports.SelectComponent = SelectComponent;

package/dist/cjs/components/sortComponent.js

@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const core_1 = require("@material-ui/core");
 const icons_1 = require("@material-ui/icons");
 const table_1 = require("../table");
-const useClasses = core_1.makeStyles({
+const useClasses = (0, core_1.makeStyles)({
     sortView: {
         userSelect: 'none',
         display: 'grid',
@@ -23,8 +23,8 @@ const useClasses = core_1.makeStyles({
 });
 function SortComponent({ children }) {
     const classes = useClasses();
-    const state = table_1.useTableContext();
-    const columnId = table_1.useColumnContext();
+    const state = (0, table_1.useTableContext)();
+    const columnId = (0, table_1.useColumnContext)();
     const { direction, index } = state.useState((state) => {
         var _a, _b;
         const index = (_a = state.sort.findIndex((s) => s.columnId === columnId)) !== null && _a !== void 0 ? _a : -1;
@@ -47,6 +47,6 @@ function SortComponent({ children }) {
             });
         }
     }
-    return (jsx_runtime_1.jsxs("div", Object.assign({ className: classes.sortView, onClick: toggle }, { children: [jsx_runtime_1.jsx("div", { children: children }, void 0), jsx_runtime_1.jsx(core_1.Badge, Object.assign({ badgeContent: index }, { children: direction === 'asc' ? (jsx_runtime_1.jsx(icons_1.ArrowUpward, { fontSize: "small" }, void 0)) : direction === 'desc' ? (jsx_runtime_1.jsx(icons_1.ArrowDownward, { fontSize: "small" }, void 0)) : (jsx_runtime_1.jsx("div", { className: classes.empty }, void 0)) }), void 0)] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: classes.sortView, onClick: toggle }, { children: [(0, jsx_runtime_1.jsx)("div", { children: children }, void 0), (0, jsx_runtime_1.jsx)(core_1.Badge, Object.assign({ badgeContent: index }, { children: direction === 'asc' ? ((0, jsx_runtime_1.jsx)(icons_1.ArrowUpward, { fontSize: "small" }, void 0)) : direction === 'desc' ? ((0, jsx_runtime_1.jsx)(icons_1.ArrowDownward, { fontSize: "small" }, void 0)) : ((0, jsx_runtime_1.jsx)("div", { className: classes.empty }, void 0)) }), void 0)] }), void 0));
 }
 exports.SortComponent = SortComponent;

package/dist/cjs/components/textFilterComponent.js

@@ -16,7 +16,7 @@ class TextFilter {
     }
 }
 exports.TextFilter = TextFilter;
-const useClasses = core_1.makeStyles((theme) => ({
+const useClasses = (0, core_1.makeStyles)((theme) => ({
     view: {
         padding: theme.spacing(2),
         display: 'grid',
@@ -28,16 +28,16 @@ const useClasses = core_1.makeStyles((theme) => ({
 function TextFilterComponent({ filterBy = helpers_1.asString, compare = textMatch_1.textMatch, }) {
     var _a;
     const classes = useClasses();
-    const state = table_1.useTableContext();
-    const columnId = table_1.useColumnContext();
+    const state = (0, table_1.useTableContext)();
+    const columnId = (0, table_1.useColumnContext)();
     const _filter = state.useState((state) => {
         var _a;
         const column = state.activeColumns.find((column) => column.id === columnId);
         return (_a = state.filters.get(columnId)) !== null && _a !== void 0 ? _a : column === null || column === void 0 ? void 0 : column.defaultFilter;
     }, [columnId]);
     const filter = _filter instanceof TextFilter ? _filter : undefined;
-    const [input, setInput] = react_1.useState();
-    react_1.useEffect(() => {
+    const [input, setInput] = (0, react_1.useState)();
+    (0, react_1.useEffect)(() => {
         if (input === undefined)
             return;
         const handle = setTimeout(() => {
@@ -64,8 +64,8 @@ function TextFilterComponent({ filterBy = helpers_1.asString, compare = textMatc
         }, 500);
         return () => clearTimeout(handle);
     }, [input]);
-    return (jsx_runtime_1.jsx("div", Object.assign({ className: classes.view }, { children: jsx_runtime_1.jsx(core_1.TextField, { value: (_a = input !== null && input !== void 0 ? input : filter === null || filter === void 0 ? void 0 : filter.query) !== null && _a !== void 0 ? _a : '', onChange: (e) => setInput(e.target.value), InputProps: {
-                endAdornment: (filter === null || filter === void 0 ? void 0 : filter.query) ? (jsx_runtime_1.jsx(core_1.IconButton, Object.assign({ onClick: () => setInput('') }, { children: jsx_runtime_1.jsx(icons_1.Clear, {}, void 0) }), void 0)) : (jsx_runtime_1.jsx(icons_1.Search, {}, void 0)),
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: classes.view }, { children: (0, jsx_runtime_1.jsx)(core_1.TextField, { value: (_a = input !== null && input !== void 0 ? input : filter === null || filter === void 0 ? void 0 : filter.query) !== null && _a !== void 0 ? _a : '', onChange: (e) => setInput(e.target.value), InputProps: {
+                endAdornment: (filter === null || filter === void 0 ? void 0 : filter.query) ? ((0, jsx_runtime_1.jsx)(core_1.IconButton, Object.assign({ onClick: () => setInput('') }, { children: (0, jsx_runtime_1.jsx)(icons_1.Clear, {}, void 0) }), void 0)) : ((0, jsx_runtime_1.jsx)(icons_1.Search, {}, void 0)),
             } }, void 0) }), void 0));
 }
 exports.TextFilterComponent = TextFilterComponent;

package/dist/cjs/components/useCommonClasses.d.ts

@@ -1 +1 @@
-export declare const useCommonClasses: (props?: any) => import("@material-ui/styles").ClassNameMap<"table" | "cell" | "sticky" | "headerCell" | "cellFill" | "firstCell" | "headerFill" | "deferredPlaceholder">;
+export declare const useCommonClasses: (props?: any) => import("@material-ui/styles").ClassNameMap<"table" | "text" | "cell" | "sticky" | "headerCell" | "cellFill" | "firstCell" | "headerFill" | "deferredPlaceholder">;

package/dist/cjs/components/useCommonClasses.js

@@ -3,16 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCommonClasses = void 0;
 const core_1 = require("@material-ui/core");
 const cell = (theme) => ({
-    padding: theme.spacing(0.5, 1),
-    display: 'grid',
-    gridAutoFlow: 'column',
+    padding: theme.spacing(0.1, 1),
+    display: 'flex',
     alignItems: 'center',
     borderBottom: `1px solid ${theme.palette.grey[200]}`,
     whiteSpace: 'nowrap',
     overflow: 'hidden',
-    textOverflow: 'ellipsis',
 });
-exports.useCommonClasses = core_1.makeStyles((theme) => ({
+exports.useCommonClasses = (0, core_1.makeStyles)((theme) => ({
     table: {
         position: 'relative',
         display: 'grid',
@@ -21,7 +19,7 @@ exports.useCommonClasses = core_1.makeStyles((theme) => ({
     cellFill: {
         borderBottom: `1px solid ${theme.palette.grey[200]}`,
     },
-    headerCell: Object.assign(Object.assign({}, cell(theme)), { borderBottom: 'none', gridTemplateColumns: 'minmax(0, 1fr) max-content', background: theme.palette.primary.main, color: theme.palette.primary.contrastText, fontWeight: 'bold', '&:not(:first-child)': {
+    headerCell: Object.assign(Object.assign({}, cell(theme)), { borderBottom: `2px solid ${theme.palette.grey[400]}`, gridTemplateColumns: 'minmax(0, 1fr) max-content', background: theme.palette.common.white, '&:not(:first-child)': {
             borderLeft: `1px solid ${theme.palette.background.default}`,
         } }),
     firstCell: {
@@ -33,7 +31,8 @@ exports.useCommonClasses = core_1.makeStyles((theme) => ({
         zIndex: 1,
     },
     headerFill: {
-        background: theme.palette.primary.main,
+        borderBottom: `3px solid ${theme.palette.grey[200]}`,
+        background: theme.palette.common.white,
     },
     deferredPlaceholder: {
         padding: theme.spacing(1),
@@ -42,4 +41,9 @@ exports.useCommonClasses = core_1.makeStyles((theme) => ({
         display: 'grid',
         justifyContent: 'center',
     },
+    text: {
+        minWidth: 0,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+    },
 }));

package/dist/cjs/components/virtualized.d.ts

@@ -2,5 +2,5 @@ import { HTMLProps, ReactNode } from 'react';
 import { Id } from '../types';
 export declare function Virtualized<T>({ header, children, ...props }: {
     header: ReactNode;
-    children: (itemIds: Id[]) => ReactNode;
+    children: (itemIds: Id[], startIndex: number) => ReactNode;
 } & HTMLProps<HTMLDivElement>): JSX.Element;

package/dist/cjs/components/virtualized.js

@@ -46,11 +46,11 @@ const relativeOffset = (x, y) => {
 function Virtualized(_a) {
     var _b, _c, _d, _e;
     var { header, children } = _a, props = __rest(_a, ["header", "children"]);
-    const state = table_1.useTableContext();
+    const state = (0, table_1.useTableContext)();
     const virtual = state.useState('props.virtual');
-    const probeRef = react_1.useRef(null);
-    const [counter, setCounter] = react_1.useState(0);
-    const { itemIds = [], from, to, before = 0, after = 0, } = state.useState((state) => {
+    const probeRef = (0, react_1.useRef)(null);
+    const [counter, setCounter] = (0, react_1.useState)(0);
+    const { itemIds = [], from = 0, to, before = 0, after = 0, } = state.useState((state) => {
         var _a;
         const itemIds = state.activeItems.map((item) => item.id);
         const root = probeRef.current && findScrollRoot(probeRef.current);
@@ -58,7 +58,7 @@ function Virtualized(_a) {
             return { itemIds };
         if (!probeRef.current || !root || !document.contains(root))
             return {};
-        const { rowHeight, initalRowHeight } = (_a = (state.props.virtual instanceof Object ? state.props.virtual : undefined)) !== null && _a !== void 0 ? _a : {};
+        const { rowHeight, initalRowHeight, overscan = 200, overscanTop, overscanBottom, } = (_a = (state.props.virtual instanceof Object ? state.props.virtual : undefined)) !== null && _a !== void 0 ? _a : {};
         let totalHeight = 0;
         const rowHeights = itemIds.map((itemId, index) => {
             var _a, _b;
@@ -72,13 +72,13 @@ function Virtualized(_a) {
         const bottomOfTable = topOfTable + root.clientHeight - headerHeight;
         let from = 0, to = itemIds.length, before = 0, after = 0;
         for (const h of rowHeights) {
-            if (before + h > topOfTable)
+            if (before + h > topOfTable - (overscanTop !== null && overscanTop !== void 0 ? overscanTop : overscan))
                 break;
             from++;
             before += h;
         }
         for (const h of rowHeights.reverse()) {
-            if (after + h > totalHeight - bottomOfTable)
+            if (after + h > totalHeight - bottomOfTable - (overscanBottom !== null && overscanBottom !== void 0 ? overscanBottom : overscan))
                 break;
             to--;
             after += h;
@@ -86,13 +86,13 @@ function Virtualized(_a) {
         return { itemIds: itemIds.slice(from, to), from, to, before, after };
     }, [probeRef.current, counter]);
     const throttleScroll = (_c = (_b = (typeof virtual === 'boolean' ? undefined : virtual)) === null || _b === void 0 ? void 0 : _b.throttleScroll) !== null && _c !== void 0 ? _c : 500;
-    const incCounter = react_1.useMemo(() => throttle_1.throttle(() => setCounter((c) => c + 1), throttleScroll), [throttleScroll]);
-    react_1.useEffect(() => {
+    const incCounter = (0, react_1.useMemo)(() => (0, throttle_1.throttle)(() => setCounter((c) => c + 1), throttleScroll), [throttleScroll]);
+    (0, react_1.useEffect)(() => {
         if (!virtual || !probeRef.current)
             return;
         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 (jsx_runtime_1.jsxs("div", Object.assign({}, props, { children: [header, virtual && jsx_runtime_1.jsx("div", { style: { gridColumn: '1 / -1', height: before }, ref: probeRef }, void 0), children(itemIds), virtual && jsx_runtime_1.jsx("div", { style: { gridColumn: '1 / -1', height: after } }, void 0)] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, props, { children: [header, virtual && (0, jsx_runtime_1.jsx)("div", { style: { gridColumn: '1 / -1', height: before }, ref: probeRef }, void 0), children(itemIds, from), virtual && (0, jsx_runtime_1.jsx)("div", { style: { gridColumn: '1 / -1', height: after } }, void 0)] }), void 0));
 }
 exports.Virtualized = Virtualized;

package/dist/cjs/internalState/calcItems.js

@@ -5,7 +5,7 @@ const immer_1 = require("immer");
 const react_1 = require("react");
 const helpers_1 = require("../misc/helpers");
 function calcItems(state) {
-    react_1.useEffect(() => state.addReaction((state) => [
+    (0, react_1.useEffect)(() => state.addReaction((state) => [
         state.props.items,
         state.props.id,
         state.props.parentId,
@@ -21,14 +21,14 @@ function calcItems(state) {
             sorted = tableItems;
         }
         else {
-            const selectors = helpers_1.flatMap(sort, (sort) => {
+            const selectors = (0, helpers_1.flatMap)(sort, (sort) => {
                 const column = activeColumns.find((column) => column.id === sort.columnId);
                 if (!column)
                     return [];
                 const sortBy = column.sortBy instanceof Array ? column.sortBy : [column.sortBy];
                 return sortBy.map((sortBy) => ({ selector: (item) => sortBy(column.value(item), item), direction: sort.direction }));
             }).filter(Boolean);
-            sorted = helpers_1.orderBy(tableItems, selectors.map((x) => x.selector), selectors.map((x) => x.direction));
+            sorted = (0, helpers_1.orderBy)(tableItems, selectors.map((x) => x.selector), selectors.map((x) => x.direction));
         }
         const lookup = new Map();
         for (const item of sorted) {
@@ -76,10 +76,10 @@ function calcItems(state) {
             return isActive;
         })
             .reverse();
-        draft.items = immer_1.castDraft(allItems);
-        draft.itemsById = immer_1.castDraft(allItemsById);
-        draft.activeItems = immer_1.castDraft(activeItems);
-        draft.activeItemsById = immer_1.castDraft(activeItemsById);
+        draft.items = (0, immer_1.castDraft)(allItems);
+        draft.itemsById = (0, immer_1.castDraft)(allItemsById);
+        draft.activeItems = (0, immer_1.castDraft)(activeItems);
+        draft.activeItemsById = (0, immer_1.castDraft)(activeItemsById);
     }, { runNow: true }), [state]);
 }
 exports.calcItems = calcItems;