@vendorflow/components 2.0.78 → 2.0.81

package/lib/components/material-ui/DataTable/Data.js

@@ -19,6 +19,7 @@ var faker_1 = __importDefault(require("faker"));
 var DataTable_1 = require("./DataTable");
 exports.Columns = [
     {
+        id: 'fullName',
         Header: 'Full Name',
         columns: [
             __assign({ Header: 'First Name', accessor: 'firstName' }, (0, DataTable_1.getColumnFilterConfig)('text')),

package/lib/components/material-ui/DataTable/DataTable.d.ts

@@ -52,6 +52,8 @@ export interface TableFeatureOptions<D extends object> {
         enabled: boolean;
     };
     table?: {
+        flexLayoutEnabled?: boolean;
+        hideToolbar?: boolean;
         getRowId?: UseTableOptions<D>['getRowId'];
     };
     virtualize?: {

package/lib/components/material-ui/DataTable/DataTable.js

@@ -112,28 +112,29 @@ function DataTable(_a) {
     var scrollbarWidth = (0, react_scrollbar_size_1.default)().width;
     var _h = __read((0, react_2.useState)(0), 2), scrollLeft = _h[0], setScrollLeft = _h[1];
     var _j = (labels || { noMatchLabel: NO_MATCH_TEXT }).noMatchLabel, noMatchLabel = _j === void 0 ? NO_MATCH_TEXT : _j;
-    var _k = options || {}, rowExpandingConfig = _k.rowExpanding, filtersConfig = _k.filters, globalSearchConfig = _k.globalSearch, columnHidingConfig = _k.columnHiding, paginationConfig = _k.pagination, sortingConfig = _k.sorting, virtualizeConfig = _k.virtualize;
+    var _k = options || {}, rowExpandingConfig = _k.rowExpanding, filtersConfig = _k.filters, globalSearchConfig = _k.globalSearch, columnHidingConfig = _k.columnHiding, paginationConfig = _k.pagination, sortingConfig = _k.sorting, tableConfig = _k.table, virtualizeConfig = _k.virtualize;
     var ExpandedComponent = (rowExpandingConfig || {}).Component;
     var allColumns = instance.allColumns, getTableProps = instance.getTableProps, gotoPage = instance.gotoPage, headerGroups = instance.headerGroups, page = instance.page, prepareRow = instance.prepareRow, rows = instance.rows, setAllFilters = instance.setAllFilters, setPageSize = instance.setPageSize, setFilter = instance.setFilter, setGlobalFilter = instance.setGlobalFilter, state = instance.state, totalColumnsWidth = instance.totalColumnsWidth;
     var pageOptions = ((_b = options === null || options === void 0 ? void 0 : options.pagination) === null || _b === void 0 ? void 0 : _b.rowsPerPageOptions) || instance.pageOptions;
     var columnNameById = (0, react_2.useMemo)(function () {
         var result = {};
         function addNamesToMap(cols, result) {
-            cols.forEach(function (col) {
+            cols.forEach(function (col, index) {
                 var id = col.id != null ? col.id : typeof col.accessor === 'string' ? col.accessor : null;
-                if (id) {
-                    if (col.filterName) {
-                        result[id] = col.filterName;
-                    }
-                    else if (typeof col.Header === 'string') {
-                        result[id] = col.Header;
-                    }
-                    else if (!col.name) {
-                        throw new Error("Please provide a name for column with id = " + col.id + ".");
-                    }
-                    else {
-                        result[id] = col.name;
-                    }
+                if (!id) {
+                    throw new Error("Please provide an id for column " + (typeof col.Header === 'string' && !!col.Header ? col.Header : col.name ? col.name : "at index " + index));
+                }
+                if (col.filterName) {
+                    result[id] = col.filterName;
+                }
+                else if (typeof col.Header === 'string') {
+                    result[id] = col.Header;
+                }
+                else if (!col.name) {
+                    throw new Error("Please provide a name for column with id = " + col.id + ".");
+                }
+                else {
+                    result[id] = col.name;
                 }
                 if (Array.isArray(col === null || col === void 0 ? void 0 : col.columns)) {
                     addNamesToMap(col.columns, result);
@@ -161,9 +162,9 @@ function DataTable(_a) {
         }
     }, [scrollLeft]);
     return ((0, react_1.jsx)(material_1.Paper, __assign({ ref: rootRef, css: (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        width: calc(100% - ", "px);\n        height: 100%;\n        position: relative;\n      "], ["\n        width: calc(100% - ", "px);\n        height: 100%;\n        position: relative;\n      "])), hasScrollbar.vertical ? scrollbarWidth : 0), className: "DataTable" }, restOfProps),
-        (0, react_1.jsx)("div", { ref: toolbarRef, className: "DataTable__Toolbar" },
+        !(tableConfig === null || tableConfig === void 0 ? void 0 : tableConfig.hideToolbar) && ((0, react_1.jsx)("div", { ref: toolbarRef, className: "DataTable__Toolbar" },
             (0, react_1.jsx)(Toolbar_1.default, { title: title, allColumns: allColumns, columnNameById: columnNameById, globalFilter: globalFilter, enableFilters: filtersConfig === null || filtersConfig === void 0 ? void 0 : filtersConfig.enabled, enableGlobalSearch: globalSearchConfig === null || globalSearchConfig === void 0 ? void 0 : globalSearchConfig.enabled, enableHideColumns: columnHidingConfig === null || columnHidingConfig === void 0 ? void 0 : columnHidingConfig.enabled, hasRowsSelected: hasRowsSelected, numRowsSelected: numRowsSelected, setAllFilters: setAllFilters, setGlobalFilter: (globalSearchConfig === null || globalSearchConfig === void 0 ? void 0 : globalSearchConfig.setGlobalFilter) ? globalSearchConfig === null || globalSearchConfig === void 0 ? void 0 : globalSearchConfig.setGlobalFilter : setGlobalFilter, renderActions: renderActions, renderRowSelectActions: renderRowSelectActions }),
-            (filtersConfig === null || filtersConfig === void 0 ? void 0 : filtersConfig.enabled) && ((0, react_1.jsx)(AppliedFilters_1.default, { columnNameById: columnNameById, filters: filters, setFilter: setFilter }))),
+            (filtersConfig === null || filtersConfig === void 0 ? void 0 : filtersConfig.enabled) && ((0, react_1.jsx)(AppliedFilters_1.default, { columnNameById: columnNameById, filters: filters, setFilter: setFilter })))),
         (0, react_1.jsx)("div", { className: "DataTable__TableContainer", css: (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          height: ", "px;\n        "], ["\n          height: ", "px;\n        "])), containerHeight) },
             (0, react_1.jsx)(Table_1.default, { getTableProps: getTableProps, css: (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n            width: 100%;\n            display: grid;\n            grid-template-rows: auto 1fr;\n          "], ["\n            width: 100%;\n            display: grid;\n            grid-template-rows: auto 1fr;\n          "]))) },
                 (0, react_1.jsx)(material_1.TableHead, { ref: tableHeadRef, className: "DataTable__TableHead", component: "div", css: (0, react_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n              && {\n                display: block;\n                height: auto;\n                width: calc(100% - ", "px);\n                overflow-x: auto;\n                -ms-overflow-style: none; /* IE and Edge */\n                scrollbar-width: none; /* Firefox */\n\n                &::-webkit-scrollbar {\n                  /* Hide scrollbar for Chrome, Safari and Opera */\n                  display: none;\n                }\n              }\n            "], ["\n              && {\n                display: block;\n                height: auto;\n                width: calc(100% - ", "px);\n                overflow-x: auto;\n                -ms-overflow-style: none; /* IE and Edge */\n                scrollbar-width: none; /* Firefox */\n\n                &::-webkit-scrollbar {\n                  /* Hide scrollbar for Chrome, Safari and Opera */\n                  display: none;\n                }\n              }\n            "])), hasScrollbar.vertical ? scrollbarWidth : 0), onScroll: function (evt) {
@@ -175,10 +176,10 @@ function DataTable(_a) {
                     // eslint-disable-next-line react/jsx-key
                     (0, react_1.jsx)(material_1.TableRow, __assign({}, headerGroup.getHeaderGroupProps(), { component: "div" }), headerGroup.headers.map(function (header) {
                         var _a = header.getHeaderProps((sortingConfig === null || sortingConfig === void 0 ? void 0 : sortingConfig.enabled) ? header.getSortByToggleProps() : undefined), key = _a.key, restOfHeaderProps = __rest(_a, ["key"]);
-                        return (0, react_1.jsx)(HeaderCell_1.default, { key: key, header: header, headerProps: restOfHeaderProps });
+                        return ((0, react_1.jsx)(HeaderCell_1.default, { key: key, header: header, headerProps: restOfHeaderProps, flexLayoutEnabled: (tableConfig === null || tableConfig === void 0 ? void 0 : tableConfig.flexLayoutEnabled) || false }));
                     })));
                 })),
-                (0, react_1.jsx)(TableBodyContent_1.default, { defaultRowHeight: defaultRowHeight, ExpandedComponent: ExpandedComponent, hasScrollbarRefCallback: hasScrollbarRefCallback, height: tableBodyContentRect.height, isVirtualizeEnabled: !!(virtualizeConfig === null || virtualizeConfig === void 0 ? void 0 : virtualizeConfig.enabled), noMatchLabel: noMatchLabel, prepareRow: prepareRow, scrollContainerRef: scrollContainerRef, setScrollLeft: setScrollLeft, tableBodyRef: tableBodyRef, tableBodyMeasureRefCallback: tableBodyMeasureRefCallback, tableRows: tableRows, totalColumnsWidth: totalColumnsWidth, width: tableBodyContentRect.width }))),
+                (0, react_1.jsx)(TableBodyContent_1.default, { defaultRowHeight: defaultRowHeight, ExpandedComponent: ExpandedComponent, flexLayoutEnabled: (tableConfig === null || tableConfig === void 0 ? void 0 : tableConfig.flexLayoutEnabled) || false, hasScrollbarRefCallback: hasScrollbarRefCallback, height: tableBodyContentRect.height, isVirtualizeEnabled: !!(virtualizeConfig === null || virtualizeConfig === void 0 ? void 0 : virtualizeConfig.enabled), noMatchLabel: noMatchLabel, prepareRow: prepareRow, scrollContainerRef: scrollContainerRef, setScrollLeft: setScrollLeft, tableBodyRef: tableBodyRef, tableBodyMeasureRefCallback: tableBodyMeasureRefCallback, tableRows: tableRows, totalColumnsWidth: totalColumnsWidth, width: tableBodyContentRect.width }))),
         (paginationConfig === null || paginationConfig === void 0 ? void 0 : paginationConfig.enabled) && ((0, react_1.jsx)(material_1.TablePagination, { ref: paginationRef, className: "DataTable__Pagination", component: "div", count: rows.length, page: pageIndex, onPageChange: function (evt, newPage) { return gotoPage(newPage); }, onRowsPerPageChange: function (evt) { return setPageSize(Number(evt.target.value)); }, rowsPerPage: pageSize, rowsPerPageOptions: pageOptions }))));
 }
 exports.default = DataTable;
@@ -188,8 +189,14 @@ function usePluginConfig(options) {
         ? exports.CELL_PADDING * 2 + EXPAND_BTN_WIDTH + IndeterminateCheckbox_1.CHECKBOX_WIDTH
         : Math.max(EXPAND_BTN_WIDTH, IndeterminateCheckbox_1.CHECKBOX_WIDTH) + exports.CELL_PADDING * 2;
     return (0, react_2.useMemo)(function () {
+        var _a;
         var result = [];
-        result.push(react_table_1.useBlockLayout);
+        if ((_a = options.table) === null || _a === void 0 ? void 0 : _a.flexLayoutEnabled) {
+            result.push(react_table_1.useFlexLayout);
+        }
+        else {
+            result.push(react_table_1.useBlockLayout);
+        }
         if (filters === null || filters === void 0 ? void 0 : filters.enabled) {
             result.push(react_table_1.useFilters);
         }

package/lib/components/material-ui/DataTable/DataTable.story.js

@@ -61,6 +61,7 @@ function DataTable() {
             enabled: true,
         },
         table: {
+            flexLayoutEnabled: true,
             getRowId: function (person) { return person.id; },
         },
     };
@@ -69,7 +70,6 @@ function DataTable() {
         data: data,
         options: options,
         defaultColumn: { minWidth: 50, width: 150 },
-        initialState: { hiddenColumns: ['firstName'] },
     });
     return (react_1.default.createElement(material_1.ThemeProvider, { theme: (0, material_1.createTheme)() },
         react_1.default.createElement("div", { style: { height: '700px', width: '640px' } },

package/lib/components/material-ui/DataTable/TablePieces/BodyRow.d.ts

@@ -1,3 +1,6 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import { CSSProperties } from 'react';
 import { EnhancedRow } from '../DataTable';
 import { TableRowProps } from 'react-table';
@@ -11,5 +14,5 @@ interface Props<D extends object> {
     style?: CSSProperties;
     measure?: () => void;
 }
-declare const BodyRow: import("react").NamedExoticComponent<Props<any>>;
-export default BodyRow;
+export default function BodyRow<D extends object>({ ExpandedComponent, row, rowProps, innerRef, style, measure, }: Props<D>): jsx.JSX.Element;
+export {};

package/lib/components/material-ui/DataTable/TablePieces/BodyRow.js

@@ -52,7 +52,7 @@ var react_2 = require("react");
 var material_1 = require("@mui/material");
 var BodyCell_1 = __importDefault(require("./BodyCell"));
 var lodash_1 = require("lodash");
-function Row(_a) {
+function BodyRow(_a) {
     var ExpandedComponent = _a.ExpandedComponent, row = _a.row, rowProps = _a.rowProps, innerRef = _a.innerRef, style = _a.style, measure = _a.measure;
     var _b = __read((0, react_2.useState)(null), 2), element = _b[0], setElement = _b[1];
     var className = rowProps.className, rowPropsStyle = rowProps.style, restOfRowProps = __rest(rowProps, ["className", "style"]);
@@ -71,18 +71,17 @@ function Row(_a) {
                 if (innerRef) {
                     innerRef(node);
                 }
-            }, css: cx(style && css(style), css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n              width: auto;\n            "], ["\n              width: auto;\n            "])))) },
+            }, css: cx(style && css(style)) },
             (0, react_1.jsx)(material_1.TableRow, __assign({}, restOfRowProps, { component: "div", css: cx(
                 // @ts-ignore
-                css(rowPropsStyle), css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n                && {\n                  display: flex;\n                  flex-direction: row;\n                  flex-wrap: nowrap;\n                  align-items: center;\n                  box-sizing: border-box;\n                  border-bottom: 1px solid rgba(224, 224, 224, 1);\n                }\n              "], ["\n                && {\n                  display: flex;\n                  flex-direction: row;\n                  flex-wrap: nowrap;\n                  align-items: center;\n                  box-sizing: border-box;\n                  border-bottom: 1px solid rgba(224, 224, 224, 1);\n                }\n              "])))), className: className }), row.cells.map(function (cell) {
+                css(rowPropsStyle), css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n                && {\n                  display: flex;\n                  flex-direction: row;\n                  flex-wrap: nowrap;\n                  align-items: center;\n                  box-sizing: border-box;\n                  border-bottom: 1px solid rgba(224, 224, 224, 1);\n                }\n              "], ["\n                && {\n                  display: flex;\n                  flex-direction: row;\n                  flex-wrap: nowrap;\n                  align-items: center;\n                  box-sizing: border-box;\n                  border-bottom: 1px solid rgba(224, 224, 224, 1);\n                }\n              "])))), className: className }), row.cells.map(function (cell) {
                 var _a = cell.getCellProps(), key = _a.key, restOfCellProps = __rest(_a, ["key"]);
                 return (0, react_1.jsx)(BodyCell_1.default, { key: key, cell: cell, cellProps: restOfCellProps });
             })),
-            isExpanded && !!ExpandedComponent && ((0, react_1.jsx)(material_1.TableRow, { component: "div", css: css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n                && {\n                  display: flex;\n                  flex-direction: row;\n                  flex-wrap: nowrap;\n                  align-items: center;\n                  box-sizing: border-box;\n                  min-width: 100%;\n                  width: 100%;\n                  border-bottom: 1px solid rgba(224, 224, 224, 1);\n                }\n              "], ["\n                && {\n                  display: flex;\n                  flex-direction: row;\n                  flex-wrap: nowrap;\n                  align-items: center;\n                  box-sizing: border-box;\n                  min-width: 100%;\n                  width: 100%;\n                  border-bottom: 1px solid rgba(224, 224, 224, 1);\n                }\n              "]))) },
-                (0, react_1.jsx)(material_1.TableCell, { component: "div", variant: "body", css: css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n                  && {\n                    display: block;\n                    border-bottom: none;\n                  }\n                "], ["\n                  && {\n                    display: block;\n                    border-bottom: none;\n                  }\n                "]))) },
+            isExpanded && !!ExpandedComponent && ((0, react_1.jsx)(material_1.TableRow, { component: "div", css: css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n                && {\n                  display: flex;\n                  flex-direction: row;\n                  flex-wrap: nowrap;\n                  align-items: center;\n                  box-sizing: border-box;\n                  min-width: 100%;\n                  width: 100%;\n                  border-bottom: 1px solid rgba(224, 224, 224, 1);\n                }\n              "], ["\n                && {\n                  display: flex;\n                  flex-direction: row;\n                  flex-wrap: nowrap;\n                  align-items: center;\n                  box-sizing: border-box;\n                  min-width: 100%;\n                  width: 100%;\n                  border-bottom: 1px solid rgba(224, 224, 224, 1);\n                }\n              "]))) },
+                (0, react_1.jsx)(material_1.TableCell, { component: "div", variant: "body", css: css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n                  && {\n                    display: block;\n                    border-bottom: none;\n                  }\n                "], ["\n                  && {\n                    display: block;\n                    border-bottom: none;\n                  }\n                "]))) },
                     (0, react_1.jsx)(ExpandedComponent, { data: row.original }))))));
     }));
 }
-var BodyRow = (0, react_2.memo)(Row);
 exports.default = BodyRow;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+var templateObject_1, templateObject_2, templateObject_3;

package/lib/components/material-ui/DataTable/TablePieces/HeaderCell.d.ts

@@ -5,8 +5,9 @@ import { EnhancedHeader } from '../DataTable';
 import { TableHeaderProps } from 'react-table';
 interface Props<D extends object> {
     className?: string;
+    flexLayoutEnabled: boolean;
     header: EnhancedHeader<D>;
     headerProps: Omit<TableHeaderProps, 'key'>;
 }
-export default function HeaderCell<D extends object>({ className, header, headerProps }: Props<D>): jsx.JSX.Element;
+export default function HeaderCell<D extends object>({ className, flexLayoutEnabled, header, headerProps }: Props<D>): jsx.JSX.Element;
 export {};

package/lib/components/material-ui/DataTable/TablePieces/HeaderCell.js

@@ -38,13 +38,15 @@ var material_1 = require("@mui/material");
 var icons_material_1 = require("@mui/icons-material");
 var DataTable_1 = require("../DataTable");
 function HeaderCell(_a) {
-    var className = _a.className, header = _a.header, headerProps = _a.headerProps;
+    var className = _a.className, flexLayoutEnabled = _a.flexLayoutEnabled, header = _a.header, headerProps = _a.headerProps;
     var headerPropsClassName = headerProps.className, style = headerProps.style, restOfProps = __rest(headerProps, ["className", "style"]);
     return ((0, react_1.jsx)(react_1.ClassNames, null, function (_a) {
         var css = _a.css, cx = _a.cx;
         return ((0, react_1.jsx)(material_1.TableCell, __assign({}, restOfProps, { component: "div", variant: "head", css: cx(
             // @ts-ignore
-            css(style), css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n              && {\n                display: flex;\n                box-sizing: border-box;\n                padding: ", "px;\n              }\n            "], ["\n              && {\n                display: flex;\n                box-sizing: border-box;\n                padding: ", "px;\n              }\n            "])), DataTable_1.CELL_PADDING), header.minWidth !== undefined && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n                min-width: ", "px;\n              "], ["\n                min-width: ", "px;\n              "])), header.minWidth), header.maxWidth !== undefined && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n                max-width: ", "px;\n              "], ["\n                max-width: ", "px;\n              "])), header.maxWidth)), className: (0, classnames_1.default)(headerPropsClassName, className, "col-" + header.id) }),
+            css(style), css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n              && {\n                display: flex;\n                box-sizing: border-box;\n                padding: ", "px;\n              }\n            "], ["\n              && {\n                display: flex;\n                box-sizing: border-box;\n                padding: ", "px;\n              }\n            "])), DataTable_1.CELL_PADDING), !flexLayoutEnabled &&
+                header.minWidth !== undefined && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n                min-width: ", "px;\n              "], ["\n                min-width: ", "px;\n              "])), header.minWidth), !flexLayoutEnabled &&
+                header.maxWidth !== undefined && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n                max-width: ", "px;\n              "], ["\n                max-width: ", "px;\n              "])), header.maxWidth)), className: (0, classnames_1.default)(headerPropsClassName, className, "col-" + header.id) }),
             (0, react_1.jsx)("div", { css: cx(css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n                position: relative;\n                display: flex;\n                flex-direction: row;\n                justify-content: ", ";\n                align-items: center;\n                width: 100%;\n                overflow: hidden;\n                white-space: nowrap;\n                text-overflow: ellipsis;\n              "], ["\n                position: relative;\n                display: flex;\n                flex-direction: row;\n                justify-content: ", ";\n                align-items: center;\n                width: 100%;\n                overflow: hidden;\n                white-space: nowrap;\n                text-overflow: ellipsis;\n              "])), header.columns != null ? 'center' : 'flex-start')) },
                 (0, react_1.jsx)("span", { css: cx(css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n                  font-weight: 600;\n                  flex: none;\n                "], ["\n                  font-weight: 600;\n                  flex: none;\n                "])))) }, header.render('Header')),
                 (0, react_1.jsx)(SortIndicator_1.default, { canSort: header.canSort, isSorted: header.isSorted, isSortedDesc: header.isSortedDesc }),

package/lib/components/material-ui/DataTable/TablePieces/TableBodyContent.d.ts

@@ -8,6 +8,7 @@ interface Props<D extends object> {
     ExpandedComponent: ((props: {
         data: D;
     }) => JSX.Element) | undefined;
+    flexLayoutEnabled: boolean;
     hasScrollbarRefCallback: (node: HTMLDivElement | null) => void;
     height: number | undefined;
     isVirtualizeEnabled: boolean;
@@ -21,5 +22,5 @@ interface Props<D extends object> {
     totalColumnsWidth: number;
     width: number | undefined;
 }
-export default function TableBodyContent<D extends object>({ defaultRowHeight, ExpandedComponent, hasScrollbarRefCallback, height, isVirtualizeEnabled, noMatchLabel, prepareRow, scrollContainerRef, setScrollLeft, tableBodyRef, tableBodyMeasureRefCallback, tableRows, totalColumnsWidth, width, }: Props<D>): jsx.JSX.Element;
+export default function TableBodyContent<D extends object>({ defaultRowHeight, ExpandedComponent, flexLayoutEnabled, hasScrollbarRefCallback, height, isVirtualizeEnabled, noMatchLabel, prepareRow, scrollContainerRef, setScrollLeft, tableBodyRef, tableBodyMeasureRefCallback, tableRows, totalColumnsWidth, width, }: Props<D>): jsx.JSX.Element;
 export {};

package/lib/components/material-ui/DataTable/TablePieces/TableBodyContent.js

@@ -26,22 +26,24 @@ var BodyRow_1 = __importDefault(require("./BodyRow"));
 var material_1 = require("@mui/material");
 var react_2 = require("react");
 function TableBodyContent(_a) {
-    var defaultRowHeight = _a.defaultRowHeight, ExpandedComponent = _a.ExpandedComponent, hasScrollbarRefCallback = _a.hasScrollbarRefCallback, height = _a.height, isVirtualizeEnabled = _a.isVirtualizeEnabled, noMatchLabel = _a.noMatchLabel, prepareRow = _a.prepareRow, scrollContainerRef = _a.scrollContainerRef, setScrollLeft = _a.setScrollLeft, tableBodyRef = _a.tableBodyRef, tableBodyMeasureRefCallback = _a.tableBodyMeasureRefCallback, tableRows = _a.tableRows, totalColumnsWidth = _a.totalColumnsWidth, width = _a.width;
-    var cache = (0, react_2.useRef)(new react_virtualized_1.CellMeasurerCache({ fixedWidth: true, defaultHeight: defaultRowHeight, defaultWidth: totalColumnsWidth }));
+    var defaultRowHeight = _a.defaultRowHeight, ExpandedComponent = _a.ExpandedComponent, flexLayoutEnabled = _a.flexLayoutEnabled, hasScrollbarRefCallback = _a.hasScrollbarRefCallback, height = _a.height, isVirtualizeEnabled = _a.isVirtualizeEnabled, noMatchLabel = _a.noMatchLabel, prepareRow = _a.prepareRow, scrollContainerRef = _a.scrollContainerRef, setScrollLeft = _a.setScrollLeft, tableBodyRef = _a.tableBodyRef, tableBodyMeasureRefCallback = _a.tableBodyMeasureRefCallback, tableRows = _a.tableRows, totalColumnsWidth = _a.totalColumnsWidth, width = _a.width;
+    var defaultWidth = (0, react_2.useMemo)(function () { return (flexLayoutEnabled && width && width > totalColumnsWidth ? width : totalColumnsWidth); }, [flexLayoutEnabled, totalColumnsWidth, width]);
+    var cache = (0, react_2.useRef)(new react_virtualized_1.CellMeasurerCache({ fixedWidth: true, defaultHeight: defaultRowHeight, defaultWidth: defaultWidth }));
     (0, react_2.useEffect)(function () {
         if (isVirtualizeEnabled) {
             cache.current = new react_virtualized_1.CellMeasurerCache({
                 fixedWidth: true,
                 defaultHeight: defaultRowHeight,
-                defaultWidth: totalColumnsWidth,
+                defaultWidth: defaultWidth,
             });
             cache.current.clearAll();
         }
-    }, [totalColumnsWidth]);
+    }, [defaultWidth]);
     function renderRow(_a) {
         var columnIndex = _a.columnIndex, rowIndex = _a.rowIndex, key = _a.key, parent = _a.parent, style = _a.style;
         var row = tableRows[rowIndex];
         prepareRow(row);
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
         var _b = row.getRowProps(), _ = _b.key, restOfRowProps = __rest(_b, ["key"]);
         return ((0, react_1.jsx)(react_virtualized_1.CellMeasurer, { cache: cache.current, columnIndex: columnIndex, key: key, rowIndex: rowIndex, parent: parent }, function (_a) {
             var measure = _a.measure, registerChild = _a.registerChild;
@@ -68,14 +70,14 @@ function TableBodyContent(_a) {
                 var scrollLeft = evt.target.scrollLeft;
                 setScrollLeft(scrollLeft);
             } },
-            (0, react_1.jsx)("div", null, tableRows.length > 0 ? (tableRows.map(function (row) {
+            (0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n              width: ", "px;\n            "], ["\n              width: ", "px;\n            "])), defaultWidth) }, tableRows.length > 0 ? (tableRows.map(function (row) {
                 prepareRow(row);
                 var _a = row.getRowProps(), key = _a.key, restOfRowProps = __rest(_a, ["key"]);
                 return ((0, react_1.jsx)(BodyRow_1.default, { key: key, ExpandedComponent: ExpandedComponent, row: row, rowProps: restOfRowProps }));
-            })) : ((0, react_1.jsx)(material_1.TableRow, { component: "div", css: (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n                  && {\n                    display: flex;\n                    flex-direction: row;\n                    flex-wrap: nowrap;\n                    align-items: center;\n                    box-sizing: border-box;\n                    min-width: 100%;\n                    width: 100%;\n                    border-bottom: 1px solid rgba(224, 224, 224, 1);\n                  }\n\n                  &&:last-child {\n                    border-bottom: none;\n                  }\n                "], ["\n                  && {\n                    display: flex;\n                    flex-direction: row;\n                    flex-wrap: nowrap;\n                    align-items: center;\n                    box-sizing: border-box;\n                    min-width: 100%;\n                    width: 100%;\n                    border-bottom: 1px solid rgba(224, 224, 224, 1);\n                  }\n\n                  &&:last-child {\n                    border-bottom: none;\n                  }\n                "]))) },
-                (0, react_1.jsx)(material_1.TableCell, { component: "div", variant: "body", css: (0, react_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n                    && {\n                      display: block;\n                      border-bottom: none;\n                      width: 100%;\n                    }\n                  "], ["\n                    && {\n                      display: block;\n                      border-bottom: none;\n                      width: 100%;\n                    }\n                  "]))) },
-                    (0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n                      text-align: center;\n                    "], ["\n                      text-align: center;\n                    "]))) },
+            })) : ((0, react_1.jsx)(material_1.TableRow, { component: "div", css: (0, react_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n                  && {\n                    display: flex;\n                    flex-direction: row;\n                    flex-wrap: nowrap;\n                    align-items: center;\n                    box-sizing: border-box;\n                    min-width: 100%;\n                    width: 100%;\n                    border-bottom: 1px solid rgba(224, 224, 224, 1);\n                  }\n\n                  &&:last-child {\n                    border-bottom: none;\n                  }\n                "], ["\n                  && {\n                    display: flex;\n                    flex-direction: row;\n                    flex-wrap: nowrap;\n                    align-items: center;\n                    box-sizing: border-box;\n                    min-width: 100%;\n                    width: 100%;\n                    border-bottom: 1px solid rgba(224, 224, 224, 1);\n                  }\n\n                  &&:last-child {\n                    border-bottom: none;\n                  }\n                "]))) },
+                (0, react_1.jsx)(material_1.TableCell, { component: "div", variant: "body", css: (0, react_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n                    && {\n                      display: block;\n                      border-bottom: none;\n                      width: 100%;\n                    }\n                  "], ["\n                    && {\n                      display: block;\n                      border-bottom: none;\n                      width: 100%;\n                    }\n                  "]))) },
+                    (0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n                      text-align: center;\n                    "], ["\n                      text-align: center;\n                    "]))) },
                         (0, react_1.jsx)("span", null, noMatchLabel))))))))));
 }
 exports.default = TableBodyContent;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/lib/components/material-ui/DataTable/TablePieces/ViewColumnTool.js

@@ -67,9 +67,7 @@ function ViewColumnTool(_a) {
                 (0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n              display: flex;\n              flex-direction: column;\n              justify-content: flex-start;\n              align-items: flex-start;\n            "], ["\n              display: flex;\n              flex-direction: column;\n              justify-content: flex-start;\n              align-items: flex-start;\n            "]))) }, allColumns
                     .filter(function (column) { return column.id !== 'custom'; })
                     .map(function (column) {
-                    var label = columnNameById[column.id];
-                    console.log('-> label', label);
-                    return ((0, react_1.jsx)(material_1.FormControlLabel, { key: column.id, label: label, 
+                    return ((0, react_1.jsx)(material_1.FormControlLabel, { key: column.id, label: columnNameById[column.id], 
                         // @ts-ignore
                         control: (0, react_1.jsx)(IndeterminateCheckbox_1.default, __assign({}, column.getToggleHiddenProps())) }));
                 }))))));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vendorflow/components",
-  "version": "2.0.78",
+  "version": "2.0.81",
   "description": "React components for vendorflow",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",