material-react-table 0.9.4 → 0.9.7

package/dist/material-react-table.esm.js

@@ -1855,6 +1855,7 @@ var MRT_ToolbarTop = function MRT_ToolbarTop(_ref2) {
     tableInstance: tableInstance
   }), React.createElement(Box, {
     sx: {
+      alignItems: 'flex-start',
       display: 'flex',
       justifyContent: 'space-between',
       p: '0.5rem',
@@ -2356,7 +2357,7 @@ var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton
 };
 
 var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
-  var _ref2, _ref3, _columnDef$minSize, _columnDef$header$len, _columnDef$header;
+  var _ref2, _ref3, _columnDef$header$len, _columnDef$header;
 
   var dragRef = _ref.dragRef,
       dropRef = _ref.dropRef,
@@ -2413,6 +2414,8 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
   }, tableCellProps, {
     ref: columnDefType === 'data' && enableColumnOrdering ? dropRef : undefined,
     sx: function sx(theme) {
+      var _columnDef$minSize;
+
       return _extends({
         backgroundColor: column.getIsPinned() && columnDefType !== 'group' ? alpha(lighten(theme.palette.background["default"], 0.04), 0.95) : 'inherit',
         backgroundImage: 'inherit',
@@ -2429,12 +2432,11 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
         transition: "all " + (enableColumnResizing ? 0 : '0.2s') + " ease-in-out",
         verticalAlign: 'text-top',
         zIndex: column.getIsResizing() ? 3 : column.getIsPinned() && columnDefType !== 'group' ? 2 : 1
-      }, tableCellProps == null ? void 0 : tableCellProps.sx);
-    },
-    style: {
-      maxWidth: "min(" + column.getSize() + "px, fit-content)",
-      minWidth: "max(" + column.getSize() + "px, " + ((_columnDef$minSize = columnDef.minSize) != null ? _columnDef$minSize : 30) + "px)",
-      width: header.getSize()
+      }, tableCellProps == null ? void 0 : tableCellProps.sx, {
+        maxWidth: "min(" + column.getSize() + "px, fit-content)",
+        minWidth: "max(" + column.getSize() + "px, " + ((_columnDef$minSize = columnDef.minSize) != null ? _columnDef$minSize : 30) + "px)",
+        width: header.getSize()
+      });
     }
   }), header.isPlaceholder ? null : columnDefType === 'display' ? headerElement : React.createElement(Box, {
     ref: previewRef,
@@ -2727,7 +2729,7 @@ var MRT_CopyButton = function MRT_CopyButton(_ref) {
 };
 
 var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
-  var _columnDef$minSize, _columnDef$Cell, _row$subRows, _columnDef$Cell2, _row$subRows$length, _row$subRows2;
+  var _columnDef$Cell, _row$subRows, _columnDef$Cell2, _row$subRows$length, _row$subRows2;
 
   var cell = _ref.cell,
       enableHover = _ref.enableHover,
@@ -2738,10 +2740,8 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
       editingMode = _tableInstance$option.editingMode,
       enableClickToCopy = _tableInstance$option.enableClickToCopy,
       enableColumnOrdering = _tableInstance$option.enableColumnOrdering,
-      enableColumnResizing = _tableInstance$option.enableColumnResizing,
       enableEditing = _tableInstance$option.enableEditing,
       enableRowNumbers = _tableInstance$option.enableRowNumbers,
-      enableRowVirtualization = _tableInstance$option.enableRowVirtualization,
       muiTableBodyCellProps = _tableInstance$option.muiTableBodyCellProps,
       muiTableBodyCellSkeletonProps = _tableInstance$option.muiTableBodyCellSkeletonProps,
       onMrtCellClick = _tableInstance$option.onMrtCellClick,
@@ -2822,11 +2822,12 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
         tableInstance: tableInstance
       });
     },
