material-react-table 0.16.1 → 0.16.2

package/dist/utils.d.ts

@@ -1,4 +1,4 @@
-import { ColumnDef, ColumnOrderState, Table, Updater } from '@tanstack/react-table';
+import { ColumnDef, ColumnOrderState, Table } from '@tanstack/react-table';
 import { MaterialReactTableProps, MRT_Column, MRT_ColumnDef, MRT_FilterFn } from '.';
 export declare const getAllLeafColumnDefs: (columns: MRT_ColumnDef[]) => MRT_ColumnDef[];
 export declare const createGroup: <D extends Record<string, any> = {}>(table: Table<D>, column: MRT_ColumnDef<D>, currentFilterFns: {
@@ -10,7 +10,7 @@ export declare const createDataColumn: <D extends Record<string, any> = {}>(tabl
 export declare const createDisplayColumn: <D extends Record<string, any> = {}>(table: Table<D>, column: Pick<MRT_ColumnDef<D>, "accessorFn" | "columns" | "filterFn" | "footer" | "sortingFn" | "id" | "accessorKey" | "meta" | "enableHiding" | "enablePinning" | "enableColumnFilter" | "enableGlobalFilter" | "sortDescFirst" | "enableSorting" | "enableMultiSort" | "invertSorting" | "sortUndefined" | "aggregationFn" | "enableGrouping" | "enableResizing" | "size" | "minSize" | "maxSize" | "AggregatedCell" | "Cell" | "Edit" | "Filter" | "Footer" | "Header" | "enableClickToCopy" | "enableColumnActions" | "enableColumnFilterChangeMode" | "enableColumnOrdering" | "enableEditing" | "enabledColumnFilterOptions" | "filterSelectOptions" | "muiTableBodyCellCopyButtonProps" | "muiTableBodyCellEditTextFieldProps" | "muiTableBodyCellProps" | "muiTableFooterCellProps" | "muiTableHeadCellColumnActionsButtonProps" | "muiTableHeadCellFilterTextFieldProps" | "muiTableHeadCellProps" | "onCellEditBlur" | "onCellEditChanged" | "onColumnFilterValueChanged" | "onColumnFilterValueChangedDebounced"> & {
     header?: string | undefined;
 }) => ColumnDef<D>;
-export declare const reorderColumn: (movingColumn: MRT_Column, receivingColumn: MRT_Column, columnOrder: ColumnOrderState, setColumnOrder: (updater: Updater<ColumnOrderState>) => void) => void;
+export declare const reorderColumn: (movingColumn: MRT_Column, receivingColumn: MRT_Column, columnOrder: ColumnOrderState) => ColumnOrderState;
 export declare const getLeadingDisplayColumnIds: (props: MaterialReactTableProps<any>) => string[];
 export declare const getTrailingDisplayColumnIds: (props: MaterialReactTableProps<any>) => (string | false | undefined)[];
 export declare const getDefaultColumnOrderIds: (props: MaterialReactTableProps<any>) => string[];

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.16.1",
+  "version": "0.16.2",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI implementation of TanStack React Table, inspired by material-table and the MUI X DataGrid, written from the ground up in TypeScript.",

package/src/MaterialReactTable.tsx

@@ -30,6 +30,8 @@ import {
   Cell,
   Column,
   ColumnDef,
+  ColumnOrderState,
+  ColumnPinningState,
   FilterFn,
   FilterFnOption,
   Header,
@@ -646,6 +648,20 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
       filterValue: any;
       instance: MRT_TableInstance<D>;
     }) => void;
+    onColumnOrderChanged?: ({
+      columnOrder,
+      instance,
+    }: {
+      columnOrder: ColumnOrderState;
+      instance: MRT_TableInstance<D>;
+    }) => void;
+    onColumnPinningChanged?: ({
+      columnPinning,
+      instance,
+    }: {
+      columnPinning: ColumnPinningState;
+      instance: MRT_TableInstance<D>;
+    }) => void;
     onColumnVisibilityChanged?: ({
       column,
       columnVisibility,

package/src/body/MRT_TableBodyCell.tsx

@@ -53,8 +53,10 @@ export const MRT_TableBodyCell: FC<Props> = ({
 
   const [, dropRef] = useDrop({
     accept: 'column',
-    drop: (movingColumn: MRT_Column) =>
-      reorderColumn(movingColumn, column, columnOrder, setColumnOrder),
+    drop: (movingColumn: MRT_Column) => {
+      const newColumnOrder = reorderColumn(movingColumn, column, columnOrder);
+      setColumnOrder(newColumnOrder);
+    },
   });
 
   const mTableCellBodyProps =

package/src/head/MRT_DraggableTableHeadCell.tsx

@@ -10,11 +10,7 @@ interface Props {
 }
 
 export const MRT_DraggableTableHeadCell: FC<Props> = ({ header, instance }) => {
-  const {
-    getState,
-    options: {},
-    setColumnOrder,
-  } = instance;
+  const { getState, setColumnOrder } = instance;
 
   const { columnOrder } = getState();
 
@@ -22,8 +18,10 @@ export const MRT_DraggableTableHeadCell: FC<Props> = ({ header, instance }) => {
 
   const [, dropRef] = useDrop({
     accept: 'column',
-    drop: (movingColumn: MRT_Column) =>
-      reorderColumn(movingColumn, column, columnOrder, setColumnOrder),
+    drop: (movingColumn: MRT_Column) => {
+      const newColumnOrder = reorderColumn(movingColumn, column, columnOrder);
+      setColumnOrder(newColumnOrder);
+    },
   });
 
   const [{ isDragging }, dragRef, previewRef] = useDrag({

package/src/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -33,19 +33,20 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
       enableHiding,
       enablePinning,
       localization,
-      onColumnVisibilityChanged,
     },
     setColumnOrder,
   } = instance;
 
-  const { columnOrder, columnVisibility } = getState();
+  const { columnOrder } = getState();
 
   const { columnDef, columnDefType } = column;
 
   const [, dropRef] = useDrop({
     accept: 'column',
-    drop: (movingColumn: MRT_Column) =>
-      reorderColumn(movingColumn, column, columnOrder, setColumnOrder),
+    drop: (movingColumn: MRT_Column) => {
+      const newColumnOrder = reorderColumn(movingColumn, column, columnOrder);
+      setColumnOrder(newColumnOrder);
+    },
   });
 
   const [, dragRef, previewRef] = useDrag({
@@ -69,11 +70,6 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
     } else {
       column.toggleVisibility();
     }
-    onColumnVisibilityChanged?.({
-      column,
-      columnVisibility,
-      instance,
-    });
   };
 
   return (

package/src/table/MRT_TableRoot.tsx

@@ -310,6 +310,30 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
     instance,
   ]);
 
+  useEffect(() => {
+    props?.onColumnOrderChanged?.({
+      columnOrder: instance.getState().columnOrder,
+      //@ts-ignore
+      instance,
+    });
+  }, [instance.getState().columnOrder]);
+
+  useEffect(() => {
+    props?.onColumnPinningChanged?.({
+      columnPinning: instance.getState().columnPinning,
+      //@ts-ignore
+      instance,
+    });
+  }, [instance.getState().columnPinning]);
+
+  useEffect(() => {
+    props?.onColumnVisibilityChanged?.({
+      columnPinning: instance.getState().columnVisibility,
+      //@ts-ignore
+      instance,
+    });
+  }, [instance.getState().columnVisibility]);
+
   return (
     <>
       <Dialog

package/src/utils.ts

@@ -1,9 +1,4 @@
-import {
-  ColumnDef,
-  ColumnOrderState,
-  Table,
-  Updater,
-} from '@tanstack/react-table';
+import { ColumnDef, ColumnOrderState, Table } from '@tanstack/react-table';
 import {
   MaterialReactTableProps,
   MRT_Column,
@@ -67,8 +62,7 @@ export const reorderColumn = (
   movingColumn: MRT_Column,
   receivingColumn: MRT_Column,
   columnOrder: ColumnOrderState,
-  setColumnOrder: (updater: Updater<ColumnOrderState>) => void,
-) => {
+): ColumnOrderState => {
   if (movingColumn.getCanPin()) {
     movingColumn.pin(receivingColumn.getIsPinned());
   }
@@ -77,7 +71,7 @@ export const reorderColumn = (
     0,
     columnOrder.splice(columnOrder.indexOf(movingColumn.id), 1)[0],
   );
-  setColumnOrder([...columnOrder]);
+  return [...columnOrder];
 };
 
 export const getLeadingDisplayColumnIds = (