@vendorflow/components 2.0.73 → 2.0.76

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

@@ -1,4 +1,7 @@
-import { Column, UseSortByColumnProps, HeaderGroup, UseSortByOptions, TableOptions, UseSortByColumnOptions, PluginHook, UsePaginationOptions, UseSortByInstanceProps, UsePaginationInstanceProps, TableInstance, TableState, UseSortByState, UsePaginationState, UseRowSelectOptions, UseRowSelectInstanceProps, UseRowSelectState, Row, UseRowSelectRowProps, UseExpandedOptions, UseExpandedInstanceProps, UseExpandedState, UseExpandedRowProps, UseGlobalFiltersInstanceProps, UseGlobalFiltersState, UseFiltersOptions, UseFiltersInstanceProps, UseFiltersState, UseFiltersColumnOptions, UseFiltersColumnProps, Renderer, FilterProps, UseTableOptions, UseGlobalFiltersOptions } from 'react-table';
+/** @jsxRuntime classic */
+/** @jsx jsx */
+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 type Mode = 'single' | 'multi';
 export declare type CustomColumnConfigProps<D extends object> = {
@@ -6,19 +9,18 @@ export declare type CustomColumnConfigProps<D extends object> = {
     filterName?: string;
     columns?: EnhancedColumn<D>[];
 };
-export declare type EnhancedHeader<D extends object> = HeaderGroup<D> & UseFiltersColumnProps<D> & UseSortByColumnProps<D> & CustomColumnConfigProps<D>;
+export declare type EnhancedHeader<D extends object> = HeaderGroup<D> & UseFiltersColumnProps<D> & UseSortByColumnProps<D> & UseResizeColumnsColumnProps<D> & CustomColumnConfigProps<D>;
 export declare type EnhancedTableOptions<D extends object> = TableOptions<D> & UseExpandedOptions<D> & UseFiltersOptions<D> & UseGlobalFiltersOptions<D> & UseSortByOptions<D> & UsePaginationOptions<D> & UseRowSelectOptions<D>;
 export declare type EnhancedTableInstance<D extends object> = Omit<TableInstance<D>, 'state'> & UseExpandedInstanceProps<D> & UseFiltersInstanceProps<D> & UseGlobalFiltersInstanceProps<D> & UseSortByInstanceProps<D> & UsePaginationInstanceProps<D> & UseRowSelectInstanceProps<D> & {
     state: EnhancedTableState<D>;
 };
-export declare type EnhancedTableState<D extends object> = TableState<D> & UseExpandedState<D> & UseFiltersState<D> & UseGlobalFiltersState<D> & UseSortByState<D> & UsePaginationState<D> & UseRowSelectState<D>;
-export declare type EnhancedColumn<D extends object> = CustomColumnConfigProps<D> & Partial<Omit<Column<D>, 'columns'>> & Partial<UseFiltersColumnOptions<D>> & Partial<UseSortByColumnOptions<D>>;
+export declare type EnhancedTableState<D extends object> = TableState<D> & UseExpandedState<D> & UseFiltersState<D> & UseGlobalFiltersState<D> & UseSortByState<D> & UsePaginationState<D> & UseRowSelectState<D> & UseResizeColumnsState<D>;
+export declare type EnhancedColumn<D extends object> = CustomColumnConfigProps<D> & Partial<Omit<Column<D>, 'columns'>> & Partial<UseFiltersColumnOptions<D>> & Partial<UseSortByColumnOptions<D>> & Partial<UseResizeColumnsColumnOptions<D>>;
 export declare type EnhancedRow<D extends object> = Row<D> & UseExpandedRowProps<D> & UseRowSelectRowProps<D>;
 export interface TableFeatureOptions<D extends object> {
     rowExpanding?: {
         enabled: boolean;
         mode: Mode;
-        colSpan?: number;
         Component: (props: {
             data: D;
         }) => JSX.Element;
@@ -34,6 +36,9 @@ export interface TableFeatureOptions<D extends object> {
     columnHiding?: {
         enabled: boolean;
     };
+    columnResizing?: {
+        enabled: boolean;
+    };
     pagination?: {
         enabled: boolean;
         pageSize?: number;
@@ -49,13 +54,17 @@ export interface TableFeatureOptions<D extends object> {
     table?: {
         getRowId?: UseTableOptions<D>['getRowId'];
     };
+    virtualize?: {
+        enabled: boolean;
+        defaultRowHeight?: number;
+    };
 }
+export declare const CELL_PADDING = 4;
 interface Props<D extends object> {
     title?: string;
     'data-testid'?: string;
     labels?: {
         noMatchLabel?: string;
-        noMatchColSpan?: number;
     };
     columns: Partial<EnhancedColumn<D>>[];
     instance: EnhancedTableInstance<D>;
@@ -70,8 +79,82 @@ export interface UseDefaultTableInstanceProps<D extends object> {
     data: D[];
     options?: TableFeatureOptions<D>;
     initialState?: Partial<EnhancedTableState<D>>;
+    defaultColumn?: Partial<Column<D>>;
 }
-export declare function useDefaultTableInstance<D extends object>({ columns, data, options, initialState, }: UseDefaultTableInstanceProps<D>): EnhancedTableInstance<D>;
+export declare function useDefaultTableInstance<D extends object>({ columns, data, options, initialState, defaultColumn, }: UseDefaultTableInstanceProps<D>): {
+    setColumnWidth: (columnId: string, width: number) => void;
+    data: readonly D[];
+    columns: ColumnInstance<D>[];
+    headers: ColumnInstance<D>[];
+    rows: Row<D>[];
+    plugins: PluginHook<D>[];
+    allColumns: ColumnInstance<D>[];
+    initialState?: Partial<TableState<D>> | undefined;
+    stateReducer?: ((newState: TableState<D>, action: ActionType, previousState: TableState<D>, instance?: TableInstance<D> | undefined) => TableState<D>) | undefined;
+    useControlledState?: ((state: TableState<D>, meta: import("react-table").MetaBase<D>) => TableState<D>) | undefined;
+    defaultColumn?: Partial<Column<D>> | undefined;
+    getSubRows?: ((originalRow: D, relativeIndex: number) => D[]) | undefined;
+    getRowId?: ((originalRow: D, relativeIndex: number, parent?: Row<D> | undefined) => string) | undefined;
+    autoResetHiddenColumns?: boolean | undefined;
+    dispatch: import("react-table").TableDispatch<any>;
+    visibleColumns: ColumnInstance<D>[];
+    headerGroups: HeaderGroup<D>[];
+    footerGroups: HeaderGroup<D>[];
+    flatHeaders: ColumnInstance<D>[];
+    rowsById: Record<string, Row<D>>;
+    getTableProps: (propGetter?: import("react-table").TablePropGetter<D> | undefined) => import("react-table").TableProps;
+    getTableBodyProps: (propGetter?: import("react-table").TableBodyPropGetter<D> | undefined) => import("react-table").TableBodyProps;
+    prepareRow: (row: Row<D>) => void;
+    flatRows: Row<D>[];
+    totalColumnsWidth: number;
+    allColumnsHidden: boolean;
+    toggleHideColumn: (columnId: import("react-table").IdType<D>, value?: boolean | undefined) => void;
+    setHiddenColumns: (param: import("react-table").IdType<D>[] | ((oldHidden: import("react-table").IdType<D>[]) => import("react-table").IdType<D>[])) => void;
+    toggleHideAllColumns: (value?: boolean | undefined) => void;
+    getToggleHideAllColumnsProps: (props?: Partial<import("react-table").TableToggleHideAllColumnProps> | undefined) => import("react-table").TableToggleHideAllColumnProps;
+    getHooks: () => import("react-table").Hooks<D>;
+    preExpandedRows: Row<D>[];
+    expandedRows: Row<D>[];
+    expandedDepth: number;
+    isAllRowsExpanded: boolean;
+    toggleRowExpanded: (id: import("react-table").IdType<D>[], value?: boolean | undefined) => void;
+    toggleAllRowsExpanded: (value?: boolean | undefined) => void;
+    preFilteredRows: Row<D>[];
+    preFilteredFlatRows: Row<D>[];
+    preFilteredRowsById: Record<string, Row<D>>;
+    filteredRows: Row<D>[];
+    filteredFlatRows: Row<D>[];
+    filteredRowsById: Record<string, Row<D>>;
+    setFilter: (columnId: import("react-table").IdType<D>, updater: any) => void;
+    setAllFilters: (updater: import("react-table").Filters<D> | ((filters: import("react-table").Filters<D>) => import("react-table").Filters<D>)) => void;
+    preGlobalFilteredRows: Row<D>[];
+    preGlobalFilteredFlatRows: Row<D>[];
+    preGlobalFilteredRowsById: Record<string, Row<D>>;
+    globalFilteredRows: Row<D>[];
+    globalFilteredFlatRows: Row<D>[];
+    globalFilteredRowsById: Record<string, Row<D>>;
+    setGlobalFilter: (filterValue: any) => void;
+    preSortedRows: Row<D>[];
+    setSortBy: (sortBy: import("react-table").SortingRule<D>[]) => void;
+    toggleSortBy: (columnId: import("react-table").IdType<D>, descending?: boolean | undefined, isMulti?: boolean | undefined) => void;
+    page: Row<D>[];
+    pageCount: number;
+    pageOptions: number[];
+    canPreviousPage: boolean;
+    canNextPage: boolean;
+    gotoPage: (updater: number | ((pageIndex: number) => number)) => void;
+    previousPage: () => void;
+    nextPage: () => void;
+    setPageSize: (pageSize: number) => void;
+    toggleRowSelected: (rowId: import("react-table").IdType<D>, set?: boolean | undefined) => void;
+    toggleAllRowsSelected: (value?: boolean | undefined) => void;
+    getToggleAllRowsSelectedProps: (props?: Partial<import("react-table").TableToggleAllRowsSelectedProps> | undefined) => import("react-table").TableToggleAllRowsSelectedProps;
+    getToggleAllPageRowsSelectedProps: (props?: Partial<import("react-table").TableToggleAllRowsSelectedProps> | undefined) => import("react-table").TableToggleAllRowsSelectedProps;
+    isAllRowsSelected: boolean;
+    selectedFlatRows: Row<D>[];
+    state: EnhancedTableState<D>;
+};
+export declare function renderSingleLineCell(value: string): jsx.JSX.Element;
 export declare type FilterType = 'text' | 'select' | 'multi-select' | 'range';
 export declare function getColumnFilterConfig<D extends object>(filterType: FilterType): {
     filter: string;

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

@@ -73,35 +73,48 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getColumnFilterConfig = exports.useDefaultTableInstance = exports.usePluginConfig = void 0;
+exports.getColumnFilterConfig = exports.renderSingleLineCell = exports.useDefaultTableInstance = exports.usePluginConfig = exports.CELL_PADDING = void 0;
 /** @jsxRuntime classic */
 /** @jsx jsx */
 var react_1 = require("@emotion/react");
 var immer_1 = __importDefault(require("immer"));
 var material_1 = require("@mui/material");
-var classnames_1 = __importDefault(require("classnames"));
 var icons_material_1 = require("@mui/icons-material");
 var react_table_1 = require("react-table");
-var IndeterminateCheckbox_1 = __importStar(require("./IndeterminateCheckbox"));
-var SortIndicator_1 = __importDefault(require("./SortIndicator"));
-var Toolbar_1 = __importDefault(require("./Toolbar"));
+var IndeterminateCheckbox_1 = __importStar(require("./TablePieces/IndeterminateCheckbox"));
+var Toolbar_1 = __importDefault(require("./TablePieces/Toolbar"));
 var react_2 = require("react");
-var AppliedFilters_1 = __importDefault(require("./AppliedFilters"));
+var AppliedFilters_1 = __importDefault(require("./TablePieces/AppliedFilters"));
 var lodash_1 = require("lodash");
 var SingleSelectFilter_1 = __importDefault(require("./FilterTool/Filters/SingleSelectFilter"));
 var MultiSelectFilter_1 = __importDefault(require("./FilterTool/Filters/MultiSelectFilter"));
 var RangeFilter_1 = __importDefault(require("./FilterTool/Filters/RangeFilter"));
 var TextFilter_1 = __importDefault(require("./FilterTool/Filters/TextFilter"));
-var CELL_PADDING = 4;
+var hooks_1 = require("@vendorflow/common/lib/hooks");
+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.CELL_PADDING = 4;
 var EXPAND_BTN_WIDTH = 24;
 var NO_MATCH_TEXT = 'Sorry, no matching records found';
 function DataTable(_a) {
     var _b;
     var title = _a.title, labels = _a.labels, columns = _a.columns, instance = _a.instance, options = _a.options, renderActions = _a.renderActions, renderRowSelectActions = _a.renderRowSelectActions, restOfProps = __rest(_a, ["title", "labels", "columns", "instance", "options", "renderActions", "renderRowSelectActions"]);
-    var _c = labels || { noMatchLabel: NO_MATCH_TEXT }, _d = _c.noMatchLabel, noMatchLabel = _d === void 0 ? NO_MATCH_TEXT : _d, noMatchColSpan = _c.noMatchColSpan;
-    var _e = options || {}, rowExpandingConfig = _e.rowExpanding, filtersConfig = _e.filters, globalSearchConfig = _e.globalSearch, columnHidingConfig = _e.columnHiding, paginationConfig = _e.pagination, rowSelectConfig = _e.rowSelect, sortingConfig = _e.sorting;
+    var tableHeadRef = (0, react_2.useRef)(null);
+    var tableBodyRef = (0, react_2.useRef)(null);
+    var scrollContainerRef = (0, react_2.useRef)(null);
+    var _c = (0, hooks_1.useMeasure)(), tableBodyMeasureRefCallback = _c.ref, tableBodyContentRect = _c.contentRect;
+    var _d = (0, hooks_1.useMeasure)(), rootRef = _d.ref, rootContentRect = _d.contentRect;
+    var _e = (0, hooks_1.useMeasure)(), toolbarRef = _e.ref, toolbarContentRect = _e.contentRect;
+    var _f = (0, hooks_1.useMeasure)(), paginationRef = _f.ref, paginationContentRect = _f.contentRect;
+    var _g = (0, hooks_1.useHasScrollbar)(), hasScrollbarRefCallback = _g.ref, hasScrollbar = _g.hasScrollbar;
+    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 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, visibleColumns = instance.visibleColumns;
+    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 = {};
@@ -130,65 +143,53 @@ function DataTable(_a) {
         addNamesToMap(columns, result);
         return result;
     }, [columns]);
-    var _f = state, filters = _f.filters, globalFilter = _f.globalFilter, pageIndex = _f.pageIndex, pageSize = _f.pageSize, selectedRowIds = _f.selectedRowIds;
-    var _g = (0, react_2.useMemo)(function () {
+    var _l = state, filters = _l.filters, globalFilter = _l.globalFilter, pageIndex = _l.pageIndex, pageSize = _l.pageSize, selectedRowIds = _l.selectedRowIds;
+    var _m = (0, react_2.useMemo)(function () {
         var hasRowsSelected = lodash_1.values != null ? (0, lodash_1.values)(selectedRowIds).some(Boolean) : false;
         var numRowsSelected = lodash_1.values != null ? (0, lodash_1.values)(selectedRowIds).filter(Boolean).length : 0;
         return { hasRowsSelected: hasRowsSelected, numRowsSelected: numRowsSelected };
-    }, [selectedRowIds]), hasRowsSelected = _g.hasRowsSelected, numRowsSelected = _g.numRowsSelected;
+    }, [selectedRowIds]), hasRowsSelected = _m.hasRowsSelected, numRowsSelected = _m.numRowsSelected;
     var tableRows = (paginationConfig === null || paginationConfig === void 0 ? void 0 : paginationConfig.enabled) ? page : rows;
-    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.Paper, __assign({ css: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            width: 100%;\n            position: relative;\n          "], ["\n            width: 100%;\n            position: relative;\n          "]))), className: "vendorflow-table" }, restOfProps),
-            (0, react_1.jsx)("div", null,
-                (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 }))),
-            (0, react_1.jsx)(material_1.TableContainer, null,
-                (0, react_1.jsx)(material_1.Table, __assign({}, getTableProps(), { size: "small", "aria-label": "table" }),
-                    (0, react_1.jsx)(material_1.TableHead, null, headerGroups.map(function (headerGroup) {
-                        return (
-                        // @ts-ignore
-                        // eslint-disable-next-line react/jsx-key
-                        (0, react_1.jsx)(material_1.TableRow, __assign({}, headerGroup.getHeaderGroupProps()), headerGroup.headers.map(function (column) {
-                            var col = column;
-                            var _a = col.getHeaderProps((sortingConfig === null || sortingConfig === void 0 ? void 0 : sortingConfig.enabled) ? col.getSortByToggleProps() : undefined), key = _a.key, restOfProps = __rest(_a, ["key"]);
-                            return (
-                            // @ts-ignore
-                            (0, react_1.jsx)(material_1.TableCell, __assign({ key: key }, restOfProps, { css: cx(col.id === 'custom' && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n                                  position: -webkit-sticky;\n                                  position: sticky;\n                                  background-color: white;\n                                  left: 0;\n                                  width: ", ";\n                                "], ["\n                                  position: -webkit-sticky;\n                                  position: sticky;\n                                  background-color: white;\n                                  left: 0;\n                                  width: ", ";\n                                "])), (rowExpandingConfig === null || rowExpandingConfig === void 0 ? void 0 : rowExpandingConfig.enabled) && (rowSelectConfig === null || rowSelectConfig === void 0 ? void 0 : rowSelectConfig.enabled)
-                                    ? CELL_PADDING * 2 + EXPAND_BTN_WIDTH + IndeterminateCheckbox_1.CHECKBOX_WIDTH + 'px'
-                                    : Math.max(EXPAND_BTN_WIDTH, IndeterminateCheckbox_1.CHECKBOX_WIDTH) + CELL_PADDING * 2 + 'px'), css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n                                && {\n                                  padding: ", "px;\n                                }\n                              "], ["\n                                && {\n                                  padding: ", "px;\n                                }\n                              "])), CELL_PADDING)), className: "col-" + col.id }),
-                                (0, react_1.jsx)("div", { css: css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n                                display: flex;\n                                flex-direction: row;\n                                justify-content: ", ";\n                                align-items: center;\n                              "], ["\n                                display: flex;\n                                flex-direction: row;\n                                justify-content: ", ";\n                                align-items: center;\n                              "])), col.columns != null ? 'center' : 'flex-start') },
-                                    (0, react_1.jsx)("span", { css: cx(css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n                                    font-weight: 600;\n                                  "], ["\n                                    font-weight: 600;\n                                  "]))), col.minWidth !== undefined && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n                                      min-width: ", "px;\n                                    "], ["\n                                      min-width: ", "px;\n                                    "])), col.minWidth), col.maxWidth !== undefined && css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n                                      max-width: ", "px;\n                                    "], ["\n                                      max-width: ", "px;\n                                    "])), col.maxWidth)) }, col.render('Header')),
-                                    (0, react_1.jsx)(SortIndicator_1.default, { canSort: col.canSort, isSorted: col.isSorted, isSortedDesc: col.isSortedDesc }))));
-                        })));
-                    })),
-                    (0, react_1.jsx)(material_1.TableBody, null, tableRows.length > 0 ? (tableRows.map(function (row) {
-                        prepareRow(row);
-                        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                        var _a = row.getRowProps(), style = _a.style, key = _a.key, restOfRowProps = __rest(_a, ["style", "key"]);
-                        var isExpanded = row.isExpanded;
-                        return ((0, react_1.jsx)(react_2.Fragment, { key: key },
-                            (0, react_1.jsx)(material_1.TableRow, __assign({}, restOfRowProps), row.cells.map(function (cell) {
-                                // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                                var _a = cell.getCellProps(), style = _a.style, key = _a.key, className = _a.className, restOfCellProps = __rest(_a, ["style", "key", "className"]);
-                                return ((0, react_1.jsx)(material_1.TableCell, __assign({ css: cx(cell.column.id === 'custom' && css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n                                      position: -webkit-sticky;\n                                      position: sticky;\n                                      background-color: white;\n                                      left: 0;\n                                    "], ["\n                                      position: -webkit-sticky;\n                                      position: sticky;\n                                      background-color: white;\n                                      left: 0;\n                                    "]))), css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n                                    && {\n                                      padding: ", "px;\n                                    }\n                                  "], ["\n                                    && {\n                                      padding: ", "px;\n                                    }\n                                  "])), CELL_PADDING)), className: (0, classnames_1.default)(className, cell.column.id === 'custom' ? 'cell-Custom' : undefined), key: key }, restOfCellProps), cell.render('Cell')));
-                            })),
-                            isExpanded && ((0, react_1.jsx)(material_1.TableRow, null,
-                                (0, react_1.jsx)(material_1.TableCell, { colSpan: (rowExpandingConfig === null || rowExpandingConfig === void 0 ? void 0 : rowExpandingConfig.colSpan) || visibleColumns.length },
-                                    (0, react_1.jsx)(ExpandedComponent, { data: row.original }))))));
-                    })) : ((0, react_1.jsx)(material_1.TableRow, null,
-                        (0, react_1.jsx)(material_1.TableCell, { colSpan: noMatchColSpan || visibleColumns.length },
-                            (0, react_1.jsx)("div", { css: css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n                          text-align: center;\n                        "], ["\n                          text-align: center;\n                        "]))) },
-                                (0, react_1.jsx)("span", null, noMatchLabel))),
-                        noMatchColSpan != null && noMatchColSpan > 0 && visibleColumns.length - noMatchColSpan > 0 && ((0, react_1.jsx)(material_1.TableCell, { colSpan: visibleColumns.length - noMatchColSpan }))))))),
-            (paginationConfig === null || paginationConfig === void 0 ? void 0 : paginationConfig.enabled) && ((0, react_1.jsx)(material_1.TablePagination, { 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 }))));
-    }));
+    var containerHeight = (rootContentRect.height || 0) - (toolbarContentRect.height || 0) - (paginationContentRect.height || 0);
+    var defaultRowHeight = (virtualizeConfig === null || virtualizeConfig === void 0 ? void 0 : virtualizeConfig.defaultRowHeight) || 50;
+    (0, react_2.useEffect)(function () {
+        if (tableHeadRef.current) {
+            tableHeadRef.current.scrollTo({ left: scrollLeft, behavior: 'auto' });
+        }
+        if (scrollContainerRef.current) {
+            scrollContainerRef.current.scrollTo({ left: scrollLeft, behavior: 'auto' });
+        }
+    }, [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" },
+            (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 }))),
+        (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) {
+                        var scrollLeft = evt.target.scrollLeft;
+                        setScrollLeft(scrollLeft);
+                    } }, headerGroups.map(function (headerGroup) {
+                    return (
+                    // @ts-ignore
+                    // 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 });
+                    })));
+                })),
+                (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 }))),
+        (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;
+    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)
+        ? 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 result = [];
+        result.push(react_table_1.useBlockLayout);
         if (filters === null || filters === void 0 ? void 0 : filters.enabled) {
             result.push(react_table_1.useFilters);
         }
@@ -207,16 +208,22 @@ function usePluginConfig(options) {
         if (rowSelect === null || rowSelect === void 0 ? void 0 : rowSelect.enabled) {
             result.push(react_table_1.useRowSelect);
         }
+        if (columnResizing === null || columnResizing === void 0 ? void 0 : columnResizing.enabled) {
+            result.push(react_table_1.useResizeColumns);
+        }
         // column customizations
         if ((rowSelect === null || rowSelect === void 0 ? void 0 : rowSelect.enabled) || (rowExpanding === null || rowExpanding === void 0 ? void 0 : rowExpanding.enabled)) {
             result.push(function (hooks) {
                 hooks.visibleColumns.push(function (columns) { return __spreadArray([
                     {
                         id: 'custom',
+                        width: customCellWidth,
+                        minWidth: customCellWidth,
+                        maxWidth: customCellWidth,
                         Header: function (props) {
                             var _a = props, getToggleAllRowsSelectedProps = _a.getToggleAllRowsSelectedProps, getToggleAllPageRowsSelectedProps = _a.getToggleAllPageRowsSelectedProps;
                             return ((0, react_1.jsx)(react_2.Fragment, null,
-                                (rowExpanding === null || rowExpanding === void 0 ? void 0 : rowExpanding.enabled) && ((0, react_1.jsx)("span", { css: (0, react_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n                        padding: ", "px;\n                      "], ["\n                        padding: ", "px;\n                      "])), EXPAND_BTN_WIDTH / 2) })),
+                                (rowExpanding === null || rowExpanding === void 0 ? void 0 : rowExpanding.enabled) && ((0, react_1.jsx)("span", { css: (0, react_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n                        padding: ", "px;\n                      "], ["\n                        padding: ", "px;\n                      "])), EXPAND_BTN_WIDTH / 2) })),
                                 (rowSelect === null || rowSelect === void 0 ? void 0 : rowSelect.enabled) && (rowSelect === null || rowSelect === void 0 ? void 0 : rowSelect.mode) === 'multi' ? (
                                 // @ts-ignore
                                 (0, react_1.jsx)(IndeterminateCheckbox_1.default, __assign({}, ((pagination === null || pagination === void 0 ? void 0 : pagination.enabled) ? getToggleAllPageRowsSelectedProps() : getToggleAllRowsSelectedProps()), { 
@@ -228,8 +235,8 @@ function usePluginConfig(options) {
                             return ((0, react_1.jsx)(react_2.Fragment, null,
                                 (rowExpanding === null || rowExpanding === void 0 ? void 0 : rowExpanding.enabled) && (
                                 // @ts-ignore
-                                (0, react_1.jsx)(material_1.IconButton, __assign({}, getToggleRowExpandedProps(), { css: (0, react_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n                        &.MuiIconButton-root {\n                          padding: 0;\n                        }\n                      "], ["\n                        &.MuiIconButton-root {\n                          padding: 0;\n                        }\n                      "]))), size: "small" }),
-                                    (0, react_1.jsx)(icons_material_1.KeyboardArrowRight, { css: (0, react_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n                          transform: rotate3d(0, 0, 1, ", ");\n                          transition: transform 0.25s;\n                        "], ["\n                          transform: rotate3d(0, 0, 1, ", ");\n                          transition: transform 0.25s;\n                        "])), isExpanded ? '90deg' : '0deg') }))),
+                                (0, react_1.jsx)(material_1.IconButton, __assign({}, getToggleRowExpandedProps(), { css: (0, react_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n                        &.MuiIconButton-root {\n                          padding: 0;\n                        }\n                      "], ["\n                        &.MuiIconButton-root {\n                          padding: 0;\n                        }\n                      "]))), size: "small" }),
+                                    (0, react_1.jsx)(icons_material_1.KeyboardArrowRight, { css: (0, react_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n                          transform: rotate3d(0, 0, 1, ", ");\n                          transition: transform 0.25s;\n                        "], ["\n                          transform: rotate3d(0, 0, 1, ", ");\n                          transition: transform 0.25s;\n                        "])), isExpanded ? '90deg' : '0deg') }))),
                                 (rowSelect === null || rowSelect === void 0 ? void 0 : rowSelect.enabled) && ((0, react_1.jsx)(IndeterminateCheckbox_1.default, __assign({ name: index.toString() }, getToggleRowSelectedProps(), { 
                                     // @ts-ignore
                                     size: "small" })))));
@@ -239,11 +246,11 @@ function usePluginConfig(options) {
             });
         }
         return result;
-    }, [rowExpanding, rowSelect, columnHiding, sorting, filters, globalSearch, pagination]);
+    }, [rowExpanding, rowSelect, columnHiding, sorting, filters, globalSearch, pagination, virtualize]);
 }
 exports.usePluginConfig = usePluginConfig;
 function useDefaultTableInstance(_a) {
-    var columns = _a.columns, data = _a.data, _b = _a.options, options = _b === void 0 ? {} : _b, _c = _a.initialState, initialState = _c === void 0 ? {} : _c;
+    var columns = _a.columns, data = _a.data, _b = _a.options, options = _b === void 0 ? {} : _b, _c = _a.initialState, initialState = _c === void 0 ? {} : _c, defaultColumn = _a.defaultColumn;
     var filterTypes = (0, react_2.useMemo)(function () { return ({
         equalsOneOf: function (rows, ids, filterValue) {
             return rows.filter(function (row) {
@@ -281,6 +288,14 @@ function useDefaultTableInstance(_a) {
                 });
             }
         }
+        if (action.type === 'manuallySetColumnWidth') {
+            var _c = action, columnId_1 = _c.columnId, width_1 = _c.width;
+            newState = (0, immer_1.default)(newState, function (draft) {
+                // @ts-ignore
+                ;
+                draft.columnResizing.columnWidths[columnId_1] = width_1;
+            });
+        }
         return newState;
     }
     var plugins = usePluginConfig(options);
@@ -300,18 +315,28 @@ function useDefaultTableInstance(_a) {
     }
     var getRowId = ((options === null || options === void 0 ? void 0 : options.table) || {}).getRowId;
     var _e = ((options === null || options === void 0 ? void 0 : options.rowExpanding) || {}).autoResetExpanded, autoResetExpanded = _e === void 0 ? true : _e;
-    return react_table_1.useTable.apply(void 0, __spreadArray([{
+    var instance = react_table_1.useTable.apply(void 0, __spreadArray([{
             autoResetExpanded: autoResetExpanded,
             autoResetGlobalFilter: false,
             getRowId: getRowId,
             columns: columns,
             data: data,
+            defaultColumn: defaultColumn,
             filterTypes: filterTypes,
             stateReducer: stateReducer,
             initialState: state,
         }], __read(plugins), false));
+    function setColumnWidth(columnId, width) {
+        instance.dispatch({ type: 'manuallySetColumnWidth', columnId: columnId, width: width });
+    }
+    return __assign(__assign({}, instance), { setColumnWidth: setColumnWidth });
 }
 exports.useDefaultTableInstance = useDefaultTableInstance;
+function renderSingleLineCell(value) {
+    return ((0, react_1.jsx)(material_1.Tooltip, { title: value },
+        (0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n          text-overflow: ellipsis;\n          overflow: hidden;\n        "], ["\n          text-overflow: ellipsis;\n          overflow: hidden;\n        "]))) }, value)));
+}
+exports.renderSingleLineCell = renderSingleLineCell;
 function getColumnFilterConfig(filterType) {
     switch (filterType) {
         case 'select':
@@ -326,4 +351,4 @@ function getColumnFilterConfig(filterType) {
     }
 }
 exports.getColumnFilterConfig = getColumnFilterConfig;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

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

@@ -42,11 +42,17 @@ function DataTable() {
         columnHiding: {
             enabled: true,
         },
+        columnResizing: {
+            enabled: true,
+        },
         pagination: {
             enabled: true,
             rowsPerPageOptions: [5, 10, 20],
             pageSize: 10,
         },
+        virtualize: {
+            enabled: false,
+        },
         rowSelect: {
             enabled: true,
             mode: 'multi',
@@ -58,8 +64,14 @@ function DataTable() {
             getRowId: function (person) { return person.id; },
         },
     };
-    var instance = (0, DataTable_1.useDefaultTableInstance)({ columns: columns, data: data, options: options });
+    var instance = (0, DataTable_1.useDefaultTableInstance)({
+        columns: columns,
+        data: data,
+        options: options,
+        defaultColumn: { minWidth: 50, width: 150, maxWidth: 200 },
+    });
     return (react_1.default.createElement(material_1.ThemeProvider, { theme: (0, material_1.createTheme)() },
-        react_1.default.createElement(DataTable_1.default, { title: "People", columns: columns, instance: instance, options: options, renderActions: function () { return react_1.default.createElement(material_1.Button, { onClick: function () { return alert('Thanks!'); } }, "Click Me"); }, renderRowSelectActions: function () { return react_1.default.createElement(material_1.Button, { onClick: function () { return alert('Thanks!'); } }, "Click Me"); } })));
+        react_1.default.createElement("div", { style: { height: '700px', width: '640px' } },
+            react_1.default.createElement(DataTable_1.default, { title: "People", columns: columns, instance: instance, options: options, renderActions: function () { return react_1.default.createElement(material_1.Button, { onClick: function () { return alert('Thanks!'); } }, "Click Me"); }, renderRowSelectActions: function () { return react_1.default.createElement(material_1.Button, { onClick: function () { return alert('Thanks!'); } }, "Click Me"); } }))));
 }
 exports.DataTable = DataTable;

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

@@ -10,8 +10,8 @@ var react_1 = require("@emotion/react");
 var icons_material_1 = require("@mui/icons-material");
 var iconStyle = (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-left: 0.25rem;\n  color: #b2b2b2;\n  line-height: 0;\n\n  && {\n    font-size: 1rem;\n  }\n"], ["\n  margin-left: 0.25rem;\n  color: #b2b2b2;\n  line-height: 0;\n\n  && {\n    font-size: 1rem;\n  }\n"])));
 var smallIconStyle = (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", ";\n  && {\n    font-size: 0.75rem;\n  }\n"], ["\n  ", ";\n  && {\n    font-size: 0.75rem;\n  }\n"])), iconStyle);
-var wrapperStyle = (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  line-height: 0;\n"], ["\n  line-height: 0;\n"])));
-var stackedWrapperStyle = (0, react_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", ";\n  display: inline-flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n"], ["\n  ", ";\n  display: inline-flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n"])), wrapperStyle);
+var wrapperStyle = (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  line-height: 0;\n  flex: none;\n"], ["\n  line-height: 0;\n  flex: none;\n"])));
+var stackedWrapperStyle = (0, react_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", ";\n  flex: none;\n  display: inline-flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n"], ["\n  ", ";\n  flex: none;\n  display: inline-flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n"])), wrapperStyle);
 function SortIndicator(_a) {
     var canSort = _a.canSort, isSorted = _a.isSorted, isSortedDesc = _a.isSortedDesc;
     if (!canSort) {

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

@@ -0,0 +1,12 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { Filters, UseFiltersInstanceProps } from 'react-table';
+import { SimpleMap } from '../../../../types/Internal.types';
+interface Props<D extends object> {
+    columnNameById: SimpleMap<string>;
+    filters: Filters<D>;
+    setFilter: UseFiltersInstanceProps<D>['setFilter'];
+}
+export default function AppliedFilters<D extends object>({ columnNameById, filters, setFilter }: Props<D>): jsx.JSX.Element | null;
+export {};

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

@@ -0,0 +1,26 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/** @jsxRuntime classic */
+/** @jsx jsx */
+var react_1 = require("@emotion/react");
+var material_1 = require("@mui/material");
+var SingleSelectFilter_1 = require("../FilterTool/Filters/SingleSelectFilter");
+var PADDING = 24;
+function AppliedFilters(_a) {
+    var columnNameById = _a.columnNameById, filters = _a.filters, setFilter = _a.setFilter;
+    if (!filters.length) {
+        return null;
+    }
+    return ((0, react_1.jsx)(material_1.Stack, { direction: "row", overflow: "none", css: (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        width: calc(100% - ", "px);\n        padding: 8px ", "px;\n        flex-wrap: wrap;\n        gap: 0.25rem 0.25rem;\n      "], ["\n        width: calc(100% - ", "px);\n        padding: 8px ", "px;\n        flex-wrap: wrap;\n        gap: 0.25rem 0.25rem;\n      "])), PADDING * 2, PADDING) }, filters
+        .filter(function (filter) {
+        return (Array.isArray(filter.value) && !!filter.value.length) ||
+            (!Array.isArray(filter.value) && filter.value != null);
+    })
+        .map(function (filter) { return ((0, react_1.jsx)(material_1.Chip, { key: filter.id, label: columnNameById[filter.id] + ": " + (filter.value === '' ? SingleSelectFilter_1.BLANK_VALUE_LABEL : filter.value), onDelete: function () { return setFilter(filter.id, null); } })); })));
+}
+exports.default = AppliedFilters;
+var templateObject_1;

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

@@ -0,0 +1,10 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { Cell, TableCellProps } from 'react-table';
+interface Props<D extends object> {
+    cell: Cell<D>;
+    cellProps: Omit<TableCellProps, 'key'>;
+}
+export default function BodyCell<D extends object>({ cell, cellProps }: Props<D>): jsx.JSX.Element;
+export {};

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

@@ -0,0 +1,49 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/** @jsxRuntime classic */
+/** @jsx jsx */
+var react_1 = require("@emotion/react");
+var material_1 = require("@mui/material");
+var classnames_1 = __importDefault(require("classnames"));
+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"]);
+    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')));
+    }));
+}
+exports.default = BodyCell;
+var templateObject_1;

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

@@ -0,0 +1,15 @@
+import { CSSProperties } from 'react';
+import { EnhancedRow } from '../DataTable';
+import { TableRowProps } from 'react-table';
+interface Props<D extends object> {
+    ExpandedComponent: ((props: {
+        data: D;
+    }) => JSX.Element) | undefined;
+    row: EnhancedRow<D>;
+    rowProps: Omit<TableRowProps, 'key'>;
+    innerRef?: ((element?: Element | undefined) => void) | undefined;
+    style?: CSSProperties;
+    measure?: () => void;
+}
+declare const BodyRow: import("react").NamedExoticComponent<Props<any>>;
+export default BodyRow;