material-react-table 0.40.12 → 1.0.0-beta.1

package/README.md

@@ -21,6 +21,8 @@
 
 ## About
 
+> Now in Beta!
+
 __Built with [Material UI <sup>V5</sup>](https://mui.com) and [TanStack Table <sup>V8</sup>](https://tanstack.com/table/v8)__
 
 _Quickly Create React Data Tables with Material Design_

package/dist/cjs/index.js

@@ -1030,7 +1030,7 @@ const MRT_GlobalFilterTextField = ({ table, }) => {
     const textFieldProps = muiSearchTextFieldProps instanceof Function
         ? muiSearchTextFieldProps({ table })
         : muiSearchTextFieldProps;
-    return (React__default["default"].createElement(material.Collapse, { in: showGlobalFilter, orientation: "horizontal" },
+    return (React__default["default"].createElement(material.Collapse, { in: showGlobalFilter, orientation: "horizontal", unmountOnExit: true, mountOnEnter: true },
         React__default["default"].createElement(material.TextField, Object.assign({ placeholder: localization.search, onChange: handleChange, value: searchValue !== null && searchValue !== void 0 ? searchValue : '', variant: "standard", InputProps: {
                 startAdornment: enableGlobalFilterModes ? (React__default["default"].createElement(material.InputAdornment, { position: "start" },
                     React__default["default"].createElement(material.Tooltip, { arrow: true, title: localization.changeSearchMode },
@@ -1079,11 +1079,11 @@ const MRT_TablePagination = ({ table, position }) => {
     return (React__default["default"].createElement(material.TablePagination, Object.assign({ SelectProps: {
             sx: { m: '0 1rem 0 1ch' },
             MenuProps: { MenuListProps: { disablePadding: true } },
-        }, component: "div", count: totalRowCount, onPageChange: (_, newPage) => setPageIndex(newPage), onRowsPerPageChange: handleChangeRowsPerPage, page: pageIndex, rowsPerPage: pageSize, rowsPerPageOptions: [5, 10, 15, 20, 25, 30, 50, 100], showFirstButton: showFirstLastPageButtons, showLastButton: showFirstLastPageButtons }, tablePaginationProps, { sx: (theme) => (Object.assign({ m: '0 0.5rem', mt: position === 'top' &&
+        }, component: "div", count: totalRowCount, onPageChange: (_, newPage) => setPageIndex(newPage), onRowsPerPageChange: handleChangeRowsPerPage, page: pageIndex, rowsPerPage: pageSize, rowsPerPageOptions: [5, 10, 15, 20, 25, 30, 50, 100], showFirstButton: showFirstLastPageButtons, showLastButton: showFirstLastPageButtons }, tablePaginationProps, { sx: (theme) => (Object.assign({ mt: position === 'top' &&
                 enableToolbarInternalActions &&
                 !showGlobalFilter
                 ? '3.5rem'
-                : undefined, position: 'relative', zIndex: 2 }, ((tablePaginationProps === null || tablePaginationProps === void 0 ? void 0 : tablePaginationProps.sx) instanceof Function
+                : '-0.25rem', position: 'relative', zIndex: 2 }, ((tablePaginationProps === null || tablePaginationProps === void 0 ? void 0 : tablePaginationProps.sx) instanceof Function
             ? tablePaginationProps.sx(theme)
             : tablePaginationProps === null || tablePaginationProps === void 0 ? void 0 : tablePaginationProps.sx))) })));
 };
@@ -1191,7 +1191,7 @@ const MRT_ToggleGlobalFilterButton = (_a) => {
 
 const MRT_ToolbarInternalButtons = ({ table }) => {
     var _a;
-    const { options: { enableColumnFilters, enableColumnOrdering, enableDensityToggle, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableHiding, enablePinning, positionGlobalFilter, renderToolbarInternalActions, }, } = table;
+    const { options: { enableColumnFilters, enableColumnOrdering, enableDensityToggle, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableHiding, enablePinning, initialState, renderToolbarInternalActions, }, } = table;
     return (React__default["default"].createElement(material.Box, { sx: {
             alignItems: 'center',
             display: 'flex',
@@ -1199,8 +1199,9 @@ const MRT_ToolbarInternalButtons = ({ table }) => {
         } }, (_a = renderToolbarInternalActions === null || renderToolbarInternalActions === void 0 ? void 0 : renderToolbarInternalActions({
         table,
     })) !== null && _a !== void 0 ? _a : (React__default["default"].createElement(React__default["default"].Fragment, null,
-        enableGlobalFilter && positionGlobalFilter === 'right' && (React__default["default"].createElement(MRT_GlobalFilterTextField, { table: table })),
-        enableFilters && enableGlobalFilter && (React__default["default"].createElement(MRT_ToggleGlobalFilterButton, { table: table })),
+        enableFilters &&
+            enableGlobalFilter &&
+            !(initialState === null || initialState === void 0 ? void 0 : initialState.showGlobalFilter) && (React__default["default"].createElement(MRT_ToggleGlobalFilterButton, { table: table })),
         enableFilters && enableColumnFilters && (React__default["default"].createElement(MRT_ToggleFiltersButton, { table: table })),
         (enableHiding || enableColumnOrdering || enablePinning) && (React__default["default"].createElement(MRT_ShowHideColumnsButton, { table: table })),
         enableDensityToggle && (React__default["default"].createElement(MRT_ToggleDensePaddingButton, { table: table })),
@@ -1274,7 +1275,9 @@ const MRT_TopToolbar = ({ table }) => {
                 width: '100%',
             } },
             enableGlobalFilter && positionGlobalFilter === 'left' && (React__default["default"].createElement(MRT_GlobalFilterTextField, { table: table })), (_a = renderTopToolbarCustomActions === null || renderTopToolbarCustomActions === void 0 ? void 0 : renderTopToolbarCustomActions({ table })) !== null && _a !== void 0 ? _a : React__default["default"].createElement("span", null),
-            enableToolbarInternalActions ? (React__default["default"].createElement(MRT_ToolbarInternalButtons, { table: table })) : (enableGlobalFilter &&
+            enableToolbarInternalActions ? (React__default["default"].createElement(material.Box, { sx: { display: 'flex', flexWrap: 'wrap' } },
+                enableGlobalFilter && positionGlobalFilter === 'right' && (React__default["default"].createElement(MRT_GlobalFilterTextField, { table: table })),
+                React__default["default"].createElement(MRT_ToolbarInternalButtons, { table: table }))) : (enableGlobalFilter &&
                 positionGlobalFilter === 'right' && (React__default["default"].createElement(MRT_GlobalFilterTextField, { table: table })))),
         enablePagination &&
             ['top', 'both'].includes(positionPagination !== null && positionPagination !== void 0 ? positionPagination : '') && (React__default["default"].createElement(MRT_TablePagination, { table: table, position: "top" })),
@@ -1302,8 +1305,11 @@ const MRT_BottomToolbar = ({ table }) => {
         positionToolbarAlertBanner === 'bottom' && (React__default["default"].createElement(MRT_ToolbarAlertBanner, { table: table })),
         ['both', 'bottom'].includes(positionToolbarDropZone !== null && positionToolbarDropZone !== void 0 ? positionToolbarDropZone : '') && (React__default["default"].createElement(MRT_ToolbarDropZone, { table: table })),
         React__default["default"].createElement(material.Box, { sx: {
+                alignItems: 'flex-start',
+                boxSizing: 'border-box',
                 display: 'flex',
                 justifyContent: 'space-between',
+                p: '0.5rem',
                 width: '100%',
             } },
             renderBottomToolbarCustomActions ? (renderBottomToolbarCustomActions({ table })) : (React__default["default"].createElement("span", null)),
@@ -1447,6 +1453,9 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
     const handleFilterMenuOpen = (event) => {
         setAnchorEl(event.currentTarget);
     };
+    React.useEffect(() => {
+        handleClear();
+    }, [columnDef._filterFn]);
     if (columnDef.Filter) {
         return React__default["default"].createElement(React__default["default"].Fragment, null, (_e = columnDef.Filter) === null || _e === void 0 ? void 0 : _e.call(columnDef, { column, header, table }));
     }
@@ -1475,7 +1484,7 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
                         React__default["default"].createElement("span", null,
                             React__default["default"].createElement(material.IconButton, { "aria-label": localization.changeFilterMode, onClick: handleFilterMenuOpen, size: "small", sx: { height: '1.75rem', width: '1.75rem' } },
                                 React__default["default"].createElement(FilterListIcon, null)))),
-                    filterChipLabel && (React__default["default"].createElement(material.Chip, { onDelete: handleClearEmptyFilterChip, label: filterChipLabel })))) : (React__default["default"].createElement(FilterListIcon, { style: { marginRight: '4px' } })),
+                    filterChipLabel && (React__default["default"].createElement(material.Chip, { onDelete: handleClearEmptyFilterChip, label: filterChipLabel })))) : null,
                 endAdornment: !filterChipLabel && (React__default["default"].createElement(material.InputAdornment, { position: "end" },
                     React__default["default"].createElement(material.Tooltip, { arrow: true, placement: "right", title: (_g = localization.clearFilter) !== null && _g !== void 0 ? _g : '' },
                         React__default["default"].createElement("span", null,