Merge cells (tests pending) (#35)

sojinantony01 · web-flow · commit cdf02114b0c6 · 2025-07-05T21:41:03.000+05:30
diff --git a/README.md b/README.md
@@ -23,6 +23,7 @@ Able to render 100000+ input boxes in react, A quick solution for web based spre
 * __Blazing Fast Rendering: Handles large datasets efficiently (100000+ input boxes).__
 * __Comprehensive Calculation Engine: Supports complex formulas and calculations. (= 2 * A2 + (B2 * C4))__
 * __Rich Formatting Options: Customize cell appearance with bold, italic, underline, and more.__
+* __Merge cells.__
 * __Undo, Redo actions.__
 * __Calculations Support, value should starts with "="__
 * __Select Multiple cells.__
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-spread-sheet-excel",
-  "version": "3.1.3",
+  "version": "3.1.5",
   "description": "A quick example of rendering large number of input boxes in table using React JS, React Spread-sheet (Excel sheet)",
   "keywords": [
     "React spreadsheet",
diff --git a/src/lib/list/cell.tsx b/src/lib/list/cell.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { useInView } from "react-intersection-observer";
 import Input from "./input";
+import { store, useAppSelector } from "../store";
 interface Prop {
   i: number;
   j: number;
@@ -14,10 +15,37 @@ const Cell = (props: Prop) => {
     rootMargin: "100px",
   });
 
-  return (
-    <td ref={ref} className={`${!inView ? "pv-4 sheet-not-in-view-table" : ""}`}>
+  const colSpan = useAppSelector(store, (state) => {
+    let val = state.data[props.i][props.j];
+    if (inView && val.colSpan && val.rowSpan) {
+      return val.colSpan;
+    }
+    return 1;
+  });
+
+  const rowSpan = useAppSelector(store, (state) => {
+    let val = state.data[props.i][props.j];
+    if (inView && val.colSpan && val.rowSpan) {
+      return val.rowSpan;
+    }
+    return 1;
+  });
+
+  const skip = useAppSelector(store, (state) => {
+    return state.data[props.i][props.j].skip;
+  });
+
+  return !skip ? (
+    <td
+      ref={ref}
+      className={`${!inView ? "pv-4 sheet-not-in-view-table" : ""}`}
+      colSpan={colSpan}
+      rowSpan={rowSpan}
+    >
       {inView ? <Input key={`${props.i}-${props.j}`} {...props} /> : " "}
     </td>
+  ) : (
+    <></>
   );
 };
 
diff --git a/src/lib/list/context-menu.tsx b/src/lib/list/context-menu.tsx
@@ -1,6 +1,13 @@
 import React, { useCallback, useEffect, useState } from "react";
 import Icons from "../svg/icons";
-import { addColumn, addRow, deleteColumn, deleteRow, updateInputTypes } from "../reducer";
+import {
+  addColumn,
+  addRow,
+  deleteColumn,
+  deleteRow,
+  mergeCells,
+  updateInputTypes,
+} from "../reducer";
 import { store } from "../store";
 
 interface ContextMenuProps {
@@ -47,6 +54,12 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
     onClose();
   };
 
+  const mergeCell = () => {
+    dispatch(mergeCells);
+    onChange && onChange();
+    onClose();
+  };
+
   const closeOnOutsideClick = useCallback(
     (e: MouseEvent) => {
       const inside = (e.target as HTMLElement).closest(".sheet-context-menu");
@@ -91,6 +104,10 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
         Paste
       </div>
       <div className="sheet-context-menu-divider"></div>
+      <div className="sheet-context-menu-item" role="menuitem" onClick={() => mergeCell()}>
+        Merge cells
+      </div>
+      <div className="sheet-context-menu-divider"></div>
       <div
         className="sheet-context-menu-item sheet-context-menu-item-with-submenu"
         role="menuitem"
diff --git a/src/lib/list/index.tsx b/src/lib/list/index.tsx
@@ -92,7 +92,7 @@ const List = (props: Props) => {
     const parentEl = parentDivRef.current;
     if (el && parentEl && parentEl?.scrollTop > el?.scrollHeight - 3200) {
       const nextVal = 300 + Math.round(parentEl?.scrollTop / 32);
-      if (autoAddAdditionalRows && nextVal >= itemLength && itemLength < 2000) {
+      if (autoAddAdditionalRows && nextVal >= itemLength && itemLength < 1500) {
         //Add additional rows
         dispatch(addRows, { payload: generateDummyContent(300, store.getState().data[0].length) });
       } else {
diff --git a/src/lib/list/input.tsx b/src/lib/list/input.tsx
@@ -85,23 +85,45 @@ const Input = (props: Prop) => {
     }
   };
 
+  const findNext = (
+    i: number,
+    j: number,
+    dir: "up" | "down" | "left" | "right",
+  ): { i: number; j: number } => {
+    if (
+      document.getElementById(`${i}-${j}`) ||
+      (dir === "up" && i === 0) ||
+      (dir === "left" && j === 0) ||
+      (dir === "down" && i === rowLength - 1) ||
+      (dir === "right" && j === columnLength - 1)
+    ) {
+      return { i, j };
+    } else {
+      return findNext(
+        dir === "up" ? i - 1 : dir === "down" ? i + 1 : i,
+        dir === "left" ? j - 1 : dir === "right" ? j + 1 : j,
+        dir,
+      );
+    }
+  };
+
   const moveToNext = (e: KeyboardEvent<HTMLInputElement>) => {
     let newI, newJ;
     switch (e.code) {
       case "ArrowLeft":
         newI = i;
-        newJ = j - 1;
+        newJ = j > 0 ? findNext(i, j - 1, "left").j : j;
         break;
       case "ArrowUp":
-        newI = i - 1;
+        newI = i > 0 ? findNext(i - 1, j, "up").i : i;
         newJ = j;
         break;
       case "ArrowRight":
         newI = i;
-        newJ = j + 1;
+        newJ = j < columnLength - 1 ? findNext(i, j + 1, "right").j : j;
         break;
       case "ArrowDown":
-        newI = i + 1;
+        newI = i < rowLength - 1 ? findNext(i + 1, j, "down").i : i;
         newJ = j;
         break;
     }
diff --git a/src/lib/list/tools/tools.tsx b/src/lib/list/tools/tools.tsx
@@ -1,7 +1,7 @@
 import React, { useRef } from "react";
 import Icons from "../../svg/icons";
 import { store, useAppSelector } from "../../store";
-import { changeData, redo, undo } from "../../reducer";
+import { changeData, mergeCells, redo, undo } from "../../reducer";
 
 let timer: string | number | NodeJS.Timeout | undefined;
 const emptyObject = {};
@@ -34,8 +34,15 @@ const Tools = ({
   });
   const selectedItemVal = useAppSelector(
     store,
-    (state) => state.data[state.selected?.[0]?.[0]]?.[state.selected?.[0]?.[1]]?.value || "",
+    (state) => state.data[state.selected?.[0]?.[0]]?.[state.selected?.[0]?.[1]].value || "",
   );
+
+  const rowSpan = useAppSelector(
+    store,
+    (state) =>
+      state.data[state.selected?.[0]?.[0]]?.[state.selected?.[0]?.[1]].rowSpan || undefined,
+  );
+
   const selectedFontSize = selectedStyles?.["fontSize"]
     ? selectedStyles["fontSize"]?.split("px")?.[0]
     : "12";
@@ -229,6 +236,15 @@ const Tools = ({
             <Icons type="align-justify" />
           </button>
         </div>
+        <div className="sheet-tools-text-style-container">
+          <button
+            className={rowSpan ? "text-style-btn-active" : ""}
+            data-testid="merge"
+            onClick={() => dispatch(mergeCells)}
+          >
+            <Icons type="merge" />
+          </button>
+        </div>
       </div>
     </div>
   );
diff --git a/src/lib/reducer.ts b/src/lib/reducer.ts
@@ -6,6 +6,9 @@ export interface Data {
   value: string;
   styles?: { [key: string]: string };
   type?: string;
+  colSpan?: number;
+  rowSpan?: number;
+  skip?: boolean; //merged
 }
 
 interface Action {
@@ -299,7 +302,6 @@ const actions: DispatcherActions = {
   },
   addColumn(state, action) {
     state.redo = [];
-    // state.undo.push(undo);
     const index = action.payload.right ? state.selected[0][1] + 1 : state.selected[0][1];
     const data = state.data;
     state.undo.push([{ i: index, j: 0, type: "add-column", data: { value: "" } }]);
@@ -331,6 +333,48 @@ const actions: DispatcherActions = {
     ]);
     return state;
   },
+  mergeCells(state) {
+    if (state.selected.length > 0) {
+      state.redo = [];
+      const undo: Action[] = [];
+      const cellForMerge = state.selected[0];
+      const data = state.data;
+      if (data[cellForMerge[0]][cellForMerge[1]].rowSpan) {
+        for (
+          let i = cellForMerge[0];
+          i <= cellForMerge[0] + (data[cellForMerge[0]][cellForMerge[1]].rowSpan || 0);
+          i++
+        ) {
+          for (
+            let j = cellForMerge[1];
+            j <= cellForMerge[1] + (data[cellForMerge[0]][cellForMerge[1]].colSpan || 0);
+            j++
+          ) {
+            undo.push({ i: i, j: j, data: { ...state.data[i][j] } });
+            data[i][j].skip = undefined;
+          }
+        }
+        data[cellForMerge[0]][cellForMerge[1]].rowSpan = undefined;
+        data[cellForMerge[0]][cellForMerge[1]].colSpan = undefined;
+      } else if (state.selected.length > 1) {
+        state.selected.forEach((p, i) => {
+          undo.push({ i: p[0], j: p[1], data: { ...state.data[p[0]][p[1]] } });
+          if (i !== 0) {
+            data[p[0]][p[1]].value = "";
+            data[p[0]][p[1]].skip = true;
+          }
+        });
+        data[cellForMerge[0]][cellForMerge[1]].rowSpan =
+          Math.abs(state.selected[0][0] - state.selected[state.selected.length - 1][0]) + 1;
+        data[cellForMerge[0]][cellForMerge[1]].colSpan =
+          Math.abs(state.selected[0][1] - state.selected[state.selected.length - 1][1]) + 1;
+      }
+      state.selected = [cellForMerge];
+      state.data = data;
+      state.undo.push(undo);
+    }
+    return state;
+  },
 };
 
 export const {
@@ -354,4 +398,5 @@ export const {
   addColumn,
   deleteRow,
   deleteColumn,
+  mergeCells,
 } = actions;
diff --git a/src/lib/svg/icons.tsx b/src/lib/svg/icons.tsx
@@ -3,7 +3,8 @@ type AvailableIcons =
   | "align-right"
   | "align-center"
   | "align-justify"
-  | "right-arrow";
+  | "right-arrow"
+  | "merge";
 const Icons = ({ type }: { type: AvailableIcons }) => {
   switch (type) {
     case "align-left":
@@ -96,6 +97,22 @@ const Icons = ({ type }: { type: AvailableIcons }) => {
           <path d="M246.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-9.2-9.2-22.9-11.9-34.9-6.9s-19.8 16.6-19.8 29.6l0 256c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l128-128z" />
         </svg>
       );
+    case "merge":
+      return (
+        <svg
+          width="16px"
+          height="16px"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M12.5 21H17.75C19.5449 21 21 19.5449 21 17.75V17H12.5V21Z" fill="#212121" />
+          <path d="M21 7V6.25C21 4.45507 19.5449 3 17.75 3H12.5V7H21Z" fill="#212121" />
+          <path d="M11 3H6.25C4.45507 3 3 4.45507 3 6.25V7H11V3Z" fill="#212121" />
+          <path d="M3 8.5V15.5H21V8.5H3Z" fill="#212121" />
+          <path d="M3 17V17.75C3 19.5449 4.45507 21 6.25 21H11V17H3Z" fill="#212121" />
+        </svg>
+      );
   }
 };
 export default Icons;
diff --git a/todo.txt b/todo.txt
@@ -13,7 +13,6 @@ A row filter option from row column headers.
 Custom options in context menu. 
 
 Real-time Updates (Multiple users can edit same time): how de we enable realtime in this one? 
-Merge cells
 Find end of rows having actual values, onSave and export only use rows till end of actual values
 Support adding images
 Locale - translations.
@@ -22,4 +21,6 @@ More events - on select, on bulk change, onUndo, onRedo, onScroll(which should h
 Custom tools - onClick should respond with all selected cell data
 Resize rows 
 Multiple selection with cntrl key
-Readonly should disable all updates
+Readonly should disable all updates and support merged cells
+
+!!complete pending tests

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "react-spread-sheet-excel",`
`3`		`- "version": "3.1.3",`
	`3`	`+ "version": "3.1.5",`
`4`	`4`	`"description": "A quick example of rendering large number of input boxes in table using React JS, React Spread-sheet (Excel sheet)",`
`5`	`5`	`"keywords": [`
`6`	`6`	`"React spreadsheet",`