diff --git a/webapp/IronCalc/src/components/Worksheet/CellContextMenu.tsx b/webapp/IronCalc/src/components/Worksheet/CellContextMenu.tsx
index 6367c31..96609f9 100644
--- a/webapp/IronCalc/src/components/Worksheet/CellContextMenu.tsx
+++ b/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 (
<>
{
+ setMoveRowMenuOpen(true)}
+ >
+
+ {t("cell_context.move_row")}
+
+
+ setMoveColumnMenuOpen(true)}
+ >
+
+ {t("cell_context.move_column")}
+
+
+
setFreezeMenuOpen(true)}>
{t("cell_context.freeze")}
@@ -165,6 +198,58 @@ const CellContextMenu = (properties: CellContextMenuProps) => {
+ setMoveRowMenuOpen(false)}
+ anchorEl={moveRowRef.current}
+ anchorOrigin={{
+ vertical: "top",
+ horizontal: "right",
+ }}
+ >
+ {
+ onMoveRowUp();
+ setMoveRowMenuOpen(false);
+ }}
+ >
+ {t("cell_context.move_row_up")}
+
+ {
+ onMoveRowDown();
+ setMoveRowMenuOpen(false);
+ }}
+ >
+ {t("cell_context.move_row_down")}
+
+
+ setMoveColumnMenuOpen(false)}
+ anchorEl={moveColumnRef.current}
+ anchorOrigin={{
+ vertical: "top",
+ horizontal: "right",
+ }}
+ >
+ {
+ onMoveColumnLeft();
+ setMoveColumnMenuOpen(false);
+ }}
+ >
+ {t("cell_context.move_column_left")}
+
+ {
+ onMoveColumnRight();
+ setMoveColumnMenuOpen(false);
+ }}
+ >
+ {t("cell_context.move_column_right")}
+
+
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;
diff --git a/webapp/IronCalc/src/components/Worksheet/Worksheet.tsx b/webapp/IronCalc/src/components/Worksheet/Worksheet.tsx
index 39fb6ed..f55b7a7 100644
--- a/webapp/IronCalc/src/components/Worksheet/Worksheet.tsx
+++ b/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);