UPDATE: Add move/row column to the UI

webapp/IronCalc/src/components/Worksheet/CellContextMenu.tsx

@@ -1,5 +1,7 @@
 import { Menu, MenuItem, styled } from "@mui/material";
 import {
+  ArrowLeftRight,
+  ArrowUpDown,
   BetweenHorizontalStart,
   BetweenVerticalStart,
   ChevronRight,
@@ -26,6 +28,10 @@ interface CellContextMenuProps {
   onUnfreezeRows: () => void;
   onDeleteRow: () => void;
   onDeleteColumn: () => void;
+  onMoveColumnLeft: () => void;
+  onMoveColumnRight: () => void;
+  onMoveRowUp: () => void;
+  onMoveRowDown: () => void;
   row: number;
   column: string;
 }
@@ -46,6 +52,10 @@ const CellContextMenu = (properties: CellContextMenuProps) => {
     onUnfreezeRows,
     onDeleteRow,
     onDeleteColumn,
+    onMoveColumnLeft,
+    onMoveColumnRight,
+    onMoveRowUp,
+    onMoveRowDown,
     row,
     column,
   } = properties;
@@ -58,6 +68,12 @@ const CellContextMenu = (properties: CellContextMenuProps) => {
   const [insertColumnMenuOpen, setInsertColumnMenuOpen] = useState(false);
   const insertColumnRef = useRef(null);
 
+  const [moveRowMenuOpen, setMoveRowMenuOpen] = useState(false);
+  const moveRowRef = useRef(null);
+
+  const [moveColumnMenuOpen, setMoveColumnMenuOpen] = useState(false);
+  const moveColumnRef = useRef(null);
+
   return (
     <>
       <StyledMenu
@@ -90,6 +106,23 @@ const CellContextMenu = (properties: CellContextMenuProps) => {
           <ChevronRightStyled />
         </StyledMenuItem>
         <MenuDivider />
+        <StyledMenuItem
+          ref={moveRowRef}
+          onClick={() => setMoveRowMenuOpen(true)}
+        >
+          <ArrowUpDownStyled />
+          <ItemNameStyled>{t("cell_context.move_row")}</ItemNameStyled>
+          <ChevronRightStyled />
+        </StyledMenuItem>
+        <StyledMenuItem
+          ref={moveColumnRef}
+          onClick={() => setMoveColumnMenuOpen(true)}
+        >
+          <ArrowLeftRightStyled />
+          <ItemNameStyled>{t("cell_context.move_column")}</ItemNameStyled>
+          <ChevronRightStyled />
+        </StyledMenuItem>
+        <MenuDivider />
         <StyledMenuItem ref={freezeRef} onClick={() => setFreezeMenuOpen(true)}>
           <StyledSnowflake />
           <ItemNameStyled>{t("cell_context.freeze")}</ItemNameStyled>
@@ -165,6 +198,58 @@ const CellContextMenu = (properties: CellContextMenuProps) => {
           </ItemNameStyled>
         </StyledMenuItem>
       </StyledMenu>
+      <StyledMenu
+        open={moveRowMenuOpen}
+        onClose={() => setMoveRowMenuOpen(false)}
+        anchorEl={moveRowRef.current}
+        anchorOrigin={{
+          vertical: "top",
+          horizontal: "right",
+        }}
+      >
+        <StyledMenuItem
+          onClick={() => {
+            onMoveRowUp();
+            setMoveRowMenuOpen(false);
+          }}
+        >
+          <ItemNameStyled>{t("cell_context.move_row_up")}</ItemNameStyled>
+        </StyledMenuItem>
+        <StyledMenuItem
+          onClick={() => {
+            onMoveRowDown();
+            setMoveRowMenuOpen(false);
+          }}
+        >
+          <ItemNameStyled>{t("cell_context.move_row_down")}</ItemNameStyled>
+        </StyledMenuItem>
+      </StyledMenu>
+      <StyledMenu
+        open={moveColumnMenuOpen}
+        onClose={() => setMoveColumnMenuOpen(false)}
+        anchorEl={moveColumnRef.current}
+        anchorOrigin={{
+          vertical: "top",
+          horizontal: "right",
+        }}
+      >
+        <StyledMenuItem
+          onClick={() => {
+            onMoveColumnLeft();
+            setMoveColumnMenuOpen(false);
+          }}
+        >
+          <ItemNameStyled>{t("cell_context.move_column_left")}</ItemNameStyled>
+        </StyledMenuItem>
+        <StyledMenuItem
+          onClick={() => {
+            onMoveColumnRight();
+            setMoveColumnMenuOpen(false);
+          }}
+        >
+          <ItemNameStyled>{t("cell_context.move_column_right")}</ItemNameStyled>
+        </StyledMenuItem>
+      </StyledMenu>
       <StyledMenu
         open={freezeMenuOpen}
         onClose={() => setFreezeMenuOpen(false)}
@@ -230,6 +315,20 @@ const BetweenHorizontalStartStyled = styled(BetweenHorizontalStart)`
   padding-right: 10px;
 `;
 
+const ArrowLeftRightStyled = styled(ArrowLeftRight)`
+  width: 16px;
+  height: 16px;
+  color: ${theme.palette.grey[900]};
+  padding-right: 10px;
+`;
+
+const ArrowUpDownStyled = styled(ArrowUpDown)`
+  width: 16px;
+  height: 16px;
+  color: ${theme.palette.grey[900]};
+  padding-right: 10px;
+`;
+
 const StyledSnowflake = styled(Snowflake)`
   width: 16px;
   height: 16px;

webapp/IronCalc/src/components/Worksheet/Worksheet.tsx

@@ -358,6 +358,26 @@ const Worksheet = forwardRef(
             model.insertColumns(view.sheet, view.column + 1, 1);
             setContextMenuOpen(false);
           }}
+          onMoveColumnLeft={(): void => {
+            const view = model.getSelectedView();
+            model.moveColumn(view.sheet, view.column, -1);
+            setContextMenuOpen(false);
+          }}
+          onMoveColumnRight={(): void => {
+            const view = model.getSelectedView();
+            model.moveColumn(view.sheet, view.column, 1);
+            setContextMenuOpen(false);
+          }}
+          onMoveRowUp={(): void => {
+            const view = model.getSelectedView();
+            model.moveRow(view.sheet, view.row, -1);
+            setContextMenuOpen(false);
+          }}
+          onMoveRowDown={(): void => {
+            const view = model.getSelectedView();
+            model.moveRow(view.sheet, view.row, 1);
+            setContextMenuOpen(false);
+          }}
           onFreezeColumns={(): void => {
             const view = model.getSelectedView();
             model.setFrozenColumnsCount(view.sheet, view.column);