How to Add a JavaScript Spreadsheet Ribbon Component in Your Web App

Using the Designer Ribbon Component in Angular is as easy as importing a module and adding the designer directive in component.html file. Follow these steps to add the designer in an angular application:

1. Install the required SpreadJS Angular modules to use the SpreadJS Designer Component.
   

   npm install @mescius/spread-sheets @mescius/spread-sheets-angular @mescius/spread-sheets-shapes @mescius/spread-sheets-charts @mescius/spread-sheets-slicers @mescius/spread-sheets-print @mescius/spread-sheets-formula-panel @mescius/spread-sheets-barcode @mescius/spread-sheets-pdf @mescius/spread-sheets-pivot-addon @mescius/spread-sheets-tablesheet @mescius/spread-sheets-ganttsheet @mescius/spread-sheets-reportsheet-addon @mescius/spread-sheets-languagepackages @mescius/spread-sheets-io @mescius/spread-excelio @mescius/spread-sheets-designer @mescius/spread-sheets-designer-resources-en @mescius/spread-sheets-designer-angular

2. Import the needed CSS files in the component.css file.
   

   @import '@mescius/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css';
   @import '@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css';

3. Import the Designer and Resources modules in the app.modules.ts files.
   

   ...
   import { AppComponent } from './app.component';
   import { DesignerModule } from '@mescius/spread-sheets-designer-angular';
   import { SpreadSheetsModule } from "@mescius/spread-sheets-angular";
   ...

4. Add the designer tag in the app.component.html file using the following code snippet.
   

   <designer [props]="props"></designer>

5. To configure the designer, pass the props parameters in the app.component.ts file.
   

   props = {
   styleInfo: "width: 100%; height: 100%", config: config
   };

For more info, check out the Angular documentation or this Angular Designer Customization demo.

To use the Designer Ribbon Component in React, we need only import the react component and return the component as a result of the render method.

1. Install the required SpreadJS React modules to use the SpreadJS Designer Component.
   

   npm install @mescius/spread-sheets @mescius/spread-sheets-react @mescius/spread-sheets-shapes @mescius/spread-sheets-charts @mescius/spread-sheets-slicers @mescius/spread-sheets-print @mescius/spread-sheets-formula-panel @mescius/spread-sheets-barcode @mescius/spread-sheets-pdf @mescius/spread-sheets-pivot-addon @mescius/spread-sheets-tablesheet @mescius/spread-sheets-ganttsheet @mescius/spread-sheets-reportsheet-addon @mescius/spread-sheets-languagepackages @mescius/spread-sheets-io @mescius/spread-excelio @mescius/spread-sheets-designer @mescius/spread-sheets-designer-resources-en @mescius/spread-sheets-designer-react

2. Import the required modules to the App.js file.
   

   import '@mescius/spread-sheets-designer-resources-en';
   import {Designer} from '@mescius/spread-sheets-designer-react';
   import '@mescius/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css'
   import '@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css'

3. Render the Designer Component using the following code snippet in the App.js file.
   

   function App() {
      return (
         <Designer styleInfo = {{width: "1500px", height: '90vh'}}></Designer>
      );
   }
   export default App;

For more info, check out the React documentation or the React Designer Customization demo.

To use the Designer Ribbon Component in Vue 3, simply install the required modules, register the Designer component, and include it in your App.vue file.

1. Install the required SpreadJS Vue modules to use the SpreadJS Designer Component.
   

   npm install @mescius/spread-sheets @mescius/spread-sheets-vue @mescius/spread-sheets-shapes @mescius/spread-sheets-charts @mescius/spread-sheets-slicers @mescius/spread-sheets-print @mescius/spread-sheets-formula-panel @mescius/spread-sheets-barcode @mescius/spread-sheets-pdf @mescius/spread-sheets-pivot-addon @mescius/spread-sheets-tablesheet @mescius/spread-sheets-ganttsheet @mescius/spread-sheets-reportsheet-addon @mescius/spread-sheets-languagepackages @mescius/spread-sheets-io @mescius/spread-excelio @mescius/spread-sheets-designer @mescius/spread-sheets-designer-resources-en @mescius/spread-sheets-designer-vue

2. Register the SpreadJS Designer Vue component in the main.js file.
   

   import { createApp } from 'vue'
   import App from './App.vue'
   import Designer from "@mescius/spread-sheets-designer-vue"
   let app = createApp(App);
   app.component("gc-spread-sheets-designer", Designer);
   app.mount('#app');

3. Update App.vue to import styles and register the component.
   

   <script setup>
   import '@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css';
   import "@mescius/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css";
   import * as GC from "@mescius/spread-sheets";
   import "@mescius/spread-sheets-print";
   import "@mescius/spread-sheets-shapes";
   import "@mescius/spread-sheets-pivot-addon";
   import "@mescius/spread-sheets-tablesheet";
   import "@mescius/spread-sheets-designer-resources-en";
   import "@mescius/spread-sheets-designer";
   </script>
   
   <template>
     <div id="gc-designer-container">
       <gc-spread-sheets-designer
         :styleInfo="{ height: '98vh', width: '100%' }"
         :config="config"
         :spreadOptions="{ sheetCount: 2 }"
         @designerInitialized="designer = $event"
       />
     </div>
   </template>

For more info, check out the Vue documentation and the Vue3 Designer Customization demo.