How to remove ribbon items or tabs

How to remove ribbon items or tabs

Posted by: alex.grant1 on 15 March 2024, 1:46 am EST

• 

  alex.grant1

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 15 March 2024, 1:46 am EST - Updated 15 March 2024, 1:49 am EST

  Hi, I’m using SpreadJS designer in a react project and I’m trying to figure out if there is a way to remove the tabs from the ribbon, for example the File, Home or Data tabs? Also, is it possible to hide or remove individual items from within the tabs for example the insertTable or printArea items?

  I’ve read through the documentation but can’t find anything that shows how to do this.

  Any help would be much appreciated.

• 

  priyam.kushwaha

  

  • Post Options:
  • Link
    Copy

  Posted 17 March 2024, 8:39 pm EST

  Hi,

  As per my understanding, you want to remove tabs and items from the ribbon in SpreadJS.
  
  To accomplish this, you can customize the GC.Spread.Sheets.Designer.DefaultConfig. To remove tabs, delete the corresponding object from config.ribbon. Similarly, to remove items, locate the that tab object in config.ribbon and then that specific item within it, and remove it accordingly. Finally, pass the updated config to the designer component. Refer attached snippet and sample.

  const config = GC.Spread.Sheets.Designer.DefaultConfig
  
  // removing Home and Data tabs
  config.ribbon = config.ribbon.filter(
      (rb) => rb.id !== 'home' && rb.id !== 'data'
  );
  // removing file side panel
  delete config.fileMenu;
  // removing items like Table in INSERT tab
  const insertTab = config.ribbon.find((r) => r.id === 'insert');
  insertTab.buttonGroups = insertTab.buttonGroups.filter(
      (bg) => bg.label !== 'Tables'
  );
  
  function App() {
      function designerInitialized(designer) {
          let spread = designer.getWorkbook()
          let sheet = spread.getActiveSheet()
      }
      return (
          <div className="sample-tutorial">
              <div className="sample-spreadsheets">
                  <Designer
                      spreadOptions={{ sheetCount: 3 }}
                      config={config}
                      styleInfo={{ height: '100%' }}
                      designerInitialized={designerInitialized}
                  ></Designer>
              </div>
              <div className="options-container">
                  <p>Options</p>
              </div>
          </div>
      )
  }

  Sample: https://jscodemine.mescius.io/share/t8UvsDY2vEediIYour6PaA/?defaultOpen={"OpenedFileName"%3A["%2Findex.html"%2C"%2Fsrc%2Fapp.jsx"%2C"%2Fpackage.json"]%2C"ActiveFile"%3A"%2Fsrc%2Fapp.jsx"}

  You can also refer this demo: https://developer.mescius.com/spreadjs/demos/features/custom-designer/custom-ribbon2/react

  Regards,

  Priyam