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
  • Jump To Answer

  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,

• 

  diwakar.s.maurya

  • Post Options:
  • Link
    Copy

  Posted 4 April 2025, 11:02 pm EST

  I am trying to implement this in Designer component in ReactJS. I now understand the code sent in your sample but unable to replicate it in ReactJS. The new context menu item does not get visible on UI. Here is what I tried:- https://jscodemine.mescius.io/sample/B6_wsKtFWEKuX4WVLDuqvw/ Kindly help in finding why similar code is not working.

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 7 April 2025, 4:40 am EST - Updated 7 April 2025, 4:45 am EST

  Hi,

  In the case of the SpreadJS designer component, the custom context menu item is added to the designer config and not to the SpreadJS CommandManager. Please refer to the code snippet below that adds the custom context menu to insert columns to the right in the Designer.

  function addCustomContextMenuItem(designer) {
      let config = GC.Spread.Sheets.Designer.DefaultConfig;
      if (config && config.contextMenu) {
          config.contextMenu.push("insertColumnRight");
      }
      config.commandMap = {
          "insertColumnRight": {
              text: "Insert Column Right",
              commandName: "insertColumnRight",
              visibleContext: "ClickColHeader",
              execute: function (context, _, options) {
                  const spread = context.getWorkbook();
                  const sheet = spread.getSheetFromName(options.sheetName);
                  const selections = options.selections;
                  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);
                  });
                  return true;
              }
          }
      }
      designer.setConfig(config);
  }

  You can further refer to the attached code sample that uses the above code snippet and provides the functionality to add columns to the right in the SpreadJS Designer (see below).

  Sample: https://jscodemine.mescius.io/share/L3BfQOa2okWLw5MfN_Cu-w/?defaultOpen={"OpenedFileName"%3A["%2Fsrc%2Fapp-func.jsx"]%2C"ActiveFile"%3A"%2Fsrc%2Fapp-func.jsx"}

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

  Best Regards,

  Ankit

  

• 

  diwakar.s.maurya

  • Post Options:
  • Link
    Copy

  Posted 11 April 2025, 10:20 am EST

  Thank you. This worked.