-    onDoubleClick: handleDoubleClick,
-    title: (enableRowVirtualization || enableColumnResizing) && !(columnDef != null && columnDef.Cell) && !cell.getIsGrouped() && !columnDef.enableClickToCopy && typeof cell.getValue() === 'string' ? cell.getValue() : ''
+    onDoubleClick: handleDoubleClick
   }, tableCellProps, {
     ref: columnDefType === 'data' && enableColumnOrdering ? dropRef : undefined,
     sx: function sx(theme) {
+      var _columnDef$minSize;
+
       return _extends({
         backgroundColor: column.getIsPinned() ? alpha(lighten(theme.palette.background["default"], 0.04), 0.95) : undefined,
         boxShadow: getIsLastLeftPinnedColumn() ? "4px 0 4px -2px " + alpha(theme.palette.common.black, 0.1) : getIsFirstRightPinnedColumn() ? "-4px 0 4px -2px " + alpha(theme.palette.common.black, 0.1) : undefined,
@@ -2837,19 +2838,18 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
         pl: column.id === 'mrt-expand' ? row.depth + (isDensePadding ? 0.5 : 0.75) + "rem" : undefined,
         position: column.getIsPinned() ? 'sticky' : 'relative',
         right: column.getIsPinned() === 'right' ? getTotalRight() + "px" : undefined,
-        textOverflow: 'ellipsis',
+        textOverflow: columnDefType !== 'display' ? 'ellipsis' : undefined,
         transition: 'all 0.2s ease-in-out',
         whiteSpace: isDensePadding ? 'nowrap' : 'normal',
         zIndex: column.getIsPinned() ? 1 : undefined,
         '&:hover': {
           backgroundColor: enableHover && enableEditing && editingMode !== 'row' ? theme.palette.mode === 'dark' ? lighten(theme.palette.background["default"], 0.13) + " !important" : darken(theme.palette.background["default"], 0.07) + " !important" : undefined
         }
-      }, tableCellProps == null ? void 0 : tableCellProps.sx);
-    },
-    style: {
-      maxWidth: "min(" + column.getSize() + "px, fit-content)",
-      minWidth: "max(" + column.getSize() + "px, " + ((_columnDef$minSize = columnDef.minSize) != null ? _columnDef$minSize : 30) + "px)",
-      width: column.getSize()
+      }, tableCellProps == null ? void 0 : tableCellProps.sx, {
+        maxWidth: "min(" + column.getSize() + "px, fit-content)",
+        minWidth: "max(" + column.getSize() + "px, " + ((_columnDef$minSize = columnDef.minSize) != null ? _columnDef$minSize : 30) + "px)",
+        width: column.getSize()
+      });
     }
   }), React.createElement(React.Fragment, null, isLoading || showSkeletons ? React.createElement(Skeleton, Object.assign({
     animation: "wave",
@@ -2876,7 +2876,7 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
 var MRT_TableDetailPanel = function MRT_TableDetailPanel(_ref) {
   var row = _ref.row,
       tableInstance = _ref.tableInstance;
-  var getVisibleFlatColumns = tableInstance.getVisibleFlatColumns,
+  var getVisibleLeafColumns = tableInstance.getVisibleLeafColumns,
       _tableInstance$option = tableInstance.options,
       muiTableBodyRowProps = _tableInstance$option.muiTableBodyRowProps,
       muiTableDetailPanelProps = _tableInstance$option.muiTableDetailPanelProps,
@@ -2891,7 +2891,7 @@ var MRT_TableDetailPanel = function MRT_TableDetailPanel(_ref) {
     tableInstance: tableInstance
   }) : muiTableDetailPanelProps;
   return React.createElement(TableRow, Object.assign({}, tableRowProps), React.createElement(TableCell, Object.assign({
-    colSpan: getVisibleFlatColumns().length + 10,
+    colSpan: getVisibleLeafColumns().length,
     onClick: function onClick(event) {
       return onMrtDetailPanelClick == null ? void 0 : onMrtDetailPanelClick({
         event: event,
@@ -2904,7 +2904,8 @@ var MRT_TableDetailPanel = function MRT_TableDetailPanel(_ref) {
       borderBottom: !row.getIsExpanded() ? 'none' : undefined,
       pb: row.getIsExpanded() ? '1rem' : 0,
       pt: row.getIsExpanded() ? '1rem' : 0,
-      transition: 'all 0.2s ease-in-out'
+      transition: 'all 0.2s ease-in-out',
+      width: tableInstance.getTotalSize() + "px"
     }, tableCellProps == null ? void 0 : tableCellProps.sx)
   }), React.createElement(Collapse, {
     "in": row.getIsExpanded()
@@ -2970,7 +2971,8 @@ var MRT_TableBody = function MRT_TableBody(_ref) {
       _tableInstance$option = tableInstance.options,
       enablePagination = _tableInstance$option.enablePagination,
       enableRowVirtualization = _tableInstance$option.enableRowVirtualization,
-      muiTableBodyProps = _tableInstance$option.muiTableBodyProps;
+      muiTableBodyProps = _tableInstance$option.muiTableBodyProps,
+      virtualizerProps = _tableInstance$option.virtualizerProps;
 
   var _getState = getState(),
       isDensePadding = _getState.isDensePadding;
@@ -2979,11 +2981,11 @@ var MRT_TableBody = function MRT_TableBody(_ref) {
     tableInstance: tableInstance
   }) : muiTableBodyProps;
   var rows = enablePagination ? getPaginationRowModel().rows : getPrePaginationRowModel().rows;
-  var rowVirtualizer = enableRowVirtualization ? useVirtual({
+  var rowVirtualizer = enableRowVirtualization ? useVirtual(_extends({
     overscan: isDensePadding ? 15 : 5,
     size: rows.length,
     parentRef: tableContainerRef
-  }) : {};
+  }, virtualizerProps)) : {};
   var virtualRows = rowVirtualizer.virtualItems;
   var paddingTop = (virtualRows == null ? void 0 : virtualRows.length) > 0 ? virtualRows[0].start : 0;
   var paddingBottom = (virtualRows == null ? void 0 : virtualRows.length) > 0 ? rowVirtualizer.totalSize - virtualRows[virtualRows.length - 1].end : 0;
@@ -3099,21 +3101,26 @@ var MRT_TableFooter = function MRT_TableFooter(_ref) {
 var MRT_Table = function MRT_Table(_ref) {
   var tableContainerRef = _ref.tableContainerRef,
       tableInstance = _ref.tableInstance;
-  var _tableInstance$option = tableInstance.options,
+  var getState = tableInstance.getState,
+      _tableInstance$option = tableInstance.options,
       enableColumnResizing = _tableInstance$option.enableColumnResizing,
       enableRowVirtualization = _tableInstance$option.enableRowVirtualization,
       enableStickyHeader = _tableInstance$option.enableStickyHeader,
       enableTableFooter = _tableInstance$option.enableTableFooter,
       enableTableHead = _tableInstance$option.enableTableHead,
       muiTableProps = _tableInstance$option.muiTableProps;
+
+  var _getState = getState(),
+      isFullScreen = _getState.isFullScreen;
+
   var tableProps = muiTableProps instanceof Function ? muiTableProps({
     tableInstance: tableInstance
   }) : muiTableProps;
   return React.createElement(Table, Object.assign({
-    stickyHeader: enableStickyHeader
+    stickyHeader: enableStickyHeader || enableRowVirtualization || isFullScreen
   }, tableProps, {
     sx: _extends({
-      tableLayout: enableColumnResizing || enableRowVirtualization ? 'fixed' : undefined
+      tableLayout: enableColumnResizing || enableRowVirtualization ? 'fixed' : 'auto'
     }, tableProps == null ? void 0 : tableProps.sx)
   }), enableTableHead && React.createElement(MRT_TableHead, {
     tableInstance: tableInstance
@@ -3131,6 +3138,7 @@ var MRT_TableContainer = function MRT_TableContainer(_ref) {
   var getState = tableInstance.getState,
       _tableInstance$option = tableInstance.options,
       enableStickyHeader = _tableInstance$option.enableStickyHeader,
+      enableRowVirtualization = _tableInstance$option.enableRowVirtualization,
       muiTableContainerProps = _tableInstance$option.muiTableContainerProps,
       tableId = _tableInstance$option.tableId;
 
@@ -3156,12 +3164,12 @@ var MRT_TableContainer = function MRT_TableContainer(_ref) {
     ref: tableContainerRef,
     sx: _extends({
       maxWidth: '100%',
-      maxHeight: enableStickyHeader ? "clamp(350px, calc(100vh - " + totalToolbarHeight + "px), 2000px)" : undefined,
+      maxHeight: enableStickyHeader || enableRowVirtualization ? "clamp(350px, calc(100vh - " + totalToolbarHeight + "px), 9999px)" : undefined,
       overflow: 'auto'
     }, tableContainerProps == null ? void 0 : tableContainerProps.sx),
-    style: {
+    style: _extends({
       maxHeight: isFullScreen ? "calc(100vh - " + totalToolbarHeight + "px)" : undefined
-    }
+    }, tableContainerProps == null ? void 0 : tableContainerProps.style)
   }), React.createElement(MRT_Table, {
     tableContainerRef: tableContainerRef,
     tableInstance: tableInstance
@@ -3182,10 +3190,8 @@ var MRT_TablePaper = function MRT_TablePaper(_ref) {
   useEffect(function () {
     if (typeof window !== 'undefined') {
       if (isFullScreen) {
-        document.body.style.overflow = 'hidden';
         document.body.style.height = '100vh';
       } else {
-        document.body.style.overflow = 'auto';
         document.body.style.height = 'auto';
       }
     }
@@ -3200,15 +3206,14 @@ var MRT_TablePaper = function MRT_TablePaper(_ref) {
   }, tablePaperProps, {
     sx: _extends({
       transition: 'all 0.2s ease-in-out'
-    }, tablePaperProps == null ? void 0 : tablePaperProps.sx),
-    style: {
+    }, tablePaperProps == null ? void 0 : tablePaperProps.sx, {
       height: isFullScreen ? '100vh' : undefined,
       margin: isFullScreen ? '0' : undefined,
       maxHeight: isFullScreen ? '100vh' : undefined,
       maxWidth: isFullScreen ? '100vw' : undefined,
       padding: isFullScreen ? '0' : undefined,
       width: isFullScreen ? '100vw' : undefined
-    }
+    })
   }), enableToolbarTop && React.createElement(MRT_ToolbarTop, {
     tableInstance: tableInstance
   }), React.createElement(MRT_TableContainer, {
@@ -3219,7 +3224,7 @@ var MRT_TablePaper = function MRT_TablePaper(_ref) {
 };
 
 var MRT_TableRoot = function MRT_TableRoot(props) {
-  var _initialState$current, _initialState$current2, _initialState$isDense, _initialState$isFullS, _initialState$showFil, _initialState$showGlo, _props$globalFilterFn, _props$state3, _props$state4;
+  var _initialState$current, _initialState$current2, _initialState$isDense, _initialState$isFullS, _initialState$showFil, _initialState$showGlo, _props$globalFilterFn, _props$state3, _props$state4, _props$onCurrentEditi, _props$onCurrentEditi2, _props$onCurrentFilte, _props$onCurrentGloba, _props$onIsDensePaddi, _props$onIsFullScreen, _props$onShowFiltersC, _props$onShowGlobalFi;
 
   var _useState = useState(props.tableId),
       tableId = _useState[0],
@@ -3338,7 +3343,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       id: 'mrt-row-actions',
       muiTableBodyCellProps: props.muiTableBodyCellProps,
       muiTableHeadCellProps: props.muiTableHeadCellProps,
-      size: 60
+      size: 70
     }), showExpandColumn && createDisplayColumn(table, {
       Cell: function Cell(_ref4) {
         var cell = _ref4.cell;
@@ -3427,14 +3432,14 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       showGlobalFilter: showGlobalFilter
     }, props.state)
   })), {
-    setCurrentEditingCell: setCurrentEditingCell,
-    setCurrentEditingRow: setCurrentEditingRow,
-    setCurrentFilterFns: setCurrentFilterFns,
-    setCurrentGlobalFilterFn: setCurrentGlobalFilterFn,
-    setIsDensePadding: setIsDensePadding,
-    setIsFullScreen: setIsFullScreen,
-    setShowFilters: setShowFilters,
-    setShowGlobalFilter: setShowGlobalFilter
+    setCurrentEditingCell: (_props$onCurrentEditi = props.onCurrentEditingCellChange) != null ? _props$onCurrentEditi : setCurrentEditingCell,
+    setCurrentEditingRow: (_props$onCurrentEditi2 = props.onCurrentEditingRowChange) != null ? _props$onCurrentEditi2 : setCurrentEditingRow,
+    setCurrentFilterFns: (_props$onCurrentFilte = props.onCurrentFilterFnsChange) != null ? _props$onCurrentFilte : setCurrentFilterFns,
+    setCurrentGlobalFilterFn: (_props$onCurrentGloba = props.onCurrentGlobalFilterFnChange) != null ? _props$onCurrentGloba : setCurrentGlobalFilterFn,
+    setIsDensePadding: (_props$onIsDensePaddi = props.onIsDensePaddingChange) != null ? _props$onIsDensePaddi : setIsDensePadding,
+    setIsFullScreen: (_props$onIsFullScreen = props.onIsFullScreenChange) != null ? _props$onIsFullScreen : setIsFullScreen,
+    setShowFilters: (_props$onShowFiltersC = props.onShowFiltersChange) != null ? _props$onShowFiltersC : setShowFilters,
+    setShowGlobalFilter: (_props$onShowGlobalFi = props.onShowGlobalFilterChange) != null ? _props$onShowGlobalFi : setShowGlobalFilter
   });
 
   useEffect(function () {
@@ -3485,7 +3490,7 @@ var MaterialReactTable = (function (_ref) {
       columnResizeMode = _ref$columnResizeMode === void 0 ? 'onEnd' : _ref$columnResizeMode,
       _ref$defaultColumn = _ref.defaultColumn,
       defaultColumn = _ref$defaultColumn === void 0 ? {
-    minSize: 30,
+    minSize: 40,
     maxSize: 1000,
     size: 180
   } : _ref$defaultColumn,
@@ -3524,7 +3529,7 @@ var MaterialReactTable = (function (_ref) {
       _ref$enableSorting = _ref.enableSorting,
       enableSorting = _ref$enableSorting === void 0 ? true : _ref$enableSorting,
       _ref$enableStickyHead = _ref.enableStickyHeader,
-      enableStickyHeader = _ref$enableStickyHead === void 0 ? true : _ref$enableStickyHead,
+      enableStickyHeader = _ref$enableStickyHead === void 0 ? false : _ref$enableStickyHead,
       _ref$enableTableFoote = _ref.enableTableFooter,
       enableTableFooter = _ref$enableTableFoote === void 0 ? true : _ref$enableTableFoote,
       _ref$enableTableHead = _ref.enableTableHead,