material-react-table 0.11.0 → 0.12.2

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

@@ -193,7 +193,7 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
       _instance$options = instance.options,
       ExpandMoreIcon = _instance$options.icons.ExpandMoreIcon,
       localization = _instance$options.localization,
-      onHandleRowExpandChange = _instance$options.onHandleRowExpandChange,
+      onExpandChanged = _instance$options.onExpandChanged,
       renderDetailPanel = _instance$options.renderDetailPanel;
 
   var _getState = getState(),
@@ -201,7 +201,7 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
 
   var handleToggleExpand = function handleToggleExpand(event) {
     row.toggleExpanded();
-    onHandleRowExpandChange == null ? void 0 : onHandleRowExpandChange({
+    onExpandChanged == null ? void 0 : onExpandChanged({
       event: event,
       row: row,
       instance: instance
@@ -229,8 +229,8 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
   })));
 };
 
-var fuzzy = function fuzzy(row, columnId, value, addMeta) {
-  var itemRank = matchSorterUtils.rankItem(row.getValue(columnId), value, {
+var fuzzy = function fuzzy(row, columnId, filterValue, addMeta) {
+  var itemRank = matchSorterUtils.rankItem(row.getValue(columnId), filterValue, {
     threshold: matchSorterUtils.rankings.MATCHES
   });
   addMeta(itemRank);
@@ -341,6 +341,8 @@ var commonMenuItemStyles = {
   alignItems: 'center'
 };
 var MRT_FilterOptionMenu = function MRT_FilterOptionMenu(_ref) {
+  var _columnDef$enabledCol;
+
   var anchorEl = _ref.anchorEl,
       header = _ref.header,
       onSelect = _ref.onSelect,
@@ -349,6 +351,7 @@ var MRT_FilterOptionMenu = function MRT_FilterOptionMenu(_ref) {
   var getState = instance.getState,
       _instance$options = instance.options,
       enabledGlobalFilterOptions = _instance$options.enabledGlobalFilterOptions,
+      enabledColumnFilterOptions = _instance$options.enabledColumnFilterOptions,
       localization = _instance$options.localization,
       setCurrentFilterFns = instance.setCurrentFilterFns,
       setCurrentGlobalFilterFn = instance.setCurrentGlobalFilterFn;
@@ -364,6 +367,7 @@ var MRT_FilterOptionMenu = function MRT_FilterOptionMenu(_ref) {
   var _ref3 = column != null ? column : {},
       columnDef = _ref3.columnDef;
 
+  var allowedColumnFilterOptions = (_columnDef$enabledCol = columnDef == null ? void 0 : columnDef.enabledColumnFilterOptions) != null ? _columnDef$enabledCol : enabledColumnFilterOptions;
   var filterOptions = React.useMemo(function () {
     return [{
       option: 'fuzzy',
@@ -421,7 +425,7 @@ var MRT_FilterOptionMenu = function MRT_FilterOptionMenu(_ref) {
       divider: false,
       fn: notEmpty
     }].filter(function (filterType) {
-      return columnDef ? !columnDef.enabledColumnFilterOptions || columnDef.enabledColumnFilterOptions.includes(filterType.option) : (!enabledGlobalFilterOptions || enabledGlobalFilterOptions.includes(filterType.option)) && ['fuzzy', 'contains'].includes(filterType.option);
+      return columnDef ? allowedColumnFilterOptions === undefined || (allowedColumnFilterOptions == null ? void 0 : allowedColumnFilterOptions.includes(filterType.option)) : (!enabledGlobalFilterOptions || enabledGlobalFilterOptions.includes(filterType.option)) && ['fuzzy', 'contains'].includes(filterType.option);
     });
   }, []);
 
@@ -3406,7 +3410,7 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
   var getState = instance.getState,
       _instance$options = instance.options,
       enableColumnOrdering = _instance$options.enableColumnOrdering,
-      onHandleToggleColumnVisibility = _instance$options.onHandleToggleColumnVisibility,
+      onColumnVisibilityChanged = _instance$options.onColumnVisibilityChanged,
       setColumnOrder = instance.setColumnOrder;
 
   var _getState = getState(),
@@ -3453,7 +3457,7 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
       column.toggleVisibility();
     }
 
-    onHandleToggleColumnVisibility == null ? void 0 : onHandleToggleColumnVisibility({
+    onColumnVisibilityChanged == null ? void 0 : onColumnVisibilityChanged({
       column: column,
       columnVisibility: columnVisibility,
       instance: instance
@@ -3922,7 +3926,7 @@ var MRT_EditActionButtons = function MRT_EditActionButtons(_ref) {
       CancelIcon = _instance$options$ico.CancelIcon,
       SaveIcon = _instance$options$ico.SaveIcon,
       localization = _instance$options.localization,
-      onHandleEditRowSubmit = _instance$options.onHandleEditRowSubmit,
+      onEditRowSubmit = _instance$options.onEditRowSubmit,
       setCurrentEditingRow = instance.setCurrentEditingRow;
 
   var _getState = getState(),
@@ -3936,7 +3940,7 @@ var MRT_EditActionButtons = function MRT_EditActionButtons(_ref) {
   };
 
   var handleSave = function handleSave() {
-    onHandleEditRowSubmit == null ? void 0 : onHandleEditRowSubmit({
+    onEditRowSubmit == null ? void 0 : onEditRowSubmit({
       row: currentEditingRow != null ? currentEditingRow : row,
       instance: instance
     });
@@ -4048,8 +4052,8 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
       _instance$options = instance.options,
       localization = _instance$options.localization,
       muiSelectCheckboxProps = _instance$options.muiSelectCheckboxProps,
-      onHandleSelectRowChange = _instance$options.onHandleSelectRowChange,
-      onHandleSelectAllChange = _instance$options.onHandleSelectAllChange,
+      onRowSelectionChanged = _instance$options.onRowSelectionChanged,
+      onRowSelectAllChanged = _instance$options.onRowSelectAllChanged,
       selectAllMode = _instance$options.selectAllMode;
 
   var _getState = getState(),
@@ -4063,14 +4067,14 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
         instance.getToggleAllPageRowsSelectedHandler()(event);
       }
 
-      onHandleSelectAllChange == null ? void 0 : onHandleSelectAllChange({
+      onRowSelectAllChanged == null ? void 0 : onRowSelectAllChanged({
         event: event,
         selectedRows: event.target.checked ? getRowModel().flatRows : [],
         instance: instance
       });
     } else if (row) {
       row == null ? void 0 : row.getToggleSelectedHandler()(event);
-      onHandleSelectRowChange == null ? void 0 : onHandleSelectRowChange({
+      onRowSelectionChanged == null ? void 0 : onRowSelectionChanged({
         event: event,
         row: row,
         selectedRows: event.target.checked ? [].concat(getSelectedRowModel().flatRows, [row]) : getSelectedRowModel().flatRows.filter(function (selectedRow) {
@@ -5089,14 +5093,14 @@ var MRT_FullScreenToggleButton = function MRT_FullScreenToggleButton(_ref) {
       FullscreenExitIcon = _instance$options$ico.FullscreenExitIcon,
       FullscreenIcon = _instance$options$ico.FullscreenIcon,
       localization = _instance$options.localization,
-      onHandleToggleFullScreen = _instance$options.onHandleToggleFullScreen,
+      onIsFullScreenChanged = _instance$options.onIsFullScreenChanged,
       setIsFullScreen = instance.setIsFullScreen;
 
   var _getState = getState(),
       isFullScreen = _getState.isFullScreen;
 
   var handleToggleFullScreen = function handleToggleFullScreen(event) {
-    onHandleToggleFullScreen == null ? void 0 : onHandleToggleFullScreen({
+    onIsFullScreenChanged == null ? void 0 : onIsFullScreenChanged({
       event: event,
       isFullScreen: !isFullScreen,
       instance: instance
@@ -5154,14 +5158,14 @@ var MRT_ToggleDensePaddingButton = function MRT_ToggleDensePaddingButton(_ref) {
       DensityMediumIcon = _instance$options$ico.DensityMediumIcon,
       DensitySmallIcon = _instance$options$ico.DensitySmallIcon,
       localization = _instance$options.localization,
-      onHandleToggleDensePadding = _instance$options.onHandleToggleDensePadding,
+      onIsDensePaddingChanged = _instance$options.onIsDensePaddingChanged,
       setIsDensePadding = instance.setIsDensePadding;
 
   var _getState = getState(),
       isDensePadding = _getState.isDensePadding;
 
   var handleToggleDensePadding = function handleToggleDensePadding(event) {
-    onHandleToggleDensePadding == null ? void 0 : onHandleToggleDensePadding({
+    onIsDensePaddingChanged == null ? void 0 : onIsDensePaddingChanged({
       event: event,
       isDensePadding: !isDensePadding,
       instance: instance
@@ -5189,14 +5193,14 @@ var MRT_ToggleFiltersButton = function MRT_ToggleFiltersButton(_ref) {
       FilterListIcon = _instance$options$ico.FilterListIcon,
       FilterListOffIcon = _instance$options$ico.FilterListOffIcon,
       localization = _instance$options.localization,
-      onHandleToggleShowFilters = _instance$options.onHandleToggleShowFilters,
+      onShowFiltersChanged = _instance$options.onShowFiltersChanged,
       setShowFilters = instance.setShowFilters;
 
   var _getState = getState(),
       showFilters = _getState.showFilters;
 
   var handleToggleShowFilters = function handleToggleShowFilters(event) {
-    onHandleToggleShowFilters == null ? void 0 : onHandleToggleShowFilters({
+    onShowFiltersChanged == null ? void 0 : onShowFiltersChanged({
       event: event,
       showFilters: !showFilters,
       instance: instance
@@ -5226,7 +5230,7 @@ var MRT_ToggleGlobalFilterButton = function MRT_ToggleGlobalFilterButton(_ref) {
       tableId = _instance$options.tableId,
       localization = _instance$options.localization,
       muiSearchTextFieldProps = _instance$options.muiSearchTextFieldProps,
-      onHandleToggleShowGlobalFilter = _instance$options.onHandleToggleShowGlobalFilter,
+      onShowGlobalFilterChanged = _instance$options.onShowGlobalFilterChanged,
       setShowGlobalFilter = instance.setShowGlobalFilter;
 
   var _getState = getState(),
@@ -5237,7 +5241,7 @@ var MRT_ToggleGlobalFilterButton = function MRT_ToggleGlobalFilterButton(_ref) {
   }) : muiSearchTextFieldProps;
 
   var handleToggleSearch = function handleToggleSearch(event) {
-    onHandleToggleShowGlobalFilter == null ? void 0 : onHandleToggleShowGlobalFilter({
+    onShowGlobalFilterChanged == null ? void 0 : onShowGlobalFilterChanged({
       event: event,
       showGlobalFilter: !showGlobalFilter,
       instance: instance
@@ -5269,7 +5273,8 @@ var MRT_SearchTextField = function MRT_SearchTextField(_ref) {
       tableId = _instance$options.tableId,
       localization = _instance$options.localization,
       muiSearchTextFieldProps = _instance$options.muiSearchTextFieldProps,
-      onHandleGlobalFilterValueChange = _instance$options.onHandleGlobalFilterValueChange;
+      onGlobalFilterValueChanged = _instance$options.onGlobalFilterValueChanged,
+      onGlobalFilterValueChangedDebounced = _instance$options.onGlobalFilterValueChangedDebounced;
 
   var _getState = getState(),
       globalFilter = _getState.globalFilter,
@@ -5283,15 +5288,24 @@ var MRT_SearchTextField = function MRT_SearchTextField(_ref) {
       searchValue = _useState2[0],
       setSearchValue = _useState2[1];
 
-  var handleChange = React.useCallback(material.debounce(function (event) {
+  var handleChangeDebounced = React.useCallback(material.debounce(function (event) {
     var _event$target$value;
 
     setGlobalFilter((_event$target$value = event.target.value) != null ? _event$target$value : undefined);
-    onHandleGlobalFilterValueChange == null ? void 0 : onHandleGlobalFilterValueChange({
+    onGlobalFilterValueChangedDebounced == null ? void 0 : onGlobalFilterValueChangedDebounced({
       event: event,
       instance: instance
     });
-  }, 200), []);
+  }, 250), []);
+
+  var handleChange = function handleChange(event) {
+    setSearchValue(event.target.value);
+    handleChangeDebounced(event);
+    onGlobalFilterValueChanged == null ? void 0 : onGlobalFilterValueChanged({
+      event: event,
+      instance: instance
+    });
+  };
 
   var handleGlobalFilterMenuOpen = function handleGlobalFilterMenuOpen(event) {
     setAnchorEl(event.currentTarget);
@@ -5311,10 +5325,7 @@ var MRT_SearchTextField = function MRT_SearchTextField(_ref) {
   }, React__default.createElement(material.TextField, Object.assign({
     id: "mrt-" + tableId + "-search-text-field",
     placeholder: localization.search,
-    onChange: function onChange(event) {
-      setSearchValue(event.target.value);
-      handleChange(event);
-    },
+    onChange: handleChange,
     value: searchValue != null ? searchValue : '',
     variant: "standard",
     InputProps: {
@@ -5671,19 +5682,22 @@ var MRT_ToolbarBottom = function MRT_ToolbarBottom(_ref) {
 };
 
 var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
-  var _localization$filterB, _localization$filterM, _localization$, _localization$clearFi, _columnDef$filterSele;
+  var _localization$filterB, _columnDef$enabledCol, _allowedColumnFilterO, _localization$filterM, _localization$, _allowedColumnFilterO2, _localization$clearFi, _columnDef$filterSele;
 
   var header = _ref.header,
       inputIndex = _ref.inputIndex,
       instance = _ref.instance;
   var getState = instance.getState,
       _instance$options = instance.options,
+      enabledColumnFilterOptions = _instance$options.enabledColumnFilterOptions,
       _instance$options$ico = _instance$options.icons,
       FilterListIcon = _instance$options$ico.FilterListIcon,
       CloseIcon = _instance$options$ico.CloseIcon,
-      tableId = _instance$options.tableId,
       localization = _instance$options.localization,
       muiTableHeadCellFilterTextFieldProps = _instance$options.muiTableHeadCellFilterTextFieldProps,
+      onColumnFilterValueChanged = _instance$options.onColumnFilterValueChanged,
+      onColumnFilterValueChangedDebounced = _instance$options.onColumnFilterValueChangedDebounced,
+      tableId = _instance$options.tableId,
       setCurrentFilterFns = instance.setCurrentFilterFns;
   var column = header.column;
   var columnDef = column.columnDef;
@@ -5715,14 +5729,44 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
       setFilterValue = _useState2[1];
 
   var handleChangeDebounced = React.useCallback(material.debounce(function (event) {
-    var _event$target$value;
+    if (inputIndex !== undefined) {
+      column.setFilterValue(function (old) {
+        var newFilterValues = old != null ? old : ['', ''];
+        newFilterValues[inputIndex] = event.target.value;
+        return newFilterValues;
+      });
+    } else {
+      var _event$target$value;
+
+      column.setFilterValue((_event$target$value = event.target.value) != null ? _event$target$value : undefined);
+    }
+
+    onColumnFilterValueChangedDebounced == null ? void 0 : onColumnFilterValueChangedDebounced({
+      column: column,
+      event: event,
+      filterValue: event.target.value
+    });
+    columnDef.onColumnFilterValueChangedDebounced == null ? void 0 : columnDef.onColumnFilterValueChangedDebounced({
+      column: column,
+      event: event,
+      filterValue: event.target.value
+    });
+  }, 200), []);
 
-    return inputIndex !== undefined ? column.setFilterValue(function (old) {
-      var newFilterValues = old != null ? old : ['', ''];
-      newFilterValues[inputIndex] = event.target.value;
-      return newFilterValues;
-    }) : column.setFilterValue((_event$target$value = event.target.value) != null ? _event$target$value : undefined);
-  }, 150), []);
+  var handleChange = function handleChange(event) {
+    setFilterValue(event.target.value);
+    handleChangeDebounced(event);
+    onColumnFilterValueChanged == null ? void 0 : onColumnFilterValueChanged({
+      column: column,
+      event: event,
+      filterValue: event.target.value
+    });
+    columnDef.onColumnFilterValueChanged == null ? void 0 : columnDef.onColumnFilterValueChanged({
+      column: column,
+      event: event,
+      filterValue: event.target.value
+    });
+  };
 
   var handleFilterMenuOpen = function handleFilterMenuOpen(event) {
     setAnchorEl(event.currentTarget);
@@ -5765,6 +5809,7 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
   var filterChipLabel = !(filterFn instanceof Function) && ['empty', 'notEmpty'].includes(filterFn) ? //@ts-ignore
   localization["filter" + (filterFn.charAt(0).toUpperCase() + filterFn.slice(1))] : '';
   var filterPlaceholder = inputIndex === undefined ? (_localization$filterB = localization.filterByColumn) == null ? void 0 : _localization$filterB.replace('{column}', String(columnDef.header)) : inputIndex === 0 ? localization.min : inputIndex === 1 ? localization.max : '';
+  var allowedColumnFilterOptions = (_columnDef$enabledCol = columnDef == null ? void 0 : columnDef.enabledColumnFilterOptions) != null ? _columnDef$enabledCol : enabledColumnFilterOptions;
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(material.TextField, Object.assign({
     fullWidth: true,
     id: filterId,
@@ -5776,7 +5821,7 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
       },
       title: filterPlaceholder
     },
-    helperText: !inputIndex ? React__default.createElement("label", {
+    helperText: !inputIndex && (allowedColumnFilterOptions === undefined || ((_allowedColumnFilterO = allowedColumnFilterOptions == null ? void 0 : allowedColumnFilterOptions.length) != null ? _allowedColumnFilterO : 0) > 0) ? React__default.createElement("label", {
       htmlFor: filterId
     }, filterFn instanceof Function ? (_localization$filterM = localization.filterMode.replace('{filterType}', // @ts-ignore
     (_localization$ = localization["filter" + (filterFn.name.charAt(0).toUpperCase() + filterFn.name.slice(1))]) != null ? _localization$ : '')) != null ? _localization$filterM : '' : localization.filterMode.replace('{filterType}', // @ts-ignore
@@ -5791,10 +5836,7 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
     label: isSelectFilter && !filterValue ? filterPlaceholder : undefined,
     margin: "none",
     placeholder: filterChipLabel || isSelectFilter ? undefined : filterPlaceholder,
-    onChange: function onChange(event) {
-      setFilterValue(event.target.value);
-      handleChangeDebounced(event);
-    },
+    onChange: handleChange,
     onClick: function onClick(e) {
       return e.stopPropagation();
     },
@@ -5802,7 +5844,7 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
     value: filterValue != null ? filterValue : '',
     variant: "standard",
     InputProps: {
-      startAdornment: !isSelectFilter && !inputIndex && React__default.createElement(material.InputAdornment, {
+      startAdornment: !isSelectFilter && !inputIndex && (allowedColumnFilterOptions === undefined || ((_allowedColumnFilterO2 = allowedColumnFilterOptions == null ? void 0 : allowedColumnFilterOptions.length) != null ? _allowedColumnFilterO2 : 0) > 0) && React__default.createElement(material.InputAdornment, {
         position: "start"
       }, React__default.createElement(material.Tooltip, {
         arrow: true,
@@ -6814,8 +6856,8 @@ var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
       tableId = _instance$options.tableId,
       enableEditing = _instance$options.enableEditing,
       muiTableBodyCellEditTextFieldProps = _instance$options.muiTableBodyCellEditTextFieldProps,
-      onHandleCellEditBlur = _instance$options.onHandleCellEditBlur,
-      onHandleCellEditChange = _instance$options.onHandleCellEditChange,
+      onCellEditBlur = _instance$options.onCellEditBlur,
+      onCellEditChanged = _instance$options.onCellEditChanged,
       setCurrentEditingCell = instance.setCurrentEditingCell,
       setCurrentEditingRow = instance.setCurrentEditingRow;
 
@@ -6829,12 +6871,12 @@ var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
 
   var handleChange = function handleChange(event) {
     setValue(event.target.value);
-    columnDef.onHandleCellEditChange == null ? void 0 : columnDef.onHandleCellEditChange({
+    columnDef.onCellEditChanged == null ? void 0 : columnDef.onCellEditChanged({
       event: event,
       cell: cell,
       instance: instance
     });
-    onHandleCellEditChange == null ? void 0 : onHandleCellEditChange({
+    onCellEditChanged == null ? void 0 : onCellEditChanged({
       event: event,
       cell: cell,
       instance: instance
@@ -6849,12 +6891,12 @@ var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
     }
 
     setCurrentEditingCell(null);
-    columnDef.onHandleCellEditBlur == null ? void 0 : columnDef.onHandleCellEditBlur({
+    columnDef.onCellEditBlur == null ? void 0 : columnDef.onCellEditBlur({
       event: event,
       cell: cell,
       instance: instance
     });
-    onHandleCellEditBlur == null ? void 0 : onHandleCellEditBlur({
+    onCellEditBlur == null ? void 0 : onCellEditBlur({
       event: event,
       cell: cell,
       instance: instance
@@ -6973,7 +7015,7 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
       enableRowNumbers = _instance$options.enableRowNumbers,
       muiTableBodyCellProps = _instance$options.muiTableBodyCellProps,
       muiTableBodyCellSkeletonProps = _instance$options.muiTableBodyCellSkeletonProps,
-      onHandleCellClick = _instance$options.onHandleCellClick,
+      onCellClick = _instance$options.onCellClick,
       rowNumberMode = _instance$options.rowNumberMode,
       tableId = _instance$options.tableId,
       setColumnOrder = instance.setColumnOrder,
@@ -7045,7 +7087,7 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
 
   return React__default.createElement(material.TableCell, Object.assign({
     onClick: function onClick(event) {
-      return onHandleCellClick == null ? void 0 : onHandleCellClick({
+      return onCellClick == null ? void 0 : onCellClick({
         event: event,
         cell: cell,
         instance: instance
@@ -7112,7 +7154,7 @@ var MRT_TableDetailPanel = function MRT_TableDetailPanel(_ref) {
       _instance$options = instance.options,
       muiTableBodyRowProps = _instance$options.muiTableBodyRowProps,
       muiTableDetailPanelProps = _instance$options.muiTableDetailPanelProps,
-      onHandleDetailPanelClick = _instance$options.onHandleDetailPanelClick,
+      onDetailPanelClick = _instance$options.onDetailPanelClick,
       renderDetailPanel = _instance$options.renderDetailPanel;
   var tableRowProps = muiTableBodyRowProps instanceof Function ? muiTableBodyRowProps({
     row: row,
@@ -7125,7 +7167,7 @@ var MRT_TableDetailPanel = function MRT_TableDetailPanel(_ref) {
   return React__default.createElement(material.TableRow, Object.assign({}, tableRowProps), React__default.createElement(material.TableCell, Object.assign({
     colSpan: getVisibleLeafColumns().length,
     onClick: function onClick(event) {
-      return onHandleDetailPanelClick == null ? void 0 : onHandleDetailPanelClick({
+      return onDetailPanelClick == null ? void 0 : onDetailPanelClick({
         event: event,
         row: row,
         instance: instance
@@ -7154,7 +7196,7 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
   var getIsSomeColumnsPinned = instance.getIsSomeColumnsPinned,
       _instance$options = instance.options,
       muiTableBodyRowProps = _instance$options.muiTableBodyRowProps,
-      onHandleRowClick = _instance$options.onHandleRowClick,
+      onRowClick = _instance$options.onRowClick,
       renderDetailPanel = _instance$options.renderDetailPanel;
   var tableRowProps = muiTableBodyRowProps instanceof Function ? muiTableBodyRowProps({
     row: row,
@@ -7163,7 +7205,7 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(material.TableRow, Object.assign({
     hover: true,
     onClick: function onClick(event) {
-      return onHandleRowClick == null ? void 0 : onHandleRowClick({
+      return onRowClick == null ? void 0 : onRowClick({
         event: event,
         row: row,
         instance: instance
@@ -7560,10 +7602,11 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       })
     );
   }, []);
-  var displayColumns = React.useMemo(function () {
+
+  var _useMemo = React.useMemo(function () {
     var _props$localization, _props$localization2, _props$localization3, _props$localization5;
 
-    return [showActionColumn && createDisplayColumn(table, {
+    var leadingDisplayColumns = [showActionColumn && createDisplayColumn(table, {
       Cell: function Cell(_ref3) {
         var cell = _ref3.cell;
         return React__default.createElement(MRT_ToggleRowActionMenuButton, {
@@ -7629,11 +7672,23 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       muiTableHeadCellProps: props.muiTableHeadCellProps,
       size: 50
     })].filter(Boolean);
-  }, [props.editingMode, props.enableEditing, props.enableExpandAll, props.enableExpanding, props.enableGrouping, props.enableRowActions, props.enableRowNumbers, props.enableRowSelection, props.enableSelectAll, props.localization, table]);
+    var trailingDisplayColumns = [];
+
+    if (props.enableRowActions && props.positionActionsColumn === 'last') {
+      trailingDisplayColumns.push.apply(trailingDisplayColumns, leadingDisplayColumns.splice(leadingDisplayColumns.findIndex(function (col) {
+        return col.id === 'mrt-row-actions';
+      }), 1));
+    }
+
+    return [leadingDisplayColumns, trailingDisplayColumns];
+  }, [props.editingMode, props.enableEditing, props.enableExpandAll, props.enableExpanding, props.enableGrouping, props.enableRowActions, props.enableRowNumbers, props.enableRowSelection, props.enableSelectAll, props.localization, props.muiTableBodyCellProps, props.muiTableHeadCellProps, props.positionActionsColumn, table]),
+      leadingDisplayColumns = _useMemo[0],
+      trailingDisplayColumns = _useMemo[1];
+
   var columns = React.useMemo(function () {
-    return [].concat(displayColumns, props.columns.map(function (column) {
+    return [].concat(leadingDisplayColumns, props.columns.map(function (column) {
       return column.columns ? createGroup(table, column, currentFilterFns) : createDataColumn(table, column, currentFilterFns);
-    }));
+    }), trailingDisplayColumns);
   }, [table, props.columns, currentFilterFns]);
   var data = React.useMemo(function () {
     var _props$state, _props$state2;