material-react-table 0.9.6 → 0.9.7

package/README.md

@@ -29,6 +29,8 @@ Join the [discord](https://discord.gg/5wqyRx6fnm) server to join in on the devel
 
 ### Features (All Features work and are MVP, but are still being polished)
 
+_All features can be enabled/disabled easily_
+
 - [x] Click To Copy Cell Values
 - [x] Column Actions
 - [x] Column Grouping (Group By and Aggregates)

package/dist/MaterialReactTable.d.ts

@@ -1,6 +1,6 @@
 import { ChangeEvent, Dispatch, FC, FocusEvent, MouseEvent, ReactNode, SetStateAction } from 'react';
 import { AlertProps, ButtonProps, CheckboxProps, IconButtonProps, LinearProgressProps, PaperProps, SkeletonProps, TableBodyProps, TableCellProps, TableContainerProps, TableFooterProps, TableHeadProps, TablePaginationProps, TableProps, TableRowProps, TextFieldProps, ToolbarProps } from '@mui/material';
-import { Cell, Column, ColumnDef, FilterFn, FilterFnOption, Header, HeaderGroup, Overwrite, ReactTableGenerics, Row, TableGenerics, TableInstance, TableState, UseTableInstanceOptions, VisibilityState } from '@tanstack/react-table';
+import { Cell, Column, ColumnDef, FilterFn, FilterFnOption, Header, HeaderGroup, OnChangeFn, Overwrite, ReactTableGenerics, Row, TableGenerics, TableInstance, TableState, UseTableInstanceOptions, VisibilityState } from '@tanstack/react-table';
 import { Options as VirtualizerOptions } from 'react-virtual';
 import { MRT_Localization } from './localization';
 import { MRT_Icons } from './icons';
@@ -284,6 +284,14 @@ export declare type MaterialReactTableProps<D extends Record<string, any> = {}>
     muiTableToolbarTopProps?: ToolbarProps | (({ tableInstance, }: {
         tableInstance: MRT_TableInstance;
     }) => ToolbarProps);
+    onCurrentEditingCellChange?: OnChangeFn<MRT_Cell>;
+    onCurrentEditingRowChange?: OnChangeFn<MRT_Row>;
+    onCurrentFilterFnsChange?: OnChangeFn<{
+        [key: string]: MRT_FilterFn<D>;
+    }>;
+    onCurrentGlobalFilterFnChange?: OnChangeFn<MRT_FilterFn<D>>;
+    onIsDensePaddingChange?: OnChangeFn<boolean>;
+    onIsFullScreenChange?: OnChangeFn<boolean>;
     onMrtCellClick?: ({ cell, event, tableInstance, }: {
         cell: MRT_Cell<D>;
         tableInstance: MRT_TableInstance<D>;
@@ -363,6 +371,8 @@ export declare type MaterialReactTableProps<D extends Record<string, any> = {}>
         showGlobalFilter: boolean;
         tableInstance: MRT_TableInstance<D>;
     }) => void;
+    onShowFiltersChange?: OnChangeFn<boolean>;
+    onShowGlobalFilterChange?: OnChangeFn<boolean>;
     persistentStateMode?: 'localStorage' | 'sessionStorage';
     positionActionsColumn?: 'first' | 'last';
     positionPagination?: 'bottom' | 'top' | 'both';

package/dist/material-react-table.cjs.development.js

@@ -5607,6 +5607,7 @@ var MRT_ToolbarTop = function MRT_ToolbarTop(_ref2) {
     tableInstance: tableInstance
   }), React__default.createElement(material.Box, {
     sx: {
+      alignItems: 'flex-start',
       display: 'flex',
       justifyContent: 'space-between',
       p: '0.5rem',
@@ -7344,18 +7345,23 @@ 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__default.createElement(material.Table, Object.assign({
-    stickyHeader: enableStickyHeader
+    stickyHeader: enableStickyHeader || enableRowVirtualization || isFullScreen
   }, tableProps, {
     sx: _extends({
       tableLayout: enableColumnResizing || enableRowVirtualization ? 'fixed' : 'auto'
@@ -7376,6 +7382,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;
 
@@ -7401,12 +7408,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__default.createElement(MRT_Table, {
     tableContainerRef: tableContainerRef,
     tableInstance: tableInstance
@@ -7427,10 +7434,8 @@ var MRT_TablePaper = function MRT_TablePaper(_ref) {
   React.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';
       }
     }
@@ -7445,15 +7450,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__default.createElement(MRT_ToolbarTop, {
     tableInstance: tableInstance
   }), React__default.createElement(MRT_TableContainer, {
@@ -7464,7 +7468,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 = React.useState(props.tableId),
       tableId = _useState[0],
@@ -7583,7 +7587,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;
@@ -7672,14 +7676,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
   });
 
   React.useEffect(function () {
@@ -7769,7 +7773,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,