Insert new column in at the very end in worksheet

Insert new column in at the very end in worksheet

Posted by: diwakar.s.maurya on 2 March 2025, 4:37 am EST

• 

  diwakar.s.maurya

  • Post Options:
  • Link
    Copy

  Posted 2 March 2025, 4:37 am EST - Updated 2 March 2025, 4:42 am EST

  On clicking “Insert”, a new column gets inserted to the left. How to add a new column on the right side?
  
  Example: If I want to add new column U next to column T having some data already, it is not possible.
  
  

  

  498×595 27.6 KB

  Microsoft Excel on Web shows option to choose between left and right while inserting a new column. So it’s not a problem in that, but a problem/inconvenience in SpreadJS.
  
  

  

  591×683 50 KB

  At present the only workaround is add a column to left, move the existing data to left manually so that a new empty column appears on the right. Is there a better solution for this than this workaround?

• 

  priyam.kushwaha

  

  • Post Options:
  • Link
    Copy

  Posted 3 March 2025, 7:03 am EST - Updated 3 March 2025, 7:08 am EST

  Hi,

  It is not directly possible to add the column to the right in SpreadJS. However, it is possible to register a custom menu item to insert the column on the right of the selected column by defining a custom command. Please refer to the code snippet below, which illustrates the same:

  const commandManager = spread.commandManager();
  const insertColumnRight = {
    text: "Insert Column Right",
    name: "insertColumnRight",
    command: "insertColumnRight",
    workArea: "colHeader",
  };
  spread.contextMenu.menuData.push(insertColumnRight);
  const insertColumnRightCommand = {
    canUndo: true,
    execute: function (context, options, isUndo) {
      const Commands = GC.Spread.Sheets.Commands;
      if (isUndo) {
        Commands.undoTransaction(context, options);
        return true;
      } else {
        Commands.startTransaction(context, options);
        const sheet = context.getActiveSheet();
        const selections = sheet.getSelections();
        const colSelections = selections
          .filter((item) => item.row === -1)
          .sort((a, b) => b.col - a.col)
          .map(({ col, colCount }) => ({ col, colCount }));
        colSelections.forEach((colSelection) => {
          sheet.addColumns(
            colSelection.col + colSelection.colCount,
            colSelection.colCount
          );
        });
        Commands.endTransaction(context, options);
        return true;
      }
    },
  };
  commandManager.register(
    "insertColumnRight",
    insertColumnRightCommand,
    null,
    false,
    false,
    false,
    false
  );

  You can further refer to the attached code sample that uses the above code snippet and adds the context menu item to insert the columns on the right of the selected columns (see below).

  

  Please feel free to reach out if you encounter any further issues or require additional guidance.

  Sample: https://jscodemine.mescius.io/share/aG-UmCkbJky1FDBinlqe9A/?defaultOpen={"OpenedFileName"%3A["%2Findex.html"]%2C"ActiveFile"%3A"%2Findex.html"}

  Best Regards,