material-react-table 0.16.1 → 0.16.2

package/dist/MaterialReactTable.d.ts

@@ -1,6 +1,6 @@
 import { ChangeEvent, Dispatch, FC, FocusEvent, MouseEvent, ReactNode, SetStateAction } from 'react';
 import { AlertProps, ButtonProps, CheckboxProps, IconButtonProps, LinearProgressProps, PaperProps, SkeletonProps, TableBodyProps, TableCellProps, TableContainerProps, TableFooterProps, TableHeadProps, TablePaginationProps, TableProps, TableRowProps, TextFieldProps, ToolbarProps } from '@mui/material';
-import { Cell, Column, ColumnDef, FilterFn, FilterFnOption, Header, HeaderGroup, OnChangeFn, Overwrite, ReactTableGenerics, Row, SortingFn, SortingFnOption, TableGenerics, TableInstance, TableState, UseTableInstanceOptions, VisibilityState } from '@tanstack/react-table';
+import { Cell, Column, ColumnDef, ColumnOrderState, ColumnPinningState, FilterFn, FilterFnOption, Header, HeaderGroup, OnChangeFn, Overwrite, ReactTableGenerics, Row, SortingFn, SortingFnOption, TableGenerics, TableInstance, TableState, UseTableInstanceOptions, VisibilityState } from '@tanstack/react-table';
 import { Options as VirtualizerOptions } from 'react-virtual';
 import { MRT_Localization } from './localization';
 import { MRT_Icons } from './icons';
@@ -338,6 +338,14 @@ export declare 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, instance, }: {
         column: MRT_Column<D>;
         columnVisibility: VisibilityState;

package/dist/material-react-table.cjs.development.js

@@ -29,10 +29,6 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
-function _objectDestructuringEmpty(obj) {
-  if (obj == null) throw new TypeError("Cannot destructure undefined");
-}
-
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
   var target = {};
@@ -3404,13 +3400,13 @@ var createDataColumn = function createDataColumn(table, column, currentFilterFns
 var createDisplayColumn = function createDisplayColumn(table, column) {
   return table.createDisplayColumn(column);
 };
-var reorderColumn = function reorderColumn(movingColumn, receivingColumn, columnOrder, setColumnOrder) {
+var reorderColumn = function reorderColumn(movingColumn, receivingColumn, columnOrder) {
   if (movingColumn.getCanPin()) {
     movingColumn.pin(receivingColumn.getIsPinned());
   }
 
   columnOrder.splice(columnOrder.indexOf(receivingColumn.id), 0, columnOrder.splice(columnOrder.indexOf(movingColumn.id), 1)[0]);
-  setColumnOrder([].concat(columnOrder));
+  return [].concat(columnOrder);
 };
 var getLeadingDisplayColumnIds = function getLeadingDisplayColumnIds(props) {
   return [(props.positionActionsColumn === 'first' && props.enableRowActions || props.enableEditing && props.editingMode === 'row') && 'mrt-row-actions', (props.enableExpanding || props.enableGrouping) && 'mrt-expand', props.enableRowSelection && 'mrt-select', props.enableRowNumbers && 'mrt-row-numbers'].filter(Boolean);
@@ -3437,12 +3433,10 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
       enableHiding = _instance$options.enableHiding,
       enablePinning = _instance$options.enablePinning,
       localization = _instance$options.localization,
-      onColumnVisibilityChanged = _instance$options.onColumnVisibilityChanged,
       setColumnOrder = instance.setColumnOrder;
 
   var _getState = getState(),
-      columnOrder = _getState.columnOrder,
-      columnVisibility = _getState.columnVisibility;
+      columnOrder = _getState.columnOrder;
 
   var columnDef = column.columnDef,
       columnDefType = column.columnDefType;
@@ -3450,7 +3444,8 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
   var _useDrop = useDrop({
     accept: 'column',
     drop: function drop(movingColumn) {
-      return reorderColumn(movingColumn, column, columnOrder, setColumnOrder);
+      var newColumnOrder = reorderColumn(movingColumn, column, columnOrder);
+      setColumnOrder(newColumnOrder);
     }
   }),
       dropRef = _useDrop[1];
@@ -3483,12 +3478,6 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
     } else {
       column.toggleVisibility();
     }
-
-    onColumnVisibilityChanged == null ? void 0 : onColumnVisibilityChanged({
-      column: column,
-      columnVisibility: columnVisibility,
-      instance: instance
-    });
   };
 
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(material.MenuItem, {
@@ -6332,11 +6321,8 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
 var MRT_DraggableTableHeadCell = function MRT_DraggableTableHeadCell(_ref) {
   var header = _ref.header,
       instance = _ref.instance;
-  var getState = instance.getState;
-
-  _objectDestructuringEmpty(instance.options);
-
-  var setColumnOrder = instance.setColumnOrder;
+  var getState = instance.getState,
+      setColumnOrder = instance.setColumnOrder;
 
   var _getState = getState(),
       columnOrder = _getState.columnOrder;
@@ -6346,7 +6332,8 @@ var MRT_DraggableTableHeadCell = function MRT_DraggableTableHeadCell(_ref) {
   var _useDrop = useDrop({
     accept: 'column',
     drop: function drop(movingColumn) {
-      return reorderColumn(movingColumn, column, columnOrder, setColumnOrder);
+      var newColumnOrder = reorderColumn(movingColumn, column, columnOrder);
+      setColumnOrder(newColumnOrder);
     }
   }),
       dropRef = _useDrop[1];
@@ -7105,7 +7092,8 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
   var _useDrop = useDrop({
     accept: 'column',
     drop: function drop(movingColumn) {
-      return reorderColumn(movingColumn, column, columnOrder, setColumnOrder);
+      var newColumnOrder = reorderColumn(movingColumn, column, columnOrder);
+      setColumnOrder(newColumnOrder);
     }
   }),
       dropRef = _useDrop[1];
@@ -7855,6 +7843,27 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       (_sessionStorage = sessionStorage).setItem.apply(_sessionStorage, itemArgs);
     }
   }, [props.enablePersistentState, props.tableId, props.persistentStateMode, instance]);
+  React.useEffect(function () {
+    props == null ? void 0 : props.onColumnOrderChanged == null ? void 0 : props.onColumnOrderChanged({
+      columnOrder: instance.getState().columnOrder,
+      //@ts-ignore
+      instance: instance
+    });
+  }, [instance.getState().columnOrder]);
+  React.useEffect(function () {
+    props == null ? void 0 : props.onColumnPinningChanged == null ? void 0 : props.onColumnPinningChanged({
+      columnPinning: instance.getState().columnPinning,
+      //@ts-ignore
+      instance: instance
+    });
+  }, [instance.getState().columnPinning]);
+  React.useEffect(function () {
+    props == null ? void 0 : props.onColumnVisibilityChanged == null ? void 0 : props.onColumnVisibilityChanged({
+      columnPinning: instance.getState().columnVisibility,
+      //@ts-ignore
+      instance: instance
+    });
+  }, [instance.getState().columnVisibility]);
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(material.Dialog, {
     PaperComponent: material.Box,
     TransitionComponent: material.Grow,