material-react-table 1.1.0 → 1.2.0

package/dist/cjs/MaterialReactTable.d.ts

@@ -132,6 +132,7 @@ export declare type MRT_TableInstance<TData extends Record<string, any> = {}> =
         filterInputRefs: MutableRefObject<Record<string, HTMLInputElement>>;
         searchInputRef: MutableRefObject<HTMLInputElement>;
         tableContainerRef: MutableRefObject<HTMLDivElement>;
+        tableHeadCellRefs: MutableRefObject<Record<string, HTMLTableCellElement>>;
         tablePaperRef: MutableRefObject<HTMLDivElement>;
         topToolbarRef: MutableRefObject<HTMLDivElement>;
     };

package/dist/cjs/index.js

@@ -564,7 +564,7 @@ const MRT_GrabHandleButton = ({ iconButtonProps, onDragEnd, onDragStart, table,
                 var _a;
                 e.stopPropagation();
                 (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onClick) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, e);
-            }, onDragStart: onDragStart, onDragEnd: onDragEnd, sx: (theme) => (Object.assign({ cursor: 'grab', m: 0, opacity: 0.5, p: '2px', transition: 'all 150ms ease-in-out', '&:hover': {
+            }, onDragStart: onDragStart, onDragEnd: onDragEnd, sx: (theme) => (Object.assign({ cursor: 'grab', m: '0 -0.1rem', opacity: 0.5, p: '2px', transition: 'all 150ms ease-in-out', '&:hover': {
                     backgroundColor: 'transparent',
                     opacity: 1,
                 }, '&:active': {
@@ -996,7 +996,7 @@ const MRT_SelectCheckbox = ({ row, selectAll, table }) => {
 
 const MRT_GlobalFilterTextField = ({ table, }) => {
     var _a;
-    const { getState, setGlobalFilter, options: { enableGlobalFilterModes, icons: { SearchIcon, CloseIcon }, localization, muiSearchTextFieldProps, }, refs: { searchInputRef }, } = table;
+    const { getState, setGlobalFilter, options: { enableGlobalFilterModes, icons: { SearchIcon, CloseIcon }, localization, manualFiltering, muiSearchTextFieldProps, }, refs: { searchInputRef }, } = table;
     const { globalFilter, showGlobalFilter } = getState();
     const textFieldProps = muiSearchTextFieldProps instanceof Function
         ? muiSearchTextFieldProps({ table })
@@ -1006,7 +1006,7 @@ const MRT_GlobalFilterTextField = ({ table, }) => {
     const handleChangeDebounced = React.useCallback(material.debounce((event) => {
         var _a;
         setGlobalFilter((_a = event.target.value) !== null && _a !== void 0 ? _a : undefined);
-    }, 250), []);
+    }, manualFiltering ? 500 : 250), []);
     const handleChange = (event) => {
         setSearchValue(event.target.value);
         handleChangeDebounced(event);
@@ -1364,7 +1364,7 @@ const MRT_TableHeadCellColumnActionsButton = ({ header, table, }) => {
     const iconButtonProps = Object.assign(Object.assign({}, mTableHeadCellColumnActionsButtonProps), mcTableHeadCellColumnActionsButtonProps);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement(material.Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : localization.columnActions },
-            React__default["default"].createElement(material.IconButton, Object.assign({ "aria-label": localization.columnActions, onClick: handleClick, size: "small" }, iconButtonProps, { sx: (theme) => (Object.assign({ height: '2rem', mt: '-0.2rem', opacity: 0.5, transition: 'opacity 150ms', width: '2rem', '&:hover': {
+            React__default["default"].createElement(material.IconButton, Object.assign({ "aria-label": localization.columnActions, onClick: handleClick, size: "small" }, iconButtonProps, { sx: (theme) => (Object.assign({ height: '2rem', m: '-0.2rem', opacity: 0.5, transition: 'opacity 150ms', width: '2rem', '&:hover': {
                         opacity: 1,
                     } }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
                     ? iconButtonProps.sx(theme)
@@ -1375,7 +1375,7 @@ const MRT_TableHeadCellColumnActionsButton = ({ header, table, }) => {
 
 const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
-    const { options: { enableColumnFilterModes, columnFilterModeOptions, icons: { FilterListIcon, CloseIcon }, localization, muiTableHeadCellFilterTextFieldProps, }, refs: { filterInputRefs }, setColumnFilterFns, } = table;
+    const { options: { enableColumnFilterModes, columnFilterModeOptions, icons: { FilterListIcon, CloseIcon }, localization, manualFiltering, muiTableHeadCellFilterTextFieldProps, }, refs: { filterInputRefs }, setColumnFilterFns, } = table;
     const { column } = header;
     const { columnDef } = column;
     const mTableHeadCellFilterTextFieldProps = muiTableHeadCellFilterTextFieldProps instanceof Function
@@ -1442,7 +1442,7 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
         else {
             column.setFilterValue(value !== null && value !== void 0 ? value : undefined);
         }
-    }, isTextboxFilter ? 200 : 1), []);
+    }, isTextboxFilter ? (manualFiltering ? 400 : 200) : 1), []);
     const handleChange = (event) => {
         setFilterValue(event.target.value);
         handleChangeDebounced(event);
@@ -1539,7 +1539,7 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
                     ? '100px'
                     : !filterChipLabel
                         ? '120px'
-                        : 'auto', width: '100%', '& .MuiSelect-icon': {
+                        : 'auto', width: 'calc(100% + 4px)', mx: '-2px', '& .MuiSelect-icon': {
                     mr: '1.5rem',
                 } }, ((textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.sx) instanceof Function
                 ? textFieldProps.sx(theme)
@@ -1643,7 +1643,7 @@ const MRT_TableHeadCellFilterLabel = ({ header, table }) => {
     return (React__default["default"].createElement(material.Grow, { unmountOnExit: true, in: (!!column.getFilterValue() && !isRangeFilter) ||
             (isRangeFilter && // @ts-ignore
                 (!!((_b = column.getFilterValue()) === null || _b === void 0 ? void 0 : _b[0]) || !!((_c = column.getFilterValue()) === null || _c === void 0 ? void 0 : _c[1]))) },
-        React__default["default"].createElement("span", null,
+        React__default["default"].createElement(material.Box, { component: "span", sx: { flex: '0 0' } },
             React__default["default"].createElement(material.Tooltip, { arrow: true, placement: "top", title: filterTooltip },
                 React__default["default"].createElement(material.IconButton, { disableRipple: true, onClick: (event) => {
                         event.stopPropagation();
@@ -1698,31 +1698,33 @@ const MRT_TableHeadCellResizeHandle = ({ header, table }) => {
     const { column } = header;
     const { columnDef } = column;
     const { columnDefType } = columnDef;
-    return (React__default["default"].createElement(material.Divider, { flexItem: true, orientation: "vertical", onDoubleClick: () => column.resetSize(), sx: (theme) => ({
-            borderRadius: '2px',
-            borderRightWidth: '2px',
+    return (React__default["default"].createElement(material.Box, { onDoubleClick: () => column.resetSize(), onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), sx: (theme) => ({
             cursor: 'col-resize',
-            height: showColumnFilters && columnDefType === 'data' ? '4rem' : '2rem',
             mr: density === 'compact' ? '-0.5rem' : '-1rem',
-            opacity: 0.8,
             position: 'absolute',
             right: '1px',
-            touchAction: 'none',
-            transition: column.getIsResizing()
-                ? undefined
-                : 'all 150ms ease-in-out',
-            userSelect: 'none',
-            zIndex: 4,
-            '&:active': {
+            px: '4px',
+            '&:active > hr': {
                 backgroundColor: theme.palette.info.main,
                 opacity: 1,
             },
-        }), onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), style: {
+        }), style: {
             transform: column.getIsResizing()
                 ? `translateX(${((_a = getState().columnSizingInfo.deltaOffset) !== null && _a !== void 0 ? _a : 0) /
                     (columnResizeMode === 'onChange' ? 16 : 1)}px)`
-                : 'none',
-        } }));
+                : undefined,
+        } },
+        React__default["default"].createElement(material.Divider, { flexItem: true, orientation: "vertical", sx: {
+                borderRadius: '2px',
+                borderWidth: '2px',
+                height: showColumnFilters && columnDefType === 'data' ? '3.5rem' : '1.5rem',
+                touchAction: 'none',
+                transition: column.getIsResizing()
+                    ? undefined
+                    : 'all 150ms ease-in-out',
+                userSelect: 'none',
+                zIndex: 4,
+            } })));
 };
 
 const MRT_TableHeadCellSortLabel = ({ header, table, tableCellProps, }) => {
@@ -1738,6 +1740,7 @@ const MRT_TableHeadCellSortLabel = ({ header, table, tableCellProps, }) => {
         React__default["default"].createElement(material.TableSortLabel, { "aria-label": sortTooltip, active: !!column.getIsSorted(), direction: column.getIsSorted()
                 ? column.getIsSorted()
                 : undefined, sx: {
+                flex: '0 0',
                 width: '2ch',
                 transform: (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) !== 'right'
                     ? 'translateX(-0.5ch)'
@@ -1748,7 +1751,7 @@ const MRT_TableHeadCellSortLabel = ({ header, table, tableCellProps, }) => {
 const MRT_TableHeadCell = ({ header, table }) => {
     var _a, _b, _c, _d;
     const theme = material.useTheme();
-    const { getState, options: { enableColumnActions, enableColumnDragging, enableColumnOrdering, enableGrouping, enableMultiSort, muiTableHeadCellProps, }, setHoveredColumn, } = table;
+    const { getState, options: { enableColumnActions, enableColumnDragging, enableColumnOrdering, enableGrouping, enableMultiSort, muiTableHeadCellProps, }, refs: { tableHeadCellRefs }, setHoveredColumn, } = table;
     const { density, draggingColumn, grouping, hoveredColumn, showColumnFilters, } = getState();
     const { column } = header;
     const { columnDef } = column;
@@ -1760,6 +1763,25 @@ const MRT_TableHeadCell = ({ header, table }) => {
         ? columnDef.muiTableHeadCellProps({ column, table })
         : columnDef.muiTableHeadCellProps;
     const tableCellProps = Object.assign(Object.assign({}, mTableHeadCellProps), mcTableHeadCellProps);
+    const showColumnActions = (enableColumnActions || columnDef.enableColumnActions) &&
+        columnDef.enableColumnActions !== false;
+    const showDragHandle = enableColumnDragging !== false &&
+        columnDef.enableColumnDragging !== false &&
+        (enableColumnDragging ||
+            (enableColumnOrdering && columnDef.enableColumnOrdering !== false) ||
+            (enableGrouping &&
+                columnDef.enableGrouping !== false &&
+                !grouping.includes(column.id)));
+    const headerPL = React.useMemo(() => {
+        let pl = 0;
+        if (column.getCanSort())
+            pl++;
+        if (showColumnActions)
+            pl += 1.75;
+        if (showDragHandle)
+            pl += 1.25;
+        return pl;
+    }, [showColumnActions, showDragHandle]);
     const draggingBorder = React.useMemo(() => (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id
         ? `1px dashed ${theme.palette.text.secondary}`
         : (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === column.id
@@ -1780,15 +1802,18 @@ const MRT_TableHeadCell = ({ header, table }) => {
             setHoveredColumn(columnDef.enableColumnOrdering !== false ? column : null);
         }
     };
-    const headerElement = ((_b = ((columnDef === null || columnDef === void 0 ? void 0 : columnDef.Header) instanceof Function
+    const headerElement = (columnDef === null || columnDef === void 0 ? void 0 : columnDef.Header) instanceof Function
         ? (_a = columnDef === null || columnDef === void 0 ? void 0 : columnDef.Header) === null || _a === void 0 ? void 0 : _a.call(columnDef, {
             column,
             header,
             table,
         })
-        : columnDef === null || columnDef === void 0 ? void 0 : columnDef.Header)) !== null && _b !== void 0 ? _b : columnDef.header);
-    const tableHeadCellRef = React__default["default"].useRef(null);
-    return (React__default["default"].createElement(material.TableCell, Object.assign({ align: columnDefType === 'group' ? 'center' : 'left', colSpan: header.colSpan, onDragEnter: handleDragEnter, ref: tableHeadCellRef }, tableCellProps, { sx: (theme) => (Object.assign(Object.assign({ fontWeight: 'bold', overflow: 'visible', p: density === 'compact'
+        : (_b = columnDef === null || columnDef === void 0 ? void 0 : columnDef.Header) !== null && _b !== void 0 ? _b : columnDef.header;
+    return (React__default["default"].createElement(material.TableCell, Object.assign({ align: columnDefType === 'group' ? 'center' : 'left', colSpan: header.colSpan, onDragEnter: handleDragEnter, ref: (node) => {
+            if (node) {
+                tableHeadCellRefs.current[column.id] = node;
+            }
+        } }, tableCellProps, { sx: (theme) => (Object.assign(Object.assign({ fontWeight: 'bold', overflow: 'visible', p: density === 'compact'
                 ? '0.5rem'
                 : density === 'comfortable'
                     ? columnDefType === 'display'
@@ -1815,47 +1840,42 @@ const MRT_TableHeadCell = ({ header, table }) => {
             tableCellProps,
             theme,
         })), draggingBorders)) }),
-        header.isPlaceholder ? null : (React__default["default"].createElement(material.Box, { sx: {
+        header.isPlaceholder ? null : (React__default["default"].createElement(material.Box, { className: "Mui-TableHeadCell-Content", sx: {
                 alignItems: 'flex-start',
                 display: 'flex',
                 flexDirection: (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) === 'right' ? 'row-reverse' : 'row',
-                justifyContent: (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) === 'right'
-                    ? 'flex-start'
-                    : columnDefType === 'group' ||
-                        (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) === 'center'
-                        ? 'center'
-                        : 'space-between',
+                justifyContent: columnDefType === 'group' || (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) === 'center'
+                    ? 'center'
+                    : column.getCanResize()
+                        ? 'space-between'
+                        : 'flex-start',
                 position: 'relative',
                 width: '100%',
             } },
-            React__default["default"].createElement(material.Box, { onClick: column.getToggleSortingHandler(), sx: {
+            React__default["default"].createElement(material.Box, { className: "Mui-TableHeadCell-Content-Labels", onClick: column.getToggleSortingHandler(), sx: {
                     alignItems: 'center',
                     cursor: column.getCanSort() && columnDefType !== 'group'
                         ? 'pointer'
                         : undefined,
                     display: 'flex',
                     flexDirection: (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) === 'right' ? 'row-reverse' : 'row',
-                    flexWrap: 'nowrap',
-                    m: (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) === 'center' ? 'auto' : undefined,
-                    pl: (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) === 'center' && column.getCanSort()
-                        ? '1rem'
+                    overflow: 'hidden',
+                    pl: (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) === 'center'
+                        ? `${headerPL}rem`
                         : undefined,
-                    whiteSpace: ((_d = (_c = columnDef.header) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0) < 24 ? 'nowrap' : 'normal',
                 } },
-                headerElement,
+                React__default["default"].createElement(material.Box, { className: "Mui-TableHeadCell-Content-Wrapper", sx: {
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        whiteSpace: ((_d = (_c = columnDef.header) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0) < 20 ? 'nowrap' : 'normal',
+                    }, title: columnDef.header }, headerElement),
                 column.getCanSort() && (React__default["default"].createElement(MRT_TableHeadCellSortLabel, { header: header, table: table, tableCellProps: tableCellProps })),
                 column.getCanFilter() && (React__default["default"].createElement(MRT_TableHeadCellFilterLabel, { header: header, table: table }))),
-            columnDefType !== 'group' && (React__default["default"].createElement(material.Box, { sx: { whiteSpace: 'nowrap' } },
-                enableColumnDragging !== false &&
-                    columnDef.enableColumnDragging !== false &&
-                    (enableColumnDragging ||
-                        (enableColumnOrdering &&
-                            columnDef.enableColumnOrdering !== false) ||
-                        (enableGrouping &&
-                            columnDef.enableGrouping !== false &&
-                            !grouping.includes(column.id))) && (React__default["default"].createElement(MRT_TableHeadCellGrabHandle, { column: column, table: table, tableHeadCellRef: tableHeadCellRef })),
-                (enableColumnActions || columnDef.enableColumnActions) &&
-                    columnDef.enableColumnActions !== false && (React__default["default"].createElement(MRT_TableHeadCellColumnActionsButton, { header: header, table: table })))),
+            columnDefType !== 'group' && (React__default["default"].createElement(material.Box, { className: "Mui-TableHeadCell-Content-Actions", sx: { whiteSpace: 'nowrap' } },
+                showDragHandle && (React__default["default"].createElement(MRT_TableHeadCellGrabHandle, { column: column, table: table, tableHeadCellRef: {
+                        current: tableHeadCellRefs.current[column.id],
+                    } })),
+                showColumnActions && (React__default["default"].createElement(MRT_TableHeadCellColumnActionsButton, { header: header, table: table })))),
             column.getCanResize() && (React__default["default"].createElement(MRT_TableHeadCellResizeHandle, { header: header, table: table })))),
         column.getCanFilter() && (React__default["default"].createElement(MRT_TableHeadCellFilterContainer, { header: header, table: table }))));
 };
@@ -2323,7 +2343,7 @@ const MRT_TableFooterCell = ({ footer, table }) => {
                 ? '0.5rem'
                 : density === 'comfortable'
                     ? '1rem'
-                    : '1.5rem', verticalAlign: 'top' }, getCommonCellStyles({ column, table, theme, tableCellProps }))) }),
+                    : '1.5rem', verticalAlign: 'top', zIndex: column.getIsPinned() && columnDefType !== 'group' ? 2 : 1 }, getCommonCellStyles({ column, table, theme, tableCellProps }))) }),
         React__default["default"].createElement(React__default["default"].Fragment, null, footer.isPlaceholder
             ? null
             : (_c = (_b = (columnDef.Footer instanceof Function
@@ -2474,6 +2494,7 @@ const MRT_TableRoot = (props) => {
     const filterInputRefs = React.useRef({});
     const searchInputRef = React.useRef(null);
     const tableContainerRef = React.useRef(null);
+    const tableHeadCellRefs = React.useRef({});
     const tablePaperRef = React.useRef(null);
     const topToolbarRef = React.useRef(null);
     const initialState = React.useMemo(() => {
@@ -2595,6 +2616,7 @@ const MRT_TableRoot = (props) => {
             filterInputRefs,
             searchInputRef,
             tableContainerRef,
+            tableHeadCellRefs,
             tablePaperRef,
             topToolbarRef,
         }, setColumnFilterFns: (_x = props.onFilterFnsChange) !== null && _x !== void 0 ? _x : setColumnFilterFns, setDensity: (_y = props.onDensityChange) !== null && _y !== void 0 ? _y : setDensity, setDraggingColumn: (_z = props.onDraggingColumnChange) !== null && _z !== void 0 ? _z : setDraggingColumn, setDraggingRow: (_0 = props.onDraggingRowChange) !== null && _0 !== void 0 ? _0 : setDraggingRow, setEditingCell: (_1 = props.onEditingCellChange) !== null && _1 !== void 0 ? _1 : setEditingCell, setEditingRow: (_2 = props.onEditingRowChange) !== null && _2 !== void 0 ? _2 : setEditingRow, setGlobalFilterFn: (_3 = props.onGlobalFilterFnChange) !== null && _3 !== void 0 ? _3 : setGlobalFilterFn, setHoveredColumn: (_4 = props.onHoveredColumnChange) !== null && _4 !== void 0 ? _4 : setHoveredColumn, setHoveredRow: (_5 = props.onHoveredRowChange) !== null && _5 !== void 0 ? _5 : setHoveredRow, setIsFullScreen: (_6 = props.onIsFullScreenChange) !== null && _6 !== void 0 ? _6 : setIsFullScreen, setShowAlertBanner: (_7 = props.onShowAlertBannerChange) !== null && _7 !== void 0 ? _7 : setShowAlertBanner, setShowFilters: (_8 = props.onShowFiltersChange) !== null && _8 !== void 0 ? _8 : setShowFilters, setShowGlobalFilter: (_9 = props.onShowGlobalFilterChange) !== null && _9 !== void 0 ? _9 : setShowGlobalFilter });