material-react-table 0.41.0 → 1.0.0-beta.2

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/body/MRT_EditRowModal.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { MRT_Row, MRT_TableInstance } from '..';
 interface Props<TData extends Record<string, any> = {}> {
     open: boolean;

package/dist/cjs/body/MRT_TableBody.d.ts

@@ -1,8 +1,7 @@
-import { FC, RefObject } from 'react';
+import { FC } from 'react';
 import type { MRT_TableInstance } from '..';
 interface Props {
     table: MRT_TableInstance;
-    tableContainerRef: RefObject<HTMLDivElement>;
 }
 export declare const MRT_TableBody: FC<Props>;
 export {};

package/dist/cjs/buttons/MRT_ColumnPinningButtons.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { MRT_Column, MRT_TableInstance } from '..';
 interface Props<TData extends Record<string, any> = {}> {
     column: MRT_Column<TData>;

package/dist/cjs/buttons/MRT_EditActionButtons.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { MRT_Row, MRT_TableInstance } from '..';
 interface Props<TData extends Record<string, any> = {}> {
     row: MRT_Row<TData>;

package/dist/cjs/buttons/MRT_FullScreenToggleButton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IconButtonProps } from '@mui/material';
 import { MRT_TableInstance } from '..';
 interface Props<TData extends Record<string, any> = {}> extends IconButtonProps {

package/dist/cjs/buttons/MRT_ShowHideColumnsButton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IconButtonProps } from '@mui/material';
 import { MRT_TableInstance } from '..';
 interface Props<TData extends Record<string, any> = {}> extends IconButtonProps {

package/dist/cjs/buttons/MRT_ToggleDensePaddingButton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IconButtonProps } from '@mui/material';
 import { MRT_TableInstance } from '..';
 interface Props<TData extends Record<string, any> = {}> extends IconButtonProps {

package/dist/cjs/buttons/MRT_ToggleFiltersButton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IconButtonProps } from '@mui/material';
 import { MRT_TableInstance } from '..';
 interface Props<TData extends Record<string, any> = {}> extends IconButtonProps {

package/dist/cjs/buttons/MRT_ToggleGlobalFilterButton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IconButtonProps } from '@mui/material';
 import { MRT_TableInstance } from '..';
 interface Props<TData extends Record<string, any> = {}> extends IconButtonProps {

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,7 +1079,7 @@ 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'
@@ -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)),
@@ -1448,7 +1454,7 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
         setAnchorEl(event.currentTarget);
     };
     React.useEffect(() => {
-        setFilterValue('');
+        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 }));
@@ -1507,7 +1513,11 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
                 if (textFieldProps.inputRef) {
                     textFieldProps.inputRef = inputRef;
                 }
-            }, sx: (theme) => (Object.assign({ p: 0, minWidth: !filterChipLabel ? '120px' : 'auto', width: '100%', '&	.MuiSelect-icon': {
+            }, sx: (theme) => (Object.assign({ p: 0, minWidth: columnDef.filterVariant === 'range'
+                    ? '90px'
+                    : !filterChipLabel
+                        ? '120px'
+                        : 'auto', width: '100%', '&	.MuiSelect-icon': {
                     mr: '1.5rem',
                 } }, ((textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.sx) instanceof Function
                 ? textFieldProps.sx(theme)
@@ -1698,7 +1708,7 @@ const MRT_TableHeadCell = ({ header, table }) => {
         return column.getIsPinned() === 'right' && column.getPinnedIndex() === 0;
     };
     const getTotalRight = () => {
-        return ((table.getRightLeafHeaders().length - 1 - column.getPinnedIndex()) * 150);
+        return ((table.getRightLeafHeaders().length - 1 - column.getPinnedIndex()) * 180);
     };
     const handleDragEnter = (_e) => {
         if (enableGrouping && (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === 'drop-zone') {
@@ -2163,8 +2173,8 @@ const MRT_TableBodyRow = ({ row, rowIndex, table, virtualRow, }) => {
         renderDetailPanel && !row.getIsGrouped() && (React__default["default"].createElement(MRT_TableDetailPanel, { row: row, table: table }))));
 };
 
-const MRT_TableBody = ({ table, tableContainerRef }) => {
-    const { getRowModel, getPrePaginationRowModel, getState, options: { enableGlobalFilterRankedResults, enablePagination, enableRowVirtualization, manualFiltering, manualSorting, muiTableBodyProps, virtualizerInstanceRef, virtualizerProps, }, } = table;
+const MRT_TableBody = ({ table }) => {
+    const { getRowModel, getPrePaginationRowModel, getState, options: { enableGlobalFilterRankedResults, enablePagination, enableRowVirtualization, manualFiltering, manualSorting, muiTableBodyProps, virtualizerInstanceRef, virtualizerProps, }, refs: { tableContainerRef }, } = table;
     const { globalFilter, pagination, sorting } = getState();
     const tableBodyProps = muiTableBodyProps instanceof Function
         ? muiTableBodyProps({ table })
@@ -2305,7 +2315,7 @@ const MRT_TableFooter = ({ table }) => {
             : tableFooterProps === null || tableFooterProps === void 0 ? void 0 : tableFooterProps.sx))) }), getFooterGroups().map((footerGroup) => (React__default["default"].createElement(MRT_TableFooterRow, { footerGroup: footerGroup, key: footerGroup.id, table: table })))));
 };
 
-const MRT_Table = ({ tableContainerRef, table }) => {
+const MRT_Table = ({ table }) => {
     const { getState, options: { enableColumnResizing, enableRowVirtualization, enableStickyHeader, enableTableFooter, enableTableHead, muiTableProps, }, } = table;
     const { isFullScreen } = getState();
     const tableProps = muiTableProps instanceof Function
@@ -2315,7 +2325,7 @@ const MRT_Table = ({ tableContainerRef, table }) => {
             ? tableProps.sx(theme)
             : tableProps === null || tableProps === void 0 ? void 0 : tableProps.sx))) }),
         enableTableHead && React__default["default"].createElement(MRT_TableHead, { table: table }),
-        React__default["default"].createElement(MRT_TableBody, { tableContainerRef: tableContainerRef, table: table }),
+        React__default["default"].createElement(MRT_TableBody, { table: table }),
         enableTableFooter && React__default["default"].createElement(MRT_TableFooter, { table: table })));
 };
 
@@ -2350,7 +2360,7 @@ const MRT_TableContainer = ({ table }) => {
             : tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.sx))), style: Object.assign({ maxHeight: isFullScreen
                 ? `calc(100vh - ${totalToolbarHeight}px)`
                 : undefined }, tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.style) }),
-        React__default["default"].createElement(MRT_Table, { tableContainerRef: tableContainerRef, table: table })));
+        React__default["default"].createElement(MRT_Table, { table: table })));
 };
 
 const MRT_TablePaper = ({ table }) => {
@@ -2528,9 +2538,9 @@ const MRT_TableRoot = (props) => {
         props.tableInstanceRef.current = table;
     }
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(material.Dialog, { PaperComponent: material.Box, TransitionComponent: material.Grow, disablePortal: true, fullScreen: true, keepMounted: false, onClose: () => setIsFullScreen(false), open: isFullScreen, transitionDuration: 400 },
+        React__default["default"].createElement(material.Dialog, { PaperComponent: material.Box, TransitionComponent: material.Grow, disablePortal: true, fullScreen: true, keepMounted: false, onClose: () => table.setIsFullScreen(false), open: table.getState().isFullScreen, transitionDuration: 400 },
             React__default["default"].createElement(MRT_TablePaper, { table: table })),
-        !isFullScreen && React__default["default"].createElement(MRT_TablePaper, { table: table }),
+        !table.getState().isFullScreen && React__default["default"].createElement(MRT_TablePaper, { table: table }),
         editingRow && props.editingMode === 'modal' && (React__default["default"].createElement(MRT_EditRowModal, { row: editingRow, table: table, open: true }))));
 };