material-react-table 1.1.1 → 1.2.1

package/dist/index.d.ts

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

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.1.1",
+  "version": "1.2.1",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript.",
@@ -93,7 +93,7 @@
     "@emotion/styled": ">=11",
     "@mui/icons-material": ">=5",
     "@mui/material": ">=5",
-    "react": ">=16.8"
+    "react": ">=17.0"
   },
   "dependencies": {
     "@tanstack/match-sorter-utils": "8.1.1",

package/src/MaterialReactTable.tsx

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

package/src/body/MRT_TableDetailPanel.tsx

@@ -10,12 +10,14 @@ interface Props {
 export const MRT_TableDetailPanel: FC<Props> = ({ row, table }) => {
   const {
     getVisibleLeafColumns,
+    getState,
     options: {
       muiTableBodyRowProps,
       muiTableDetailPanelProps,
       renderDetailPanel,
     },
   } = table;
+  const { isLoading } = getState();
 
   const tableRowProps =
     muiTableBodyRowProps instanceof Function
@@ -44,7 +46,11 @@ export const MRT_TableDetailPanel: FC<Props> = ({ row, table }) => {
         })}
       >
         {renderDetailPanel && (
-          <Collapse in={row.getIsExpanded()}>
+          <Collapse
+            in={!isLoading && row.getIsExpanded()}
+            mountOnEnter
+            unmountOnExit
+          >
             {renderDetailPanel({ row, table })}
           </Collapse>
         )}

package/src/buttons/MRT_GrabHandleButton.tsx

@@ -43,7 +43,7 @@ export const MRT_GrabHandleButton = <TData extends Record<string, any> = {}>({
         onDragEnd={onDragEnd}
         sx={(theme) => ({
           cursor: 'grab',
-          m: 0,
+          m: '0 -0.1rem',
           opacity: 0.5,
           p: '2px',
           transition: 'all 150ms ease-in-out',

package/src/head/MRT_TableHeadCell.tsx

@@ -26,6 +26,7 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
       enableMultiSort,
       muiTableHeadCellProps,
     },
+    refs: { tableHeadCellRefs },
     setHoveredColumn,
   } = table;
   const {
@@ -54,6 +55,27 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
     ...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 = useMemo(() => {
+    let pl = 0;
+    if (column.getCanSort()) pl++;
+    if (showColumnActions) pl += 1.75;
+    if (showDragHandle) pl += 1.25;
+    return pl;
+  }, [showColumnActions, showDragHandle]);
+
   const draggingBorder = useMemo(
     () =>
       draggingColumn?.id === column.id
@@ -83,22 +105,25 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
     }
   };
 
-  const headerElement = ((columnDef?.Header instanceof Function
-    ? columnDef?.Header?.({
-        column,
-        header,
-        table,
-      })
-    : columnDef?.Header) ?? columnDef.header) as ReactNode;
-
-  const tableHeadCellRef = React.useRef<HTMLTableCellElement>(null);
+  const headerElement =
+    columnDef?.Header instanceof Function
+      ? columnDef?.Header?.({
+          column,
+          header,
+          table,
+        })
+      : columnDef?.Header ?? (columnDef.header as ReactNode);
 
   return (
     <TableCell
       align={columnDefType === 'group' ? 'center' : 'left'}
       colSpan={header.colSpan}
       onDragEnter={handleDragEnter}
-      ref={tableHeadCellRef}
+      ref={(node) => {
+        if (node) {
+          tableHeadCellRefs.current[column.id] = node as HTMLTableCellElement;
+        }
+      }}
       {...tableCellProps}
       sx={(theme: Theme) => ({
         fontWeight: 'bold',
@@ -145,23 +170,24 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
     >
       {header.isPlaceholder ? null : (
         <Box
+          className="Mui-TableHeadCell-Content"
           sx={{
             alignItems: 'flex-start',
             display: 'flex',
             flexDirection:
               tableCellProps?.align === 'right' ? 'row-reverse' : 'row',
             justifyContent:
-              tableCellProps?.align === 'right'
-                ? 'flex-start'
-                : columnDefType === 'group' ||
-                  tableCellProps?.align === 'center'
+              columnDefType === 'group' || tableCellProps?.align === 'center'
                 ? 'center'
-                : 'space-between',
+                : column.getCanResize()
+                ? 'space-between'
+                : 'flex-start',
             position: 'relative',
             width: '100%',
           }}
         >
           <Box
+            className="Mui-TableHeadCell-Content-Labels"
             onClick={column.getToggleSortingHandler()}
             sx={{
               alignItems: 'center',
@@ -172,17 +198,25 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
               display: 'flex',
               flexDirection:
                 tableCellProps?.align === 'right' ? 'row-reverse' : 'row',
-              flexWrap: 'nowrap',
-              m: tableCellProps?.align === 'center' ? 'auto' : undefined,
+              overflow: 'hidden',
               pl:
-                tableCellProps?.align === 'center' && column.getCanSort()
-                  ? '1rem'
+                tableCellProps?.align === 'center'
+                  ? `${headerPL}rem`
                   : undefined,
-              whiteSpace:
-                (columnDef.header?.length ?? 0) < 24 ? 'nowrap' : 'normal',
             }}
           >
-            {headerElement}
+            <Box
+              className="Mui-TableHeadCell-Content-Wrapper"
+              sx={{
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace:
+                  (columnDef.header?.length ?? 0) < 20 ? 'nowrap' : 'normal',
+              }}
+              title={columnDef.header}
+            >
+              {headerElement}
+            </Box>
             {column.getCanSort() && (
               <MRT_TableHeadCellSortLabel
                 header={header}
@@ -195,28 +229,25 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
             )}
           </Box>
           {columnDefType !== 'group' && (
-            <Box sx={{ whiteSpace: 'nowrap' }}>
-              {enableColumnDragging !== false &&
-                columnDef.enableColumnDragging !== false &&
-                (enableColumnDragging ||
-                  (enableColumnOrdering &&
-                    columnDef.enableColumnOrdering !== false) ||
-                  (enableGrouping &&
-                    columnDef.enableGrouping !== false &&
-                    !grouping.includes(column.id))) && (
-                  <MRT_TableHeadCellGrabHandle
-                    column={column}
-                    table={table}
-                    tableHeadCellRef={tableHeadCellRef}
-                  />
-                )}
-              {(enableColumnActions || columnDef.enableColumnActions) &&
-                columnDef.enableColumnActions !== false && (
-                  <MRT_TableHeadCellColumnActionsButton
-                    header={header}
-                    table={table}
-                  />
-                )}
+            <Box
+              className="Mui-TableHeadCell-Content-Actions"
+              sx={{ whiteSpace: 'nowrap' }}
+            >
+              {showDragHandle && (
+                <MRT_TableHeadCellGrabHandle
+                  column={column}
+                  table={table}
+                  tableHeadCellRef={{
+                    current: tableHeadCellRefs.current[column.id],
+                  }}
+                />
+              )}
+              {showColumnActions && (
+                <MRT_TableHeadCellColumnActionsButton
+                  header={header}
+                  table={table}
+                />
+              )}
             </Box>
           )}
           {column.getCanResize() && (

package/src/head/MRT_TableHeadCellFilterLabel.tsx

@@ -1,5 +1,5 @@
 import React, { FC, MouseEvent } from 'react';
-import { Grow, IconButton, Tooltip } from '@mui/material';
+import { Box, Grow, IconButton, Tooltip } from '@mui/material';
 import { MRT_Header, MRT_TableInstance } from '..';
 
 interface Props {
@@ -56,7 +56,7 @@ export const MRT_TableHeadCellFilterLabel: FC<Props> = ({ header, table }) => {
           (!!column.getFilterValue()?.[0] || !!column.getFilterValue()?.[1]))
       }
     >
-      <span>
+      <Box component="span" sx={{ flex: '0 0' }}>
         <Tooltip arrow placement="top" title={filterTooltip}>
           <IconButton
             disableRipple
@@ -75,7 +75,7 @@ export const MRT_TableHeadCellFilterLabel: FC<Props> = ({ header, table }) => {
             <FilterAltIcon />
           </IconButton>
         </Tooltip>
-      </span>
+      </Box>
     </Grow>
   );
 };

package/src/head/MRT_TableHeadCellResizeHandle.tsx

@@ -49,10 +49,7 @@ export const MRT_TableHeadCellResizeHandle: FC<Props> = ({ header, table }) => {
           borderRadius: '2px',
           borderWidth: '2px',
           height:
-            showColumnFilters && columnDefType === 'data'
-              ? '3.5rem'
-              : '1.75rem',
-          opacity: 0.8,
+            showColumnFilters && columnDefType === 'data' ? '3.5rem' : '1.5rem',
           touchAction: 'none',
           transition: column.getIsResizing()
             ? undefined

package/src/head/MRT_TableHeadCellSortLabel.tsx

@@ -36,6 +36,7 @@ export const MRT_TableHeadCellSortLabel: FC<Props> = ({
             : undefined
         }
         sx={{
+          flex: '0 0',
           width: '2ch',
           transform:
             tableCellProps?.align !== 'right'

package/src/inputs/MRT_FilterTextField.tsx

@@ -38,6 +38,7 @@ export const MRT_FilterTextField: FC<Props> = ({
       columnFilterModeOptions,
       icons: { FilterListIcon, CloseIcon },
       localization,
+      manualFiltering,
       muiTableHeadCellFilterTextFieldProps,
     },
     refs: { filterInputRefs },
@@ -132,7 +133,7 @@ export const MRT_FilterTextField: FC<Props> = ({
           column.setFilterValue(value ?? undefined);
         }
       },
-      isTextboxFilter ? 200 : 1,
+      isTextboxFilter ? (manualFiltering ? 400 : 200) : 1,
     ),
     [],
   );

package/src/inputs/MRT_GlobalFilterTextField.tsx

@@ -32,6 +32,7 @@ export const MRT_GlobalFilterTextField = <
       enableGlobalFilterModes,
       icons: { SearchIcon, CloseIcon },
       localization,
+      manualFiltering,
       muiSearchTextFieldProps,
     },
     refs: { searchInputRef },
@@ -47,9 +48,12 @@ export const MRT_GlobalFilterTextField = <
   const [searchValue, setSearchValue] = useState(globalFilter ?? '');
 
   const handleChangeDebounced = useCallback(
-    debounce((event: ChangeEvent<HTMLInputElement>) => {
-      setGlobalFilter(event.target.value ?? undefined);
-    }, 250),
+    debounce(
+      (event: ChangeEvent<HTMLInputElement>) => {
+        setGlobalFilter(event.target.value ?? undefined);
+      },
+      manualFiltering ? 500 : 250,
+    ),
     [],
   );
 

package/src/table/MRT_TableRoot.tsx

@@ -46,6 +46,7 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
   const filterInputRefs = useRef<Record<string, HTMLInputElement>>({});
   const searchInputRef = useRef<HTMLInputElement>(null);
   const tableContainerRef = useRef<HTMLDivElement>(null);
+  const tableHeadCellRefs = useRef<Record<string, HTMLTableCellElement>>({});
   const tablePaperRef = useRef<HTMLDivElement>(null);
   const topToolbarRef = useRef<HTMLDivElement>(null);
 
@@ -294,6 +295,7 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
       filterInputRefs,
       searchInputRef,
       tableContainerRef,
+      tableHeadCellRefs,
       tablePaperRef,
       topToolbarRef,
     },