material-react-table 0.7.0-alpha.6 → 0.7.0-alpha.9

package/README.md

@@ -30,11 +30,11 @@ Join the [discord](https://discord.gg/5wqyRx6fnm) server to join in on the devel
 - [x] Column Resizing (work in progress)
 - [x] Custom Icons
 - [x] Custom Styling and internal Mui Components
-- [ ] Data Editing (work in progress)
+- [x] Data Editing
 - [x] Dense Padding Toggle
 - [x] Filtering
 - [x] Fullscreen
-- [ ] Global Search (Advanced search options!)
+- [ ] Global Search (broken in react-table v8 :( ))
 - [x] HeaderGroups
 - [x] Localization i18n
 - [x] Pagination (supports client-side and server-side)

package/dist/MaterialReactTable.d.ts

@@ -1,4 +1,4 @@
-import { ChangeEvent, Dispatch, FC, MouseEvent, ReactNode, SetStateAction } from 'react';
+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, DefaultGenerics, FilterType, Header, HeaderGroup, Options, Overwrite, PaginationState, Row, TableInstance, TableState, VisibilityState } from '@tanstack/react-table';
 import { MRT_Localization } from './localization';
@@ -119,6 +119,11 @@ export declare type MRT_ColumnInterface<D extends Record<string, any> = {}> = Om
         tableInstance: MRT_TableInstance;
         column: MRT_ColumnInstance<D>;
     }) => TableCellProps);
+    onCellEditBlur?: ({ cell, event, tableInstance, }: {
+        event: FocusEvent<HTMLInputElement>;
+        cell: MRT_Cell<D>;
+        tableInstance: MRT_TableInstance<D>;
+    }) => void;
     onCellEditChange?: ({ cell, event, tableInstance, }: {
         event: ChangeEvent<HTMLInputElement>;
         cell: MRT_Cell<D>;
@@ -162,7 +167,7 @@ export declare type MaterialReactTableProps<D extends Record<string, any> = {}>
     enablePagination?: boolean;
     enableRowActions?: boolean;
     enableStickyHeader?: boolean;
-    enableRowEditing?: boolean;
+    enableEditing?: boolean;
     enableRowNumbers?: boolean;
     enableSelectAll?: boolean;
     enabledGlobalFilterTypes?: (MRT_FILTER_TYPE | string)[];
@@ -292,7 +297,7 @@ export declare type MaterialReactTableProps<D extends Record<string, any> = {}>
         row: MRT_Row<D>;
         tableInstance: MRT_TableInstance<D>;
     }) => void;
