material-react-table 3.2.0 → 3.2.1

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.2.0",
+  "version": "3.2.1",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI V6 implementation of TanStack React Table V8, written from the ground up in TypeScript.",

package/src/components/buttons/MRT_ToggleGlobalFilterButton.tsx

@@ -32,7 +32,7 @@ export const MRT_ToggleGlobalFilterButton = <TData extends MRT_RowData>({
     <Tooltip title={rest?.title ?? localization.showHideSearch}>
       <IconButton
         aria-label={rest?.title ?? localization.showHideSearch}
-        disabled={!!globalFilter}
+        disabled={!!globalFilter && showGlobalFilter}
         onClick={handleToggleSearch}
         {...rest}
         title={undefined}

package/src/components/head/MRT_TableHeadCellGrabHandle.tsx

@@ -26,6 +26,7 @@ export const MRT_TableHeadCellGrabHandle = <TData extends MRT_RowData>({
     getState,
     options: { enableColumnOrdering, muiColumnDragHandleProps },
     setColumnOrder,
+    setColumnPinning,
     setDraggingColumn,
     setHoveredColumn,
   } = table;
@@ -64,9 +65,12 @@ export const MRT_TableHeadCellGrabHandle = <TData extends MRT_RowData>({
       hoveredColumn &&
       hoveredColumn?.id !== draggingColumn?.id
     ) {
-      setColumnOrder(
-        reorderColumn(column, hoveredColumn as MRT_Column<TData>, columnOrder),
-      );
+      const reorderedColumns = reorderColumn(column, hoveredColumn as MRT_Column<TData>, columnOrder);
+      setColumnOrder(reorderedColumns);
+      setColumnPinning(({ left = [], right = [] }) => ({
+        left: reorderedColumns.filter(header => left.includes(header)),
+        right: reorderedColumns.filter(header => right.includes(header)),
+      }));
     }
     setDraggingColumn(null);
     setHoveredColumn(null);

package/src/components/inputs/MRT_FilterTextField.tsx

@@ -343,8 +343,8 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
         ...textFieldProps.slotProps?.formHelperText,
       },
       input: endAdornment //hack because mui looks for presence of endAdornment key instead of undefined
-        ? { endAdornment, startAdornment }
-        : { startAdornment },
+        ? {endAdornment, startAdornment, ...textFieldProps.slotProps?.input}
+        : {startAdornment, ...textFieldProps.slotProps?.input},
       htmlInput: {
         'aria-label': filterPlaceholder,
         autoComplete: 'off',

package/src/components/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -51,6 +51,7 @@ export const MRT_ShowHideColumnsMenuItems = <TData extends MRT_RowData>({
       mrtTheme: { draggingBorderColor },
     },
     setColumnOrder,
+    setColumnPinning,
   } = table;
   const { columnOrder } = getState();
   const { columnDef } = column;
@@ -85,7 +86,12 @@ export const MRT_ShowHideColumnsMenuItems = <TData extends MRT_RowData>({
     setIsDragging(false);
     setHoveredColumn(null);
     if (hoveredColumn) {
-      setColumnOrder(reorderColumn(column, hoveredColumn, columnOrder));
+      const reorderedColumns = reorderColumn(column, hoveredColumn, columnOrder);
+      setColumnOrder(reorderedColumns);
+      setColumnPinning(({ left = [], right = [] }) => ({
+        left: reorderedColumns.filter(header => left.includes(header)),
+        right: reorderedColumns.filter(header => right.includes(header)),
+      }));
     }
   };
 

package/src/components/toolbar/MRT_ToolbarAlertBanner.tsx

@@ -53,13 +53,14 @@ export const MRT_ToolbarAlertBanner = <TData extends MRT_RowData>({
   });
 
   const totalRowCount = rowCount ?? getCoreRowModel().rows.length;
+  const filteredRowCount = getFilteredSelectedRowModel().rows.length;
 
   const selectedRowCount = useMemo(
     () =>
       manualPagination
         ? Object.values(rowSelection).filter(Boolean).length
-        : getFilteredSelectedRowModel().rows.length,
-    [rowSelection, totalRowCount, manualPagination],
+        : filteredRowCount,
+    [rowSelection, totalRowCount, manualPagination, filteredRowCount],
   );
   const selectedAlert =
     selectedRowCount > 0 ? (

package/src/hooks/useMRT_Effects.ts

@@ -69,9 +69,12 @@ export const useMRT_Effects = <TData extends MRT_RowData>(
   useEffect(() => {
     if (!enablePagination || isLoading || showSkeletons) return;
     const { pageIndex, pageSize } = pagination;
-    const firstVisibleRowIndex = pageIndex * pageSize;
-    if (firstVisibleRowIndex >= totalRowCount) {
-      table.setPageIndex(Math.ceil(totalRowCount / pageSize) - 1);
+    const totalPages: number =
+      totalRowCount > 0 ? Math.ceil(totalRowCount / pageSize) : 1;
+    const isOutOfBounds: boolean = pageIndex < 0 || pageIndex >= totalPages;
+
+    if (isOutOfBounds) {
+      table.setPageIndex(totalPages - 1);
     }
   }, [totalRowCount, enablePagination, isLoading, showSkeletons]);