fix pinned columns not reordering (KevinVandy#1380)

Author: chcoomilk

packages/material-react-table/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);

packages/material-react-table/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)),
+      }));
     }
   };
 

packages/material-react-table/stories/features/ColumnOrdering.stories.tsx

@@ -38,6 +38,11 @@ const columns: MRT_ColumnDef<(typeof data)[0]>[] = [
     accessorKey: 'state',
     header: 'State',
   },
+  {
+    accessorKey: "phone",
+    header: "Phone",
+    enablePinning: false,
+  }
 ];
 
 const data = [...Array(100)].map(() => ({
@@ -47,6 +52,7 @@ const data = [...Array(100)].map(() => ({
   firstName: faker.person.firstName(),
   lastName: faker.person.lastName(),
   state: faker.location.state(),
+  phone: faker.phone.number(),
 }));
 
 export const ColumnOrderingEnabled = () => (