Ribbon in React Spreadsheet component

26 Sep 2022 / 4 minutes to read

It helps to organize a spreadsheet’s features into a series of tabs. By clicking the expand or collapse icon, you can expand or collapse the ribbon toolbar dynamically.

Ribbon Customization

You can customize the ribbon using the following methods,

Method	Action
`hideRibbonTabs`	Used to show or hide the existing ribbon tabs.
`enableRibbonTabs`	Used to enable or disable the existing
ribbon tabs.
`addRibbonTabs`	Used to add custom ribbon tabs.
`hideToolbarItems`	Used to show or hide the existing ribbon
toolbar items.
`enableToolbarItems`	Used to enable or disable the specified
toolbar items.
`addToolbarItems`	Used to add the custom items in ribbon
toolbar.
`hideFileMenuItems`	Used to show or hide the ribbon file menu
items.
`enableFileMenuItems`	Used to enable or disable file menu items.
`addFileMenuItems`	Used to add custom file menu items.

The following code example shows the usage of ribbon customization.

Source

Preview

app.jsx

datasource.jsx

index.html

app.tsx

datasource.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective } from '@syncfusion/ej2-react-spreadsheet';
import { select } from '@syncfusion/ej2-base';
import { RangeDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
import { data } from './datasource';
export default class App extends React.Component {
    created() {
        this.spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:F1');
        // Hiding the `Insert` from ribbon.
        this.spreadsheet.hideRibbonTabs(['Insert']);
        // Set disabled state to `View` ribbon tab.
        this.spreadsheet.enableRibbonTabs(['View'], false);
        // Adding the `Help` ribbon tab at the last index.
        // Specify the ribbon tab header text in last optional argument(`insertBefore`) for inserting new tab before any existing tab.
        this.spreadsheet.addRibbonTabs([{ header: { text: 'Help' }, content: [{ text: 'Feedback', tooltipText: 'Feedback',
                        click: () => { } }] }]);
        // Hiding the unwanted toolbar items from `Home` by specifying its index.
        this.spreadsheet.hideToolbarItems('Home', [0, 1, 2, 4, 14, 15, 21, 24]);
        // Set disable state to `Underline`, 'Wrap text` toolbar items from `Home` by specifying the item id.
        this.spreadsheet.enableToolbarItems('Home', [`${this.spreadsheet.element.id}_underline`, `${this.spreadsheet.element.id}_wrap`], false);
        // Set disable state to `Protect Sheet` toolbar item from `Data` by mentioning its index.
        this.spreadsheet.enableToolbarItems('Data', [0], false);
        // Adding the new `Custom Formulas` toolbar item under `Formulas` tab for adding custom formulas.
        this.spreadsheet.addToolbarItems('Formulas', [{ type: 'Separator' }, {
                text: 'Custom Formulas', tooltipText: 'Custom Formulas',
                // You can set click handler for each new custom toolbar item
                click: () => {
                    // You can add custom formulas here.
                }
            }]);
        // Adding new custom item `Import` after the existing `Open` item. By default, new item will add after the specified item.
        this.spreadsheet.addFileMenuItems([{ text: 'Import', iconCss: 'e-open e-icons' }], 'Open');
        // Adding new custom item `Export As` after the existing `Save As` item.
        // Set `insertAfter` optional argument as `false` for adding new item before the specified item.
        this.spreadsheet.addFileMenuItems([{
                text: 'Export As', iconCss: 'e-save e-icons', items: [{ text: 'XLSX', iconCss: 'e-xlsx e-icons' },
                    { text: 'XLS', iconCss: 'e-xls e-icons' }, { text: 'CSV', iconCss: 'e-csv e-icons' }]
            }], 'Save As', false);
    }
    ;
    fileMenuBeforeOpen() {
        // Because the file menu items are created dynamically, you need to perform the hide or show and enable/disable operations
        // under filemenu before open event.
        // Hiding the `Save As` and `Open` item.
        this.spreadsheet.hideFileMenuItems(['Save As', 'Open']);
        // Set disable state to `New` item. You can perform any file menu items customization by specifying the item id,
        // if it has more than one same item text. Set the last argument `isUniqueId` as true for using the item id.
        this.spreadsheet.enableFileMenuItems([`${this.spreadsheet.element.id}_New`], false, true);
    }
    fileMenuItemSelect(args) {
        // Custom file menu items select handler
        switch (args.item.text) {
            case 'Import':
                select(`#${this.spreadsheet.element.id}_fileUpload`, this.spreadsheet.element).click();
                break;
            case 'XLSX':
                this.spreadsheet.save({ saveType: 'Xlsx' });
                break;
            case 'XLS':
                this.spreadsheet.save({ saveType: 'Xls' });
                break;
            case 'CSV':
                this.spreadsheet.save({ saveType: 'Csv' });
                break;
        }
    }
    render() {
        return (<div>
        <SpreadsheetComponent ref={(ssObj) => { this.spreadsheet = ssObj; }} created={this.created.bind(this)} fileMenuBeforeOpen={this.fileMenuBeforeOpen.bind(this)} fileMenuItemSelect={this.fileMenuItemSelect.bind(this)} showFormulaBar={false} showSheetTabs={false} allowInsert={false} allowDelete={false} allowMerge={false} openUrl="https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/open" saveUrl="https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/save">
                        <SheetsDirective>
                            <SheetDirective>
                                <RangesDirective>
                                    <RangeDirective dataSource={data}></RangeDirective>
                                </RangesDirective>
                                <ColumnsDirective>
                                    <ColumnDirective width={180}></ColumnDirective>
                                    <ColumnDirective width={130}></ColumnDirective>
                                    <ColumnDirective width={130}></ColumnDirective>
                                    <ColumnDirective width={180}></ColumnDirective>
                                    <ColumnDirective width={130}></ColumnDirective>
                                    <ColumnDirective width={120}></ColumnDirective>
                                </ColumnsDirective>
                            </SheetDirective>
                        </SheetsDirective>
                    </SpreadsheetComponent>
                   </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('root'));

/**
 * Ribbon customization data source
 */
export let data = [
    {
        'Customer Name': 'Romona Heaslip',
        'Model': 'Taurus',
        'Color': 'Aquamarine',
        'Payment Mode': 'Debit Card',
        'Delivery Date': '07/11/2015',
        'Amount': '8529.22'
    },
    {
        'Customer Name': 'Clare Batterton',
        'Model': 'Sparrow',
        'Color': 'Pink',
        'Payment Mode': 'Cash On Delivery',
        'Delivery Date': '7/13/2016',
        'Amount': '17866.19'
    },
    {
        'Customer Name': 'Eamon Traise',
        'Model': 'Grand Cherokee',
        'Color': 'Blue',
        'Payment Mode': 'Net Banking',
        'Delivery Date': '09/04/2015',
        'Amount': '13853.09'
    },
    {
        'Customer Name': 'Julius Gorner',
        'Model': 'GTO',
        'Color': 'Aquamarine',
        'Payment Mode': 'Credit Card',
        'Delivery Date': '12/15/2017',
        'Amount': '2338.74'
    },
    {
        'Customer Name': 'Jenna Schoolfield',
        'Model': 'LX',
        'Color': 'Yellow',
        'Payment Mode': 'Credit Card',
        'Delivery Date': '10/08/2014',
        'Amount': '9578.45'
    },
    {
        'Customer Name': 'Marylynne Harring',
        'Model': 'Catera',
        'Color': 'Green',
        'Payment Mode': 'Cash On Delivery',
        'Delivery Date': '7/01/2017',
        'Amount': '19141.62'
    },
    {
        'Customer Name': 'Vilhelmina Leipelt',
        'Model': '7 Series',
        'Color': 'Goldenrod',
        'Payment Mode': 'Credit Card',
        'Delivery Date': '12/20/2015',
        'Amount': '6543.30'
    },
    {
        'Customer Name': 'Barby Heisler',
        'Model': 'Corvette',
        'Color': 'Red',
        'Payment Mode': 'Credit Card',
        'Delivery Date': '11/24/2014',
        'Amount': '13035.06'
    },
    {
        'Customer Name': 'Karyn Boik',
        'Model': 'Regal',
        'Color': 'Indigo',
        'Payment Mode': 'Debit Card',
        'Delivery Date': '05/12/2014',
        'Amount': '18488.80'
    },
    {
        'Customer Name': 'Jeanette Pamplin',
        'Model': 'S4',
        'Color': 'Fuscia',
        'Payment Mode': 'Net Banking',
        'Delivery Date': '12/30/2014',
        'Amount': '12317.04'
    },
    {
        'Customer Name': 'Cristi Espinos',
        'Model': 'TL',
        'Color': 'Aquamarine',
        'Payment Mode': 'Credit Card',
        'Delivery Date': '12/18/2013',
        'Amount': '6230.13'
    }
];

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Spreadsheet</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/20.2.43/material.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
        body {
            overflow: hidden;
        }
        .customClass.e-cell {
                        background-color: red;
                }
    </style>
</head>

<body>
    <div id='root'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective } from '@syncfusion/ej2-react-spreadsheet';
import { select } from '@syncfusion/ej2-base';
import { RangeDirective, ColumnsDirective, ColumnDirective} from '@syncfusion/ej2-react-spreadsheet';
import { data } from './datasource';

export default class App extends React.Component<{}, {}> {
       public spreadsheet: SpreadsheetComponent;
       public created(): void{
        this.spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:F1');
        // Hiding the `Insert` from ribbon.
        this.spreadsheet.hideRibbonTabs(['Insert']);
        // Set disabled state to `View` ribbon tab.
        this.spreadsheet.enableRibbonTabs(['View'], false);
        // Adding the `Help` ribbon tab at the last index.
        // Specify the ribbon tab header text in last optional argument(`insertBefore`) for inserting new tab before any existing tab.
        this.spreadsheet.addRibbonTabs([{ header: { text: 'Help' }, content: [{ text: 'Feedback', tooltipText: 'Feedback',
            click: (): void => { /* Any click action for this toolbar item will come here. */ } }] }]);
        // Hiding the unwanted toolbar items from `Home` by specifying its index.
        this.spreadsheet.hideToolbarItems('Home', [0, 1, 2, 4, 14, 15, 21, 24]);
        // Set disable state to `Underline`, 'Wrap text` toolbar items from `Home` by specifying the item id.
        this.spreadsheet.enableToolbarItems('Home', [`${this.spreadsheet.element.id}_underline`, `${this.spreadsheet.element.id}_wrap`], false);
        // Set disable state to `Protect Sheet` toolbar item from `Data` by mentioning its index.
        this.spreadsheet.enableToolbarItems('Data', [0], false);
        // Adding the new `Custom Formulas` toolbar item under `Formulas` tab for adding custom formulas.
        this.spreadsheet.addToolbarItems(
            'Formulas', [{ type: 'Separator' }, {
                text: 'Custom Formulas', tooltipText: 'Custom Formulas',
                // You can set click handler for each new custom toolbar item
                click: (): void => {
                    // You can add custom formulas here.
                }
            }]);
        // Adding new custom item `Import` after the existing `Open` item. By default, new item will add after the specified item.
        this.spreadsheet.addFileMenuItems([{ text: 'Import', iconCss: 'e-open e-icons' }], 'Open');
        // Adding new custom item `Export As` after the existing `Save As` item.
        // Set `insertAfter` optional argument as `false` for adding new item before the specified item.
        this.spreadsheet.addFileMenuItems(
            [{
                text: 'Export As', iconCss: 'e-save e-icons', items: [{ text: 'XLSX', iconCss: 'e-xlsx e-icons' },
                    { text: 'XLS', iconCss: 'e-xls e-icons' }, { text: 'CSV', iconCss: 'e-csv e-icons' }]
            }],
            'Save As', false);
    };
    public fileMenuBeforeOpen(): void{
        // Because the file menu items are created dynamically, you need to perform the hide or show and enable/disable operations
        // under filemenu before open event.
        // Hiding the `Save As` and `Open` item.
        this.spreadsheet.hideFileMenuItems(['Save As', 'Open']);
         // Set disable state to `New` item. You can perform any file menu items customization by specifying the item id,
        // if it has more than one same item text. Set the last argument `isUniqueId` as true for using the item id.
        this.spreadsheet.enableFileMenuItems([`${this.spreadsheet.element.id}_New`], false, true);
    }
    public fileMenuItemSelect(args): void{
         // Custom file menu items select handler
         switch (args.item.text) {
            case 'Import': select(`#${this.spreadsheet.element.id}_fileUpload`, this.spreadsheet.element).click();
                break;
            case 'XLSX': this.spreadsheet.save({ saveType: 'Xlsx' });
                break;
            case 'XLS': this.spreadsheet.save({ saveType: 'Xls' });
                break;
            case 'CSV': this.spreadsheet.save({ saveType: 'Csv' });
                break;
        }
    }
     render() {
        return  ( <div>
        <SpreadsheetComponent
                        ref={(ssObj) => { this.spreadsheet = ssObj }} created={this.created.bind(this)} fileMenuBeforeOpen={this.fileMenuBeforeOpen.bind(this)} fileMenuItemSelect={this.fileMenuItemSelect.bind(this)}
                        showFormulaBar={false} showSheetTabs={false} allowInsert={false} allowDelete={false} allowMerge={false} openUrl="https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/open"
                        saveUrl="https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/save">
                        <SheetsDirective>
                            <SheetDirective>
                                <RangesDirective>
                                    <RangeDirective dataSource={data}></RangeDirective>
                                </RangesDirective>
                                <ColumnsDirective>
                                    <ColumnDirective width={180}></ColumnDirective>
                                    <ColumnDirective width={130}></ColumnDirective>
                                    <ColumnDirective width={130}></ColumnDirective>
                                    <ColumnDirective width={180}></ColumnDirective>
                                    <ColumnDirective width={130}></ColumnDirective>
                                    <ColumnDirective width={120}></ColumnDirective>
                                </ColumnsDirective>
                            </SheetDirective>
                        </SheetsDirective>
                    </SpreadsheetComponent>
                   </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('root'));

/**
 * Ribbon customization data source
 */
export let data: Object[] = [
    {
        'Customer Name': 'Romona Heaslip',
        'Model': 'Taurus',
        'Color': 'Aquamarine',
        'Payment Mode': 'Debit Card',
        'Delivery Date': '07/11/2015',
        'Amount': '8529.22'
    },
    {
        'Customer Name': 'Clare Batterton',
        'Model': 'Sparrow',
        'Color': 'Pink',
        'Payment Mode': 'Cash On Delivery',
        'Delivery Date': '7/13/2016',
        'Amount': '17866.19'
    },
    {
        'Customer Name': 'Eamon Traise',
        'Model': 'Grand Cherokee',
        'Color': 'Blue',
        'Payment Mode': 'Net Banking',
        'Delivery Date': '09/04/2015',
        'Amount': '13853.09'
    },
    {
        'Customer Name': 'Julius Gorner',
        'Model': 'GTO',
        'Color': 'Aquamarine',
        'Payment Mode': 'Credit Card',
        'Delivery Date': '12/15/2017',
        'Amount': '2338.74'
    },
    {
        'Customer Name': 'Jenna Schoolfield',
        'Model': 'LX',
        'Color': 'Yellow',
        'Payment Mode': 'Credit Card',
        'Delivery Date': '10/08/2014',
        'Amount': '9578.45'
    },
    {
        'Customer Name': 'Marylynne Harring',
        'Model': 'Catera',
        'Color': 'Green',
        'Payment Mode': 'Cash On Delivery',
        'Delivery Date': '7/01/2017',
        'Amount': '19141.62'
    },
    {
        'Customer Name': 'Vilhelmina Leipelt',
        'Model': '7 Series',
        'Color': 'Goldenrod',
        'Payment Mode': 'Credit Card',
        'Delivery Date': '12/20/2015',
        'Amount': '6543.30'
    },
    {
        'Customer Name': 'Barby Heisler',
        'Model': 'Corvette',
        'Color': 'Red',
        'Payment Mode': 'Credit Card',
        'Delivery Date': '11/24/2014',
        'Amount': '13035.06'
    },
    {
        'Customer Name': 'Karyn Boik',
        'Model': 'Regal',
        'Color': 'Indigo',
        'Payment Mode': 'Debit Card',
        'Delivery Date': '05/12/2014',
        'Amount': '18488.80'
    },
    {
        'Customer Name': 'Jeanette Pamplin',
        'Model': 'S4',
        'Color': 'Fuscia',
        'Payment Mode': 'Net Banking',
        'Delivery Date': '12/30/2014',
        'Amount': '12317.04'
    },
    {
        'Customer Name': 'Cristi Espinos',
        'Model': 'TL',
        'Color': 'Aquamarine',
        'Payment Mode': 'Credit Card',
        'Delivery Date': '12/18/2013',
        'Amount': '6230.13'
    }
];

Note

You can refer to our React Spreadsheet feature tour page for its groundbreaking feature representations. You can also explore our React Spreadsheet example to knows how to present and manipulate data.

Ribbon in React Spreadsheet component

Ribbon Customization

Note

See Also