-    onRowEditSubmit?: ({ row, tableInstance, }: {
+    onEditSubmit?: ({ row, tableInstance, }: {
         row: MRT_Row<D>;
         tableInstance: MRT_TableInstance<D>;
     }) => Promise<void> | void;

package/dist/localization.d.ts

@@ -33,6 +33,7 @@ export interface MRT_Localization {
     pinToLeft: string;
     pinToRight: string;
     rowActions: string;
+    rowNumber: string;
     rowNumbers: string;
     save: string;
     search: string;

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

@@ -105,6 +105,7 @@ var MRT_DefaultLocalization_EN = {
   pinToLeft: 'Pin to left',
   pinToRight: 'Pin to right',
   rowActions: 'Row Actions',
+  rowNumber: '#',
   rowNumbers: 'Row Numbers',
   save: 'Save',
   search: 'Search',
@@ -919,7 +920,7 @@ var MRT_RowActionMenu = function MRT_RowActionMenu(_ref) {
   var getState = tableInstance.getState,
       _tableInstance$option = tableInstance.options,
       EditIcon = _tableInstance$option.icons.EditIcon,
-      enableRowEditing = _tableInstance$option.enableRowEditing,
+      enableEditing = _tableInstance$option.enableEditing,
       localization = _tableInstance$option.localization,
       renderRowActionMenuItems = _tableInstance$option.renderRowActionMenuItems;
 
@@ -935,7 +936,7 @@ var MRT_RowActionMenu = function MRT_RowActionMenu(_ref) {
     MenuListProps: {
       dense: isDensePadding
     }
-  }, enableRowEditing && React__default.createElement(material.MenuItem, {
+  }, enableEditing && React__default.createElement(material.MenuItem, {
     onClick: handleEdit,
     sx: commonMenuItemStyles$1
   }, React__default.createElement(material.Box, {
@@ -958,7 +959,7 @@ var MRT_EditActionButtons = function MRT_EditActionButtons(_ref) {
       CancelIcon = _tableInstance$option2.CancelIcon,
       SaveIcon = _tableInstance$option2.SaveIcon,
       localization = _tableInstance$option.localization,
-      onRowEditSubmit = _tableInstance$option.onRowEditSubmit,
+      onEditSubmit = _tableInstance$option.onEditSubmit,
       setCurrentEditingRow = _tableInstance$option.setCurrentEditingRow;
 
   var _getState = getState(),
@@ -972,7 +973,7 @@ var MRT_EditActionButtons = function MRT_EditActionButtons(_ref) {
   };
 
   var handleSave = function handleSave() {
-    onRowEditSubmit == null ? void 0 : onRowEditSubmit({
+    onEditSubmit == null ? void 0 : onEditSubmit({
       row: currentEditingRow != null ? currentEditingRow : row,
       tableInstance: tableInstance
     });
@@ -1015,7 +1016,7 @@ var MRT_ToggleRowActionMenuButton = function MRT_ToggleRowActionMenuButton(_ref)
       tableInstance = _ref.tableInstance;
   var getState = tableInstance.getState,
       _tableInstance$option = tableInstance.options,
-      enableRowEditing = _tableInstance$option.enableRowEditing,
+      enableEditing = _tableInstance$option.enableEditing,
       _tableInstance$option2 = _tableInstance$option.icons,
       EditIcon = _tableInstance$option2.EditIcon,
       MoreHorizIcon = _tableInstance$option2.MoreHorizIcon,
@@ -1037,7 +1038,7 @@ var MRT_ToggleRowActionMenuButton = function MRT_ToggleRowActionMenuButton(_ref)
     setAnchorEl(event.currentTarget);
   };
 
-  var handleEdit = function handleEdit() {
+  var handleStartEditMode = function handleStartEditMode() {
     setCurrentEditingRow(_extends({}, row));
     setAnchorEl(null);
   };
@@ -1048,13 +1049,13 @@ var MRT_ToggleRowActionMenuButton = function MRT_ToggleRowActionMenuButton(_ref)
   })) : row.id === (currentEditingRow == null ? void 0 : currentEditingRow.id) ? React__default.createElement(MRT_EditActionButtons, {
     row: row,
     tableInstance: tableInstance
-  }) : !renderRowActionMenuItems && enableRowEditing ? React__default.createElement(material.Tooltip, {
+  }) : !renderRowActionMenuItems && enableEditing ? React__default.createElement(material.Tooltip, {
     placement: "right",
     arrow: true,
     title: localization.edit
   }, React__default.createElement(material.IconButton, {
     sx: commonIconButtonStyles,
-    onClick: handleEdit
+    onClick: handleStartEditMode
   }, React__default.createElement(EditIcon, null))) : renderRowActionMenuItems ? React__default.createElement(React__default.Fragment, null, React__default.createElement(material.Tooltip, {
     arrow: true,
     enterDelay: 1000,
@@ -1067,7 +1068,7 @@ var MRT_ToggleRowActionMenuButton = function MRT_ToggleRowActionMenuButton(_ref)
     sx: commonIconButtonStyles
   }, React__default.createElement(MoreHorizIcon, null))), React__default.createElement(MRT_RowActionMenu, {
     anchorEl: anchorEl,
-    handleEdit: handleEdit,
+    handleEdit: handleStartEditMode,
     row: row,
     setAnchorEl: setAnchorEl,
     tableInstance: tableInstance
@@ -2152,19 +2153,33 @@ var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
       tableInstance = _ref.tableInstance;
   var getState = tableInstance.getState,
       _tableInstance$option = tableInstance.options,
-      enableRowEditing = _tableInstance$option.enableRowEditing,
-      muiTableBodyCellEditTextFieldProps = _tableInstance$option.muiTableBodyCellEditTextFieldProps;
+      enableEditing = _tableInstance$option.enableEditing,
+      muiTableBodyCellEditTextFieldProps = _tableInstance$option.muiTableBodyCellEditTextFieldProps,
+      setCurrentEditingRow = _tableInstance$option.setCurrentEditingRow;
+
+  var _useState = React.useState(cell.value),
+      value = _useState[0],
+      setValue = _useState[1];
+
   var column = cell.column,
       row = cell.row;
 
   var handleChange = function handleChange(event) {
+    setValue(event.target.value);
+    column.onCellEditChange == null ? void 0 : column.onCellEditChange({
+      event: event,
+      cell: cell,
+      tableInstance: tableInstance
+    });
+  };
+
+  var handleBlur = function handleBlur(event) {
     if (getState().currentEditingRow) {
-      row.values[column.id] = event.target.value; // setCurrentEditingRow({
-      //   ...getState().currentEditingRow,
-      // });
+      row.values[column.id] = value;
+      setCurrentEditingRow(_extends({}, getState().currentEditingRow));
     }
 
-    column.onCellEditChange == null ? void 0 : column.onCellEditChange({
+    column.onCellEditBlur == null ? void 0 : column.onCellEditBlur({
       event: event,
       cell: cell,
       tableInstance: tableInstance
@@ -2182,7 +2197,7 @@ var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
 
   var textFieldProps = _extends({}, mTableBodyCellEditTextFieldProps, mcTableBodyCellEditTextFieldProps);
 
-  if (enableRowEditing && column.enableEditing !== false && column.Edit) {
+  if (enableEditing && column.enableEditing !== false && column.Edit) {
     return React__default.createElement(React__default.Fragment, null, column.Edit == null ? void 0 : column.Edit({
       cell: cell,
       tableInstance: tableInstance
@@ -2191,12 +2206,13 @@ var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
 
   return React__default.createElement(material.TextField, Object.assign({
     margin: "dense",
+    onBlur: handleBlur,
     onChange: handleChange,
     onClick: function onClick(e) {
       return e.stopPropagation();
     },
     placeholder: column.header,
-    value: cell.value,
+    value: value,
     variant: "standard"
   }, textFieldProps));
 };
@@ -2262,7 +2278,7 @@ var MRT_CopyButton = function MRT_CopyButton(_ref) {
 };
 
 var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
-  var _row$subRows, _row$subRows2;
+  var _cell$column$Cell, _cell$column, _row$subRows, _cell$column$Cell2, _cell$column2, _row$subRows2;
 
   var cell = _ref.cell,
       tableInstance = _ref.tableInstance;
@@ -2271,6 +2287,7 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
       _tableInstance$option = tableInstance.options,
       enableClickToCopy = _tableInstance$option.enableClickToCopy,
       enableColumnPinning = _tableInstance$option.enableColumnPinning,
+      enableEditing = _tableInstance$option.enableEditing,
       isLoading = _tableInstance$option.isLoading,
       muiTableBodyCellProps = _tableInstance$option.muiTableBodyCellProps,
       muiTableBodyCellSkeletonProps = _tableInstance$option.muiTableBodyCellSkeletonProps,
@@ -2318,13 +2335,19 @@ 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() : column.enableEditing && (currentEditingRow == null ? void 0 : currentEditingRow.id) === row.id ? React__default.createElement(MRT_EditCellTextField, {
+  }) : 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__default.createElement(MRT_EditCellTextField, {
     cell: cell,
     tableInstance: tableInstance
   }) : (enableClickToCopy || column.enableClickToCopy) && column.enableClickToCopy !== false ? React__default.createElement(React__default.Fragment, null, React__default.createElement(MRT_CopyButton, {
     cell: cell,
     tableInstance: tableInstance
-  }, cell.renderCell()), row.getIsGrouped() && React__default.createElement(React__default.Fragment, null, " (", (_row$subRows = row.subRows) == null ? void 0 : _row$subRows.length, ")")) : React__default.createElement(React__default.Fragment, null, cell.renderCell(), row.getIsGrouped() && React__default.createElement(React__default.Fragment, null, " (", (_row$subRows2 = row.subRows) == null ? void 0 : _row$subRows2.length, ")")));
+  }, (_cell$column$Cell = (_cell$column = cell.column) == null ? void 0 : _cell$column.Cell == null ? void 0 : _cell$column.Cell({
+    cell: cell,
+    tableInstance: tableInstance
+  })) != null ? _cell$column$Cell : cell.renderCell()), row.getIsGrouped() && React__default.createElement(React__default.Fragment, null, " (", (_row$subRows = row.subRows) == null ? void 0 : _row$subRows.length, ")")) : React__default.createElement(React__default.Fragment, null, (_cell$column$Cell2 = (_cell$column2 = cell.column) == null ? void 0 : _cell$column2.Cell == null ? void 0 : _cell$column2.Cell({
+    cell: cell,
+    tableInstance: tableInstance
+  })) != null ? _cell$column$Cell2 : cell.renderCell(), row.getIsGrouped() && React__default.createElement(React__default.Fragment, null, " (", (_row$subRows2 = row.subRows) == null ? void 0 : _row$subRows2.length, ")")));
 };
 
 var MRT_TableDetailPanel = function MRT_TableDetailPanel(_ref) {
@@ -2824,9 +2847,9 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
     return reactTable.createTable();
   }, []);
   var displayColumns = React.useMemo(function () {
-    var _props$localization, _props$localization2, _props$localization3, _props$localization4;
+    var _props$localization, _props$localization2, _props$localization3, _props$localization5;
 
-    return [(props.enableRowActions || props.enableRowEditing) && createDisplayColumn(table, {
+    return [(props.enableRowActions || props.enableEditing) && createDisplayColumn(table, {
       Cell: function Cell(_ref3) {
         var cell = _ref3.cell;
         return React__default.createElement(MRT_ToggleRowActionMenuButton, {
@@ -2879,15 +2902,17 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
         return cell.row.index + 1;
       },
       Header: function Header() {
-        return '#';
+        var _props$localization4;
+
+        return (_props$localization4 = props.localization) == null ? void 0 : _props$localization4.rowNumber;
       },
-      header: (_props$localization4 = props.localization) == null ? void 0 : _props$localization4.rowNumbers,
+      header: (_props$localization5 = props.localization) == null ? void 0 : _props$localization5.rowNumbers,
       id: 'mrt-row-numbers',
       maxWidth: 40,
       width: 40,
       minWidth: 40
     })].filter(Boolean);
-  }, [props.enableExpandAll, props.enableExpanded, props.enableRowActions, props.enableRowEditing, props.enableRowNumbers, props.enableRowSelection, props.enableSelectAll, props.localization]);
+  }, [table, props.enableExpandAll, props.enableExpanded, props.enableRowActions, props.enableGrouping, props.enableEditing, props.enableRowNumbers, props.enableRowSelection, props.enableSelectAll, props.localization]);
   var columns = React.useMemo(function () {
     return table.createColumns([].concat(displayColumns, props.columns.map(function (column) {
       return column.columns ? createGroup(table, column, currentFilterTypes) : createDataColumn(table, column, currentFilterTypes);