material-react-table 1.0.0-beta.0 → 1.0.0-beta.3

package/dist/cjs/inputs/MRT_EditCellTextField.d.ts

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

package/dist/cjs/inputs/MRT_GlobalFilterTextField.d.ts

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

package/dist/cjs/menus/MRT_FilterOptionMenu.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { MRT_Header, MRT_InternalFilterOption, MRT_TableInstance } from '..';
 import { MRT_Localization } from '../localization';
 export declare const mrtFilterOptions: (localization: MRT_Localization) => MRT_InternalFilterOption[];

package/dist/cjs/menus/MRT_ShowHideColumnsMenu.d.ts

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

package/dist/cjs/table/MRT_Table.d.ts

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

package/dist/cjs/table/MRT_TableRoot.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import type { MaterialReactTableProps } from '..';
 export declare const MRT_TableRoot: <TData extends Record<string, any> = {}>(props: MaterialReactTableProps<TData>) => JSX.Element;

package/dist/esm/MaterialReactTable.d.ts

@@ -326,7 +326,7 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
     muiExpandAllButtonProps?: IconButtonProps | (({ table }: {
         table: MRT_TableInstance<TData>;
     }) => IconButtonProps);
-    muiExpandButtonProps?: IconButtonProps | (({ table, }: {
+    muiExpandButtonProps?: IconButtonProps | (({ row, table, }: {
         table: MRT_TableInstance<TData>;
         row: MRT_Row<TData>;
     }) => IconButtonProps);
@@ -362,9 +362,11 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
         row: MRT_Row<TData>;
         table: MRT_TableInstance<TData>;
     }) => TableCellProps);
-    muiTableBodyCellSkeletonProps?: SkeletonProps | (({ table, cell, }: {
-        table: MRT_TableInstance<TData>;
+    muiTableBodyCellSkeletonProps?: SkeletonProps | (({ cell, column, row, table, }: {
         cell: MRT_Cell<TData>;
+        column: MRT_Column<TData>;
+        row: MRT_Row<TData>;
+        table: MRT_TableInstance<TData>;
     }) => SkeletonProps);
     muiTableBodyProps?: TableBodyProps | (({ table }: {
         table: MRT_TableInstance<TData>;

package/dist/esm/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/esm/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/esm/body/MRT_TableBodyCellValue.d.ts

@@ -1,8 +1,8 @@
-import { FC } from 'react';
+import React from 'react';
 import { MRT_Cell, MRT_TableInstance } from '..';
 interface Props {
     cell: MRT_Cell;
     table: MRT_TableInstance;
 }
-export declare const MRT_TableBodyCellValue: FC<Props>;
+export declare const MRT_TableBodyCellValue: React.NamedExoticComponent<Props>;
 export {};

package/dist/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/inputs/MRT_EditCellTextField.d.ts

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

package/dist/esm/inputs/MRT_GlobalFilterTextField.d.ts

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

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

@@ -1,4 +1,4 @@
-import React, { useMemo, useRef, useState, useCallback, Fragment, useEffect, useLayoutEffect } from 'react';
+import React, { useMemo, useRef, useState, useCallback, Fragment, useEffect, memo, useLayoutEffect } from 'react';
 import { aggregationFns, filterFns, sortingFns, useReactTable, getCoreRowModel, getExpandedRowModel, getFacetedRowModel, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel } from '@tanstack/react-table';
 import { ArrowRight, Cancel, CheckBox, ClearAll, Close, DensityLarge, DensityMedium, DensitySmall, DragHandle, DynamicFeed, Edit, ExpandLess, ExpandMore, FilterAlt, FilterAltOff, FilterList, FilterListOff, FullscreenExit, Fullscreen, KeyboardDoubleArrowDown, MoreHoriz, MoreVert, PushPin, RestartAlt, Save, Search, SearchOff, Sort, ViewColumn, VisibilityOff } from '@mui/icons-material';
 import { rankItem, rankings, compareItems } from '@tanstack/match-sorter-utils';
@@ -1075,7 +1075,7 @@ const MRT_TablePagination = ({ table, position }) => {
                 enableToolbarInternalActions &&
                 !showGlobalFilter
                 ? '3.5rem'
-                : '-0.25rem', position: 'relative', zIndex: 2 }, ((tablePaginationProps === null || tablePaginationProps === void 0 ? void 0 : tablePaginationProps.sx) instanceof Function
+                : undefined, 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))) })));
 };
@@ -1446,7 +1446,7 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
         setAnchorEl(event.currentTarget);
     };
     useEffect(() => {
-        setFilterValue('');
+        handleClear();
     }, [columnDef._filterFn]);
     if (columnDef.Filter) {
         return React.createElement(React.Fragment, null, (_e = columnDef.Filter) === null || _e === void 0 ? void 0 : _e.call(columnDef, { column, header, table }));
@@ -1505,7 +1505,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)
@@ -1696,7 +1700,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()) * 160);
     };
     const handleDragEnter = (_e) => {
         if (enableGrouping && (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === 'drop-zone') {
@@ -1731,9 +1735,9 @@ const MRT_TableHeadCell = ({ header, table }) => {
             return (Object.assign(Object.assign(Object.assign({ backgroundColor: column.getIsPinned() && columnDefType !== 'group'
                     ? alpha(lighten(theme.palette.background.default, 0.04), 0.95)
                     : 'inherit', backgroundImage: 'inherit', boxShadow: getIsLastLeftPinnedColumn()
-                    ? `4px 0 4px -2px ${alpha(theme.palette.common.black, 0.1)}`
+                    ? `-4px 0 8px -6px ${alpha(theme.palette.common.black, 0.2)} inset`
                     : getIsFirstRightPinnedColumn()
-                        ? `-4px 0 4px -2px ${alpha(theme.palette.common.black, 0.1)}`
+                        ? `4px 0 8px -6px ${alpha(theme.palette.common.black, 0.2)} inset`
                         : undefined, fontWeight: 'bold', left: column.getIsPinned() === 'left'
                     ? `${column.getStart('left')}px`
                     : undefined, overflow: 'visible', opacity: (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id || (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === column.id
@@ -1939,7 +1943,7 @@ const MRT_TableBodyRowGrabHandle = ({ cell, rowRef, table, }) => {
     return (React.createElement(MRT_GrabHandleButton, { iconButtonProps: iconButtonProps, onDragStart: handleDragStart, onDragEnd: handleDragEnd, table: table }));
 };
 
-const MRT_TableBodyCellValue = ({ cell, table }) => {
+const _MRT_TableBodyCellValue = ({ cell, table }) => {
     var _a, _b;
     const { column, row } = cell;
     const { columnDef } = column;
@@ -1961,6 +1965,7 @@ const MRT_TableBodyCellValue = ({ cell, table }) => {
                 })
                 : (_b = (_a = columnDef === null || columnDef === void 0 ? void 0 : columnDef.Cell) === null || _a === void 0 ? void 0 : _a.call(columnDef, { cell, column, row, table })) !== null && _b !== void 0 ? _b : cell.renderValue()));
 };
+const MRT_TableBodyCellValue = memo(_MRT_TableBodyCellValue, (prev, next) => prev.cell.getValue() === next.cell.getValue());
 
 const MRT_TableBodyCell = ({ cell, enableHover, rowIndex, rowRef, table, }) => {
     var _a, _b;
@@ -1977,6 +1982,9 @@ const MRT_TableBodyCell = ({ cell, enableHover, rowIndex, rowRef, table, }) => {
         ? columnDef.muiTableBodyCellProps({ cell, table })
         : columnDef.muiTableBodyCellProps;
     const tableCellProps = Object.assign(Object.assign({}, mTableCellBodyProps), mcTableCellBodyProps);
+    const skeletonProps = muiTableBodyCellSkeletonProps instanceof Function
+        ? muiTableBodyCellSkeletonProps({ cell, column, row, table })
+        : muiTableBodyCellSkeletonProps;
     const isEditable = (enableEditing || columnDef.enableEditing) &&
         columnDef.enableEditing !== false;
     const isEditing = isEditable &&
@@ -2015,7 +2023,7 @@ const MRT_TableBodyCell = ({ cell, enableHover, rowIndex, rowRef, 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()) * 160);
     };
     const handleDragEnter = (e) => {
         var _a;
@@ -2050,9 +2058,9 @@ const MRT_TableBodyCell = ({ cell, enableHover, rowIndex, rowRef, table, }) => {
             return (Object.assign(Object.assign(Object.assign({ 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)}`
+                    ? `-4px 0 8px -6px ${alpha(theme.palette.common.black, 0.2)} inset`
                     : getIsFirstRightPinnedColumn()
-                        ? `-4px 0 4px -2px ${alpha(theme.palette.common.black, 0.1)}`
+                        ? `4px 0 8px -6px ${alpha(theme.palette.common.black, 0.2)} inset`
                         : undefined, cursor: isEditable && editingMode === 'cell' ? 'pointer' : 'text', left: column.getIsPinned() === 'left'
                     ? `${column.getStart('left')}px`
                     : undefined, opacity: (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id || (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === column.id
@@ -2074,11 +2082,7 @@ const MRT_TableBodyCell = ({ cell, enableHover, rowIndex, rowRef, table, }) => {
                             : density === 'comfortable'
                                 ? 0.75
                                 : 1.25)}rem`
-                    : undefined, position: column.getIsPinned() ? 'sticky' : 'relative', right: column.getIsPinned() === 'right' ? `${getTotalRight()}px` : undefined, textOverflow: columnDefType !== 'display' ? 'ellipsis' : undefined, transition: 'all 0.2s ease-in-out', whiteSpace: density === 'compact' ? 'nowrap' : 'normal', zIndex: (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id
-                    ? 2
-                    : column.getIsPinned()
-                        ? 1
-                        : undefined, '&:hover': {
+                    : undefined, position: column.getIsPinned() ? 'sticky' : 'relative', right: column.getIsPinned() === 'right' ? `${getTotalRight()}px` : undefined, textOverflow: columnDefType !== 'display' ? 'ellipsis' : undefined, transition: 'all 0.2s ease-in-out', whiteSpace: density === 'compact' ? 'nowrap' : 'normal', zIndex: (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id ? 2 : column.getIsPinned() ? 1 : 0, '&:hover': {
                     backgroundColor: enableHover &&
                         enableEditing &&
                         columnDef.enableEditing !== false &&
@@ -2091,7 +2095,7 @@ const MRT_TableBodyCell = ({ cell, enableHover, rowIndex, rowRef, table, }) => {
                 ? tableCellProps.sx(theme)
                 : tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx)), draggingBorders), { maxWidth: `min(${column.getSize()}px, fit-content)`, minWidth: `max(${column.getSize()}px, ${(_a = columnDef.minSize) !== null && _a !== void 0 ? _a : 30}px)`, width: column.getSize() }));
         } }),
-        React.createElement(React.Fragment, null, cell.getIsPlaceholder() ? null : isLoading || showSkeletons ? (React.createElement(Skeleton, Object.assign({ animation: "wave", height: 20, width: skeletonWidth }, muiTableBodyCellSkeletonProps))) : enableRowNumbers &&
+        React.createElement(React.Fragment, null, cell.getIsPlaceholder() ? null : isLoading || showSkeletons ? (React.createElement(Skeleton, Object.assign({ animation: "wave", height: 20, width: skeletonWidth }, skeletonProps))) : enableRowNumbers &&
             rowNumberMode === 'static' &&
             column.id === 'mrt-row-numbers' ? (rowIndex + 1) : column.id === 'mrt-row-drag' ? (React.createElement(MRT_TableBodyRowGrabHandle, { cell: cell, rowRef: rowRef, table: table })) : columnDefType === 'display' &&
             (column.id === 'mrt-row-select' ||
@@ -2161,8 +2165,8 @@ const MRT_TableBodyRow = ({ row, rowIndex, table, virtualRow, }) => {
         renderDetailPanel && !row.getIsGrouped() && (React.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 })
@@ -2303,7 +2307,7 @@ const MRT_TableFooter = ({ table }) => {
             : tableFooterProps === null || tableFooterProps === void 0 ? void 0 : tableFooterProps.sx))) }), getFooterGroups().map((footerGroup) => (React.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
@@ -2313,7 +2317,7 @@ const MRT_Table = ({ tableContainerRef, table }) => {
             ? tableProps.sx(theme)
             : tableProps === null || tableProps === void 0 ? void 0 : tableProps.sx))) }),
         enableTableHead && React.createElement(MRT_TableHead, { table: table }),
-        React.createElement(MRT_TableBody, { tableContainerRef: tableContainerRef, table: table }),
+        React.createElement(MRT_TableBody, { table: table }),
         enableTableFooter && React.createElement(MRT_TableFooter, { table: table })));
 };
 
@@ -2348,7 +2352,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.createElement(MRT_Table, { tableContainerRef: tableContainerRef, table: table })));
+        React.createElement(MRT_Table, { table: table })));
 };
 
 const MRT_TablePaper = ({ table }) => {
@@ -2526,9 +2530,9 @@ const MRT_TableRoot = (props) => {
         props.tableInstanceRef.current = table;
     }
     return (React.createElement(React.Fragment, null,
-        React.createElement(Dialog, { PaperComponent: Box, TransitionComponent: Grow, disablePortal: true, fullScreen: true, keepMounted: false, onClose: () => setIsFullScreen(false), open: isFullScreen, transitionDuration: 400 },
+        React.createElement(Dialog, { PaperComponent: Box, TransitionComponent: Grow, disablePortal: true, fullScreen: true, keepMounted: false, onClose: () => table.setIsFullScreen(false), open: table.getState().isFullScreen, transitionDuration: 400 },
             React.createElement(MRT_TablePaper, { table: table })),
-        !isFullScreen && React.createElement(MRT_TablePaper, { table: table }),
+        !table.getState().isFullScreen && (React.createElement(MRT_TablePaper, { table: table })),
         editingRow && props.editingMode === 'modal' && (React.createElement(MRT_EditRowModal, { row: editingRow, table: table, open: true }))));
 };