material-react-table 0.7.2 → 0.7.3

package/dist/material-react-table.esm.js

@@ -2190,8 +2190,12 @@ var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
       tableInstance = _ref.tableInstance;
   var getState = tableInstance.getState,
       _tableInstance$option = tableInstance.options,
+      idPrefix = _tableInstance$option.idPrefix,
       enableEditing = _tableInstance$option.enableEditing,
       muiTableBodyCellEditTextFieldProps = _tableInstance$option.muiTableBodyCellEditTextFieldProps,
+      onCellEditBlur = _tableInstance$option.onCellEditBlur,
+      onCellEditChange = _tableInstance$option.onCellEditChange,
+      setCurrentEditingCell = tableInstance.setCurrentEditingCell,
       setCurrentEditingRow = tableInstance.setCurrentEditingRow;
 
   var _useState = useState(cell.value),
@@ -2208,6 +2212,11 @@ var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
       cell: cell,
       tableInstance: tableInstance
     });
+    onCellEditChange == null ? void 0 : onCellEditChange({
+      event: event,
+      cell: cell,
+      tableInstance: tableInstance
+    });
   };
 
   var handleBlur = function handleBlur(event) {
@@ -2216,11 +2225,17 @@ var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
       setCurrentEditingRow(_extends({}, getState().currentEditingRow));
     }
 
+    setCurrentEditingCell(null);
     column.onCellEditBlur == null ? void 0 : column.onCellEditBlur({
       event: event,
       cell: cell,
       tableInstance: tableInstance
     });
+    onCellEditBlur == null ? void 0 : onCellEditBlur({
+      event: event,
+      cell: cell,
+      tableInstance: tableInstance
+    });
   };
 
   var mTableBodyCellEditTextFieldProps = muiTableBodyCellEditTextFieldProps instanceof Function ? muiTableBodyCellEditTextFieldProps({
@@ -2242,6 +2257,7 @@ var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
   }
 
   return React.createElement(TextField, Object.assign({
+    id: "mrt-" + idPrefix + "-edit-cell-text-field-" + cell.id,
     margin: "dense",
     onBlur: handleBlur,
     onChange: handleChange,
@@ -2302,6 +2318,7 @@ var MRT_CopyButton = function MRT_CopyButton(_ref) {
       backgroundColor: 'transparent',
       border: 'none',
       color: 'inherit',
+      cursor: 'copy',
       fontFamily: 'inherit',
       fontSize: 'inherit',
       letterSpacing: 'inherit',
@@ -2322,15 +2339,19 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
   var getIsSomeColumnsPinned = tableInstance.getIsSomeColumnsPinned,
       getState = tableInstance.getState,
       _tableInstance$option = tableInstance.options,
+      editingMode = _tableInstance$option.editingMode,
       enableClickToCopy = _tableInstance$option.enableClickToCopy,
-      enablePinning = _tableInstance$option.enablePinning,
       enableEditing = _tableInstance$option.enableEditing,
+      enablePinning = _tableInstance$option.enablePinning,
+      idPrefix = _tableInstance$option.idPrefix,
       isLoading = _tableInstance$option.isLoading,
       muiTableBodyCellProps = _tableInstance$option.muiTableBodyCellProps,
       muiTableBodyCellSkeletonProps = _tableInstance$option.muiTableBodyCellSkeletonProps,
-      onCellClick = _tableInstance$option.onCellClick;
+      onCellClick = _tableInstance$option.onCellClick,
+      setCurrentEditingCell = tableInstance.setCurrentEditingCell;
 
   var _getState = getState(),
+      currentEditingCell = _getState.currentEditingCell,
       currentEditingRow = _getState.currentEditingRow,
       isDensePadding = _getState.isDensePadding;
 
@@ -2350,6 +2371,23 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
   var skeletonWidth = useMemo(function () {
     return column.columnDefType === 'display' ? column.getWidth() / 2 : Math.random() * (column.getWidth() - column.getWidth() / 3) + column.getWidth() / 3;
   }, [column.columnDefType, column.getWidth()]);
+  var isEditable = (enableEditing || column.enableEditing) && column.enableEditing !== false;
+  var isEditing = isEditable && (editingMode === 'table' || (currentEditingRow == null ? void 0 : currentEditingRow.id) === row.id || (currentEditingCell == null ? void 0 : currentEditingCell.id) === cell.id);
+
+  var handleDoubleClick = function handleDoubleClick(_event) {
+    if ((enableEditing || column.enableEditing) && column.enableEditing !== false && editingMode === 'cell') {
+      setCurrentEditingCell(cell);
+      setTimeout(function () {
+        var textField = document.getElementById("mrt-" + idPrefix + "-edit-cell-text-field-" + cell.id);
+
+        if (textField) {
+          textField.focus();
+          textField.select();
+        }
+      }, 200);
+    }
+  };
+
   return React.createElement(TableCell, Object.assign({
     onClick: function onClick(event) {
       return onCellClick == null ? void 0 : onCellClick({
@@ -2357,9 +2395,11 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
         cell: cell,
         tableInstance: tableInstance
       });
-    }
+    },
+    onDoubleClick: handleDoubleClick
   }, tableCellProps, {
     sx: _extends({
+      cursor: isEditable && editingMode === 'cell' ? 'pointer' : 'text',
       maxWidth: "min(" + column.getWidth() + "px, fit-content)",
       minWidth: "max(" + column.getWidth() + "px, " + column.minWidth + "px)",
       p: isDensePadding ? column.columnDefType === 'display' ? '0 0.5rem' : '0.5rem' : column.columnDefType === 'display' ? '0.5rem 0.75rem' : '1rem',
@@ -2375,7 +2415,7 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
   }, muiTableBodyCellSkeletonProps)) : column.columnDefType === 'display' ? column.Cell == null ? void 0 : column.Cell({
     cell: cell,
     tableInstance: tableInstance
-  }) : cell.getIsPlaceholder() || row.getIsGrouped() && column.id !== row.groupingColumnId ? null : cell.getIsAggregated() ? cell.renderAggregatedCell() : enableEditing && column.enableEditing !== false && (currentEditingRow == null ? void 0 : currentEditingRow.id) === row.id ? React.createElement(MRT_EditCellTextField, {
+  }) : cell.getIsPlaceholder() || row.getIsGrouped() && column.id !== row.groupingColumnId ? null : cell.getIsAggregated() ? cell.renderAggregatedCell() : isEditing ? React.createElement(MRT_EditCellTextField, {
     cell: cell,
     tableInstance: tableInstance
   }) : (enableClickToCopy || column.enableClickToCopy) && column.enableClickToCopy !== false ? React.createElement(React.Fragment, null, React.createElement(MRT_CopyButton, {
@@ -2832,7 +2872,7 @@ var createDisplayColumn = function createDisplayColumn(table, column) {
 };
 
 var MRT_TableRoot = function MRT_TableRoot(props) {
-  var _props$initialState$i, _props$initialState, _props$initialState$i2, _props$initialState2, _props$initialState$s, _props$initialState3, _props$initialState$s2, _props$initialState4, _props$initialState$p, _props$initialState5, _props$initialState5$, _props$initialState$p2, _props$initialState6, _props$initialState6$, _props$initialState$p3, _props$initialState7, _props$initialState7$, _props$globalFilterTy;
+  var _props$initialState$c, _props$initialState, _props$initialState$c2, _props$initialState2, _props$initialState$i, _props$initialState3, _props$initialState$i2, _props$initialState4, _props$initialState$s, _props$initialState5, _props$initialState$s2, _props$initialState6, _props$initialState$p, _props$initialState7, _props$initialState7$, _props$initialState$p2, _props$initialState8, _props$initialState8$, _props$initialState$p3, _props$initialState9, _props$initialState9$, _props$globalFilterTy;
 
   var _useState = useState(props.idPrefix),
       idPrefix = _useState[0],
@@ -2844,49 +2884,53 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
     return setIdPrefix((_props$idPrefix = props.idPrefix) != null ? _props$idPrefix : Math.random().toString(36).substring(2, 9));
   }, [props.idPrefix]);
 
-  var _useState2 = useState(null),
-      currentEditingRow = _useState2[0],
-      setCurrentEditingRow = _useState2[1];
+  var _useState2 = useState((_props$initialState$c = (_props$initialState = props.initialState) == null ? void 0 : _props$initialState.currentEditingCell) != null ? _props$initialState$c : null),
+      currentEditingCell = _useState2[0],
+      setCurrentEditingCell = _useState2[1];
+
+  var _useState3 = useState((_props$initialState$c2 = (_props$initialState2 = props.initialState) == null ? void 0 : _props$initialState2.currentEditingRow) != null ? _props$initialState$c2 : null),
+      currentEditingRow = _useState3[0],
+      setCurrentEditingRow = _useState3[1];
 
-  var _useState3 = useState((_props$initialState$i = (_props$initialState = props.initialState) == null ? void 0 : _props$initialState.isDensePadding) != null ? _props$initialState$i : false),
-      isDensePadding = _useState3[0],
-      setIsDensePadding = _useState3[1];
+  var _useState4 = useState((_props$initialState$i = (_props$initialState3 = props.initialState) == null ? void 0 : _props$initialState3.isDensePadding) != null ? _props$initialState$i : false),
+      isDensePadding = _useState4[0],
+      setIsDensePadding = _useState4[1];
 
-  var _useState4 = useState((_props$initialState$i2 = (_props$initialState2 = props.initialState) == null ? void 0 : _props$initialState2.isFullScreen) != null ? _props$initialState$i2 : false),
-      isFullScreen = _useState4[0],
-      setIsFullScreen = _useState4[1];
+  var _useState5 = useState((_props$initialState$i2 = (_props$initialState4 = props.initialState) == null ? void 0 : _props$initialState4.isFullScreen) != null ? _props$initialState$i2 : false),
+      isFullScreen = _useState5[0],
+      setIsFullScreen = _useState5[1];
 
-  var _useState5 = useState((_props$initialState$s = (_props$initialState3 = props.initialState) == null ? void 0 : _props$initialState3.showFilters) != null ? _props$initialState$s : false),
-      showFilters = _useState5[0],
-      setShowFilters = _useState5[1];
+  var _useState6 = useState((_props$initialState$s = (_props$initialState5 = props.initialState) == null ? void 0 : _props$initialState5.showFilters) != null ? _props$initialState$s : false),
+      showFilters = _useState6[0],
+      setShowFilters = _useState6[1];
 
-  var _useState6 = useState((_props$initialState$s2 = (_props$initialState4 = props.initialState) == null ? void 0 : _props$initialState4.showGlobalFilter) != null ? _props$initialState$s2 : false),
-      showGlobalFilter = _useState6[0],
-      setShowGlobalFilter = _useState6[1];
+  var _useState7 = useState((_props$initialState$s2 = (_props$initialState6 = props.initialState) == null ? void 0 : _props$initialState6.showGlobalFilter) != null ? _props$initialState$s2 : false),
+      showGlobalFilter = _useState7[0],
+      setShowGlobalFilter = _useState7[1];
 
-  var _useState7 = useState({
-    pageIndex: (_props$initialState$p = (_props$initialState5 = props.initialState) == null ? void 0 : (_props$initialState5$ = _props$initialState5.pagination) == null ? void 0 : _props$initialState5$.pageIndex) != null ? _props$initialState$p : 0,
-    pageSize: (_props$initialState$p2 = (_props$initialState6 = props.initialState) == null ? void 0 : (_props$initialState6$ = _props$initialState6.pagination) == null ? void 0 : _props$initialState6$.pageSize) != null ? _props$initialState$p2 : 10,
-    pageCount: (_props$initialState$p3 = (_props$initialState7 = props.initialState) == null ? void 0 : (_props$initialState7$ = _props$initialState7.pagination) == null ? void 0 : _props$initialState7$.pageCount) != null ? _props$initialState$p3 : -1
+  var _useState8 = useState({
+    pageIndex: (_props$initialState$p = (_props$initialState7 = props.initialState) == null ? void 0 : (_props$initialState7$ = _props$initialState7.pagination) == null ? void 0 : _props$initialState7$.pageIndex) != null ? _props$initialState$p : 0,
+    pageSize: (_props$initialState$p2 = (_props$initialState8 = props.initialState) == null ? void 0 : (_props$initialState8$ = _props$initialState8.pagination) == null ? void 0 : _props$initialState8$.pageSize) != null ? _props$initialState$p2 : 10,
+    pageCount: (_props$initialState$p3 = (_props$initialState9 = props.initialState) == null ? void 0 : (_props$initialState9$ = _props$initialState9.pagination) == null ? void 0 : _props$initialState9$.pageCount) != null ? _props$initialState$p3 : -1
   }),
-      pagination = _useState7[0],
-      setPagination = _useState7[1];
+      pagination = _useState8[0],
+      setPagination = _useState8[1];
 
-  var _useState8 = useState(function () {
+  var _useState9 = useState(function () {
     return Object.assign.apply(Object, [{}].concat(getAllLeafColumnDefs(props.columns).map(function (c) {
-      var _ref, _c$filter, _props$initialState8, _props$initialState8$, _c$filterSelectOption, _ref2;
+      var _ref, _c$filter, _props$initialState10, _props$initialState11, _c$filterSelectOption, _ref2;
 
-      return _ref2 = {}, _ref2[c.id] = (_ref = (_c$filter = c.filter) != null ? _c$filter : props == null ? void 0 : (_props$initialState8 = props.initialState) == null ? void 0 : (_props$initialState8$ = _props$initialState8.columnFilters) == null ? void 0 : _props$initialState8$.find(function (cf) {
+      return _ref2 = {}, _ref2[c.id] = (_ref = (_c$filter = c.filter) != null ? _c$filter : props == null ? void 0 : (_props$initialState10 = props.initialState) == null ? void 0 : (_props$initialState11 = _props$initialState10.columnFilters) == null ? void 0 : _props$initialState11.find(function (cf) {
         return cf.id === c.id;
       })) != null ? _ref : !!((_c$filterSelectOption = c.filterSelectOptions) != null && _c$filterSelectOption.length) ? MRT_FILTER_TYPE.EQUALS : MRT_FILTER_TYPE.BEST_MATCH, _ref2;
     })));
   }),
-      currentFilterTypes = _useState8[0],
-      setCurrentFilterTypes = _useState8[1];
+      currentFilterTypes = _useState9[0],
+      setCurrentFilterTypes = _useState9[1];
 
-  var _useState9 = useState((_props$globalFilterTy = props.globalFilterType) != null ? _props$globalFilterTy : MRT_FILTER_TYPE.BEST_MATCH_FIRST),
-      currentGlobalFilterType = _useState9[0],
-      setCurrentGlobalFilterType = _useState9[1];
+  var _useState10 = useState((_props$globalFilterTy = props.globalFilterType) != null ? _props$globalFilterTy : MRT_FILTER_TYPE.BEST_MATCH_FIRST),
+      currentGlobalFilterType = _useState10[0],
+      setCurrentGlobalFilterType = _useState10[1];
 
   var table = useMemo(function () {
     return createTable();
@@ -2894,7 +2938,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
   var displayColumns = useMemo(function () {
     var _props$localization, _props$localization2, _props$localization3, _props$localization5;
 
-    return [(props.enableRowActions || props.enableEditing) && createDisplayColumn(table, {
+    return [(props.enableRowActions || props.enableEditing && props.editingMode === 'row') && createDisplayColumn(table, {
       Cell: function Cell(_ref3) {
         var cell = _ref3.cell;
         return React.createElement(MRT_ToggleRowActionMenuButton, {
@@ -2957,7 +3001,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       width: 40,
       minWidth: 40
     })].filter(Boolean);
-  }, [props.enableEditing, props.enableExpandAll, props.enableExpanded, props.enableGrouping, props.enableRowActions, props.enableRowNumbers, props.enableRowSelection, props.enableSelectAll, props.localization, table]);
+  }, [props.editingMode, props.enableEditing, props.enableExpandAll, props.enableExpanded, props.enableGrouping, props.enableRowActions, props.enableRowNumbers, props.enableRowSelection, props.enableSelectAll, props.localization, table]);
   var columns = useMemo(function () {
     return table.createColumns([].concat(displayColumns, props.columns.map(function (column) {
       return column.columns ? createGroup(table, column, currentFilterTypes) : createDataColumn(table, column, currentFilterTypes);
@@ -2997,6 +3041,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
     columns: columns,
     data: data,
     state: _extends({
+      currentEditingCell: currentEditingCell,
       currentEditingRow: currentEditingRow,
       currentFilterTypes: currentFilterTypes,
       currentGlobalFilterType: currentGlobalFilterType,
@@ -3008,6 +3053,9 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       showGlobalFilter: showGlobalFilter
     }, props.state)
   })), {
+    //@ts-ignore
+    setCurrentEditingCell: setCurrentEditingCell,
+    //@ts-ignore
     setCurrentEditingRow: setCurrentEditingRow,
     setCurrentFilterTypes: setCurrentFilterTypes,
     setCurrentGlobalFilterType: setCurrentGlobalFilterType,
@@ -3035,12 +3083,14 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
   }));
 };
 
-var _excluded$5 = ["autoResetExpanded", "columnResizeMode", "enableColumnActions", "enableColumnFilters", "enableColumnResizing", "enableDensePaddingToggle", "enableExpandAll", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableHiding", "enableMultiRowSelection", "enablePagination", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarBottom", "enableToolbarInternalActions", "enableToolbarTop", "icons", "localization", "positionActionsColumn", "positionPagination", "positionToolbarActions", "positionToolbarAlertBanner"];
+var _excluded$5 = ["autoResetExpanded", "columnResizeMode", "editingMode", "enableColumnActions", "enableColumnFilters", "enableColumnResizing", "enableDensePaddingToggle", "enableExpandAll", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableHiding", "enableMultiRowSelection", "enablePagination", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarBottom", "enableToolbarInternalActions", "enableToolbarTop", "icons", "localization", "positionActionsColumn", "positionPagination", "positionToolbarActions", "positionToolbarAlertBanner"];
 var MaterialReactTable = (function (_ref) {
   var _ref$autoResetExpande = _ref.autoResetExpanded,
       autoResetExpanded = _ref$autoResetExpande === void 0 ? false : _ref$autoResetExpande,
       _ref$columnResizeMode = _ref.columnResizeMode,
       columnResizeMode = _ref$columnResizeMode === void 0 ? 'onEnd' : _ref$columnResizeMode,
+      _ref$editingMode = _ref.editingMode,
+      editingMode = _ref$editingMode === void 0 ? 'row' : _ref$editingMode,
       _ref$enableColumnActi = _ref.enableColumnActions,
       enableColumnActions = _ref$enableColumnActi === void 0 ? true : _ref$enableColumnActi,
       _ref$enableColumnFilt = _ref.enableColumnFilters,
@@ -3094,6 +3144,7 @@ var MaterialReactTable = (function (_ref) {
   return React.createElement(MRT_TableRoot, Object.assign({
     autoResetExpanded: autoResetExpanded,
     columnResizeMode: columnResizeMode,
+    editingMode: editingMode,
     enableColumnActions: enableColumnActions,
     enableColumnResizing: enableColumnResizing,
     enableColumnFilters: enableColumnFilters,