@vendorflow/components 2.0.79 → 2.0.82

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

@@ -3,6 +3,7 @@
 import { jsx } from '@emotion/react';
 import { Column, UseSortByColumnProps, HeaderGroup, UseSortByOptions, TableOptions, UseSortByColumnOptions, PluginHook, UsePaginationOptions, UseSortByInstanceProps, UsePaginationInstanceProps, TableInstance, TableState, UseSortByState, UsePaginationState, UseRowSelectOptions, UseRowSelectInstanceProps, UseRowSelectState, ColumnInstance, Row, UseRowSelectRowProps, UseExpandedOptions, UseExpandedInstanceProps, UseExpandedState, UseExpandedRowProps, ActionType, UseGlobalFiltersInstanceProps, UseGlobalFiltersState, UseFiltersOptions, UseFiltersInstanceProps, UseFiltersState, UseFiltersColumnOptions, UseFiltersColumnProps, Renderer, FilterProps, UseTableOptions, UseGlobalFiltersOptions, UseResizeColumnsColumnOptions, UseResizeColumnsColumnProps, UseResizeColumnsState } from 'react-table';
 import { ReactNode } from 'react';
+export declare const ACTION_COLUMN_ID = "action-column";
 export declare type Mode = 'single' | 'multi';
 export declare type CustomColumnConfigProps<D extends object> = {
     name?: string;
@@ -52,6 +53,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

@@ -73,7 +73,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getColumnFilterConfig = exports.renderSingleLineCell = exports.useDefaultTableInstance = exports.usePluginConfig = exports.CELL_PADDING = void 0;
+exports.getColumnFilterConfig = exports.renderSingleLineCell = exports.useDefaultTableInstance = exports.usePluginConfig = exports.CELL_PADDING = exports.ACTION_COLUMN_ID = void 0;
 /** @jsxRuntime classic */
 /** @jsx jsx */
 var react_1 = require("@emotion/react");
@@ -95,6 +95,7 @@ var react_scrollbar_size_1 = __importDefault(require("react-scrollbar-size"));
 var Table_1 = __importDefault(require("./TablePieces/Table"));
 var HeaderCell_1 = __importDefault(require("./TablePieces/HeaderCell"));
 var TableBodyContent_1 = __importDefault(require("./TablePieces/TableBodyContent"));
+exports.ACTION_COLUMN_ID = 'action-column';
 exports.CELL_PADDING = 4;
 var EXPAND_BTN_WIDTH = 24;
 var NO_MATCH_TEXT = 'Sorry, no matching records found';
@@ -112,7 +113,7 @@ 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;
@@ -162,9 +163,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) {
@@ -176,21 +177,27 @@ 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, hasScrollbar: hasScrollbar, hasScrollbarRefCallback: hasScrollbarRefCallback, height: tableBodyContentRect.height, isVirtualizeEnabled: !!(virtualizeConfig === null || virtualizeConfig === void 0 ? void 0 : virtualizeConfig.enabled), noMatchLabel: noMatchLabel, prepareRow: prepareRow, scrollContainerRef: scrollContainerRef, scrollbarWidth: scrollbarWidth, 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;
 function usePluginConfig(options) {
     var filters = options.filters, globalSearch = options.globalSearch, pagination = options.pagination, rowExpanding = options.rowExpanding, sorting = options.sorting, rowSelect = options.rowSelect, columnHiding = options.columnHiding, columnResizing = options.columnResizing, virtualize = options.virtualize;
-    var customCellWidth = (rowExpanding === null || rowExpanding === void 0 ? void 0 : rowExpanding.enabled) && (rowSelect === null || rowSelect === void 0 ? void 0 : rowSelect.enabled)
+    var actionColumnCellWidth = (rowExpanding === null || rowExpanding === void 0 ? void 0 : rowExpanding.enabled) && (rowSelect === null || rowSelect === void 0 ? void 0 : rowSelect.enabled)
         ? 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);
         }
@@ -217,10 +224,10 @@ function usePluginConfig(options) {
             result.push(function (hooks) {
                 hooks.visibleColumns.push(function (columns) { return __spreadArray([
                     {
-                        id: 'custom',
-                        width: customCellWidth,
-                        minWidth: customCellWidth,
-                        maxWidth: customCellWidth,
+                        id: exports.ACTION_COLUMN_ID,
+                        width: actionColumnCellWidth,
+                        minWidth: actionColumnCellWidth,
+                        maxWidth: actionColumnCellWidth,
                         Header: function (props) {
                             var _a = props, getToggleAllRowsSelectedProps = _a.getToggleAllRowsSelectedProps, getToggleAllPageRowsSelectedProps = _a.getToggleAllPageRowsSelectedProps;
                             return ((0, react_1.jsx)(react_2.Fragment, null,

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

@@ -51,7 +51,7 @@ function DataTable() {
             pageSize: 10,
         },
         virtualize: {
-            enabled: true,
+            enabled: false,
         },
         rowSelect: {
             enabled: true,
@@ -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/BodyCell.js

@@ -38,11 +38,12 @@ var DataTable_1 = require("../DataTable");
 function BodyCell(_a) {
     var cell = _a.cell, cellProps = _a.cellProps;
     var style = cellProps.style, className = cellProps.className, restOfCellProps = __rest(cellProps, ["style", "className"]);
+    var isActionColumn = cell.column.id === DataTable_1.ACTION_COLUMN_ID;
     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({ css: cx(
             // @ts-ignore
-            css(style), css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n              && {\n                padding: ", "px;\n                display: block;\n                border-bottom: none;\n              }\n            "], ["\n              && {\n                padding: ", "px;\n                display: block;\n                border-bottom: none;\n              }\n            "])), DataTable_1.CELL_PADDING)), className: (0, classnames_1.default)(className, cell.column.id === 'custom' ? 'cell-Custom' : undefined) }, restOfCellProps, { component: "div", variant: "body" }), cell.render('Cell')));
+            css(style), css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n              && {\n                padding: ", "px;\n                display: block;\n                border-bottom: none;\n                ", "\n              }\n            "], ["\n              && {\n                padding: ", "px;\n                display: block;\n                border-bottom: none;\n                ", "\n              }\n            "])), DataTable_1.CELL_PADDING, isActionColumn ? 'flex: none;' : '')), className: (0, classnames_1.default)(className, isActionColumn ? 'cell-ActionColumn' : undefined) }, restOfCellProps, { component: "div", variant: "body" }), cell.render('Cell')));
     }));
 }
 exports.default = BodyCell;

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,17 +38,19 @@ 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 }),
-                header.id !== 'custom' && !header.id.includes('_placeholder') && !!header.getResizerProps && ((0, react_1.jsx)(icons_material_1.DragIndicator, __assign({ css: css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n                  position: absolute;\n                  right: 0;\n                  top: 50%;\n                  transform: translate(-50%, -50%);\n                  color: #b2b2b2;\n                  background-color: white;\n                "], ["\n                  position: absolute;\n                  right: 0;\n                  top: 50%;\n                  transform: translate(-50%, -50%);\n                  color: #b2b2b2;\n                  background-color: white;\n                "]))) }, header.getResizerProps()))))));
+                header.id !== DataTable_1.ACTION_COLUMN_ID && !header.id.includes('_placeholder') && !!header.getResizerProps && ((0, react_1.jsx)(icons_material_1.DragIndicator, __assign({ css: css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n                  position: absolute;\n                  right: 0;\n                  top: 50%;\n                  transform: translate(-50%, -50%);\n                  color: #b2b2b2;\n                  background-color: white;\n                "], ["\n                  position: absolute;\n                  right: 0;\n                  top: 50%;\n                  transform: translate(-50%, -50%);\n                  color: #b2b2b2;\n                  background-color: white;\n                "]))) }, header.getResizerProps()))))));
     }));
 }
 exports.default = HeaderCell;

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

@@ -3,16 +3,20 @@
 import { jsx } from '@emotion/react';
 import { Dispatch, MutableRefObject, SetStateAction } from 'react';
 import { Row } from 'react-table';
+import { HasScrollbar } from '@vendorflow/common/lib/hooks';
 interface Props<D extends object> {
     defaultRowHeight: number;
     ExpandedComponent: ((props: {
         data: D;
     }) => JSX.Element) | undefined;
+    flexLayoutEnabled: boolean;
+    hasScrollbar: HasScrollbar;
     hasScrollbarRefCallback: (node: HTMLDivElement | null) => void;
     height: number | undefined;
     isVirtualizeEnabled: boolean;
     noMatchLabel?: string;
     prepareRow: (row: Row<D>) => void;
+    scrollbarWidth: number;
     scrollContainerRef: MutableRefObject<HTMLDivElement | null>;
     setScrollLeft: Dispatch<SetStateAction<number>>;
     tableBodyRef: MutableRefObject<HTMLDivElement | null>;
@@ -21,5 +25,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, hasScrollbar, hasScrollbarRefCallback, height, isVirtualizeEnabled, noMatchLabel, prepareRow, scrollbarWidth, scrollContainerRef, setScrollLeft, tableBodyRef, tableBodyMeasureRefCallback, tableRows, totalColumnsWidth, width, }: Props<D>): jsx.JSX.Element;
 export {};

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

@@ -25,23 +25,33 @@ var react_virtualized_1 = require("react-virtualized");
 var BodyRow_1 = __importDefault(require("./BodyRow"));
 var material_1 = require("@mui/material");
 var react_2 = require("react");
+var hooks_1 = require("@vendorflow/common/lib/hooks");
 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, hasScrollbar = _a.hasScrollbar, hasScrollbarRefCallback = _a.hasScrollbarRefCallback, height = _a.height, isVirtualizeEnabled = _a.isVirtualizeEnabled, noMatchLabel = _a.noMatchLabel, prepareRow = _a.prepareRow, scrollbarWidth = _a.scrollbarWidth, scrollContainerRef = _a.scrollContainerRef, setScrollLeft = _a.setScrollLeft, tableBodyRef = _a.tableBodyRef, tableBodyMeasureRefCallback = _a.tableBodyMeasureRefCallback, tableRows = _a.tableRows, totalColumnsWidth = _a.totalColumnsWidth, width = _a.width;
+    var scrollContentWidth = (0, react_2.useMemo)(function () {
+        if (!flexLayoutEnabled || !width) {
+            return totalColumnsWidth;
+        }
+        return width - (hasScrollbar.vertical ? scrollbarWidth : 0);
+    }, [flexLayoutEnabled, totalColumnsWidth, width, hasScrollbar, scrollbarWidth]);
+    var forceUpdate = (0, hooks_1.useForceUpdate)();
+    var cache = (0, react_2.useRef)(new react_virtualized_1.CellMeasurerCache({ fixedWidth: true, defaultHeight: defaultRowHeight, defaultWidth: scrollContentWidth }));
     (0, react_2.useEffect)(function () {
         if (isVirtualizeEnabled) {
             cache.current = new react_virtualized_1.CellMeasurerCache({
                 fixedWidth: true,
                 defaultHeight: defaultRowHeight,
-                defaultWidth: totalColumnsWidth,
+                defaultWidth: scrollContentWidth,
             });
             cache.current.clearAll();
+            forceUpdate();
         }
-    }, [totalColumnsWidth]);
+    }, [scrollContentWidth]);
     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 +78,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            "])), scrollContentWidth) }, 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

@@ -42,6 +42,7 @@ var material_1 = require("@mui/material");
 var icons_material_1 = require("@mui/icons-material");
 var nanoid_1 = require("nanoid");
 var IndeterminateCheckbox_1 = __importDefault(require("./IndeterminateCheckbox"));
+var DataTable_1 = require("../DataTable");
 function ViewColumnTool(_a) {
     var allColumns = _a.allColumns, columnNameById = _a.columnNameById;
     var id = (0, react_2.useMemo)(function () { return (0, nanoid_1.nanoid)(); }, []);
@@ -65,7 +66,7 @@ function ViewColumnTool(_a) {
                         (0, react_1.jsx)(material_1.IconButton, { onClick: handleClose },
                             (0, react_1.jsx)(icons_material_1.Close, null)))),
                 (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'; })
+                    .filter(function (column) { return column.id !== DataTable_1.ACTION_COLUMN_ID; })
                     .map(function (column) {
                     return ((0, react_1.jsx)(material_1.FormControlLabel, { key: column.id, label: columnNameById[column.id], 
                         // @ts-ignore

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vendorflow/components",
-  "version": "2.0.79",
+  "version": "2.0.82",
   "description": "React components for vendorflow",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -62,7 +62,7 @@
     "@types/react-table": "^7.7.6",
     "@typescript-eslint/eslint-plugin": "^4.32.0",
     "@typescript-eslint/parser": "^4.32.0",
-    "@vendorflow/common": "^1.0.44",
+    "@vendorflow/common": "^1.0.50",
     "babel-eslint": "10.1.0",
     "babel-jest": "^24.9.0",
     "babel-loader": "^8.2.2",