User Interface Customization

10 Jul 202624 minutes to read

The React Spreadsheet Editor component provides options to customize the user interface and control the behavior of its UI components.

You can control the ribbon tabs, toolbar items, context menu, and overall appearance. Use these options to show, hide, or modify UI elements and attach custom behavior.

Create Custom Ribbon Tabs and Items

The React Spreadsheet Editor lets you create your own ribbon tabs and add custom items inside them.

You can create a new tab using the addRibbonTabs method. With this, you can create a separate tab where you place the actions and features that you want. You can also add custom items inside these tabs. Each item can run your own functionality, allowing you to perform any action you need.

The following code sample shows how to create custom ribbon tabs and groups.

app.jsx

import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';

function App() {
  const spreadsheetRef = React.useRef(null);

  const handleCreated = () => {
    const spreadsheet = spreadsheetRef.current;
    if (!spreadsheet) return;

    spreadsheet.addRibbonTabs(
      [
        {
          header: { text: 'Custom tab' },
          content: [
            {
              text: 'Custom',
              tooltipText: 'Custom Btn',
              cssClass: 'e-custom-btn',
              click: () => {
                // Your custom action here
                spreadsheet.updateCell({ value: 'Custom action executed' }, 'A1');
              }
            }
          ]
        }
      ]
    );
  };

  return (
    <div style=>
      <SpreadsheetComponent
        ref={spreadsheetRef}
        created={handleCreated}
        showFormulaBar={true}
        showSheetTabs={true}
      />
    </div>
  );
}

export default App;

const root = createRoot(document.getElementById('root'));
root.render(<App />);

app.tsx

import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';

function App(): React.ReactElement {
  const spreadsheetRef = React.useRef<SpreadsheetComponent>(null);

  const handleCreated = (): void => {
    const spreadsheet = spreadsheetRef.current;
    if (!spreadsheet) return;

    spreadsheet.addRibbonTabs(
      [
        {
          header: { text: 'Custom tab' },
          content: [
            {
              text: 'Custom',
              tooltipText: 'Custom Btn',
              cssClass: 'e-custom-btn',
              click: () => {
                // Your custom action here
                spreadsheet.updateCell({ value: 'Custom action executed' } as any, 'A1');
              }
            }
          ]
        }
      ]
    );
  };

  return (
    <div style=>
      <SpreadsheetComponent
        ref={spreadsheetRef}
        created={handleCreated}
        showFormulaBar={true}
        showSheetTabs={true}
      />
    </div>
  );
}

export default App;

const root = createRoot(document.getElementById('root')!);
root.render(<App />);

Add Toolbar Items

The React Spreadsheet Editor allows you to extend the Ribbon by adding custom toolbar items. You can make Toolbar items to execute custom actions.

To add these items, the component provides the addToolbarItems method, which lets you insert new tools into a chosen tab. This makes it simple to include your own actions. You can add items to an existing tab or you can include them as part of a new Ribbon tab.

Additionally, you can enhance the visual appearance of ribbon items by adding icons to the custom toolbar items using prefixIcon and suffixIcon properties of ToolbarItemModel. This helps users quickly identify and access the features they need.

The following code sample shows how to add toolbar items.

app.jsx

import * as React from 'react';
import { createRoot } from 'react-dom/client';
import {
  SpreadsheetComponent,
  SheetsDirective,
  SheetDirective,
  RangesDirective,
  ColumnsDirective,
  ColumnDirective,
} from '@syncfusion/ej2-react-spreadsheet';

function App() {
  const spreadsheetRef = React.useRef(null);
  const CUSTOM_IDS = {
    quickNote: 'custom_quick_note',
    highlight: 'custom_highlight',
    clear: 'custom_clear',
  };

  const onQuickNote = () => {
    const spreadsheet = spreadsheetRef.current;
    if (!spreadsheet) return;
    const sheet = spreadsheet.getActiveSheet();
    const range = sheet.selectedRange || sheet.activeCell || 'A1';
    spreadsheet.updateCell({ notes: { text: 'Note' } }, range);
  };

  const onHighlight = () => {
    const spreadsheet = spreadsheetRef.current;
    if (!spreadsheet) return;
    const sheet = spreadsheet.getActiveSheet();
    const range = sheet.selectedRange || sheet.activeCell || 'A1';
    spreadsheet.cellFormat({ backgroundColor: '#FFF9C4', color: '#5D4037' }, range);
  };

  const onClear = () => {
    const spreadsheet = spreadsheetRef.current;
    if (!spreadsheet) return;
    const sheet = spreadsheet.getActiveSheet();
    const range = sheet.selectedRange || sheet.activeCell || 'A1';
    spreadsheet.clear({ type: 'Clear All', range });
  };

  const handleCreated = () => {
    const spreadsheet = spreadsheetRef.current;
    if (!spreadsheet) return;
    spreadsheet.addToolbarItems('Home', [
      {
        id: CUSTOM_IDS.quickNote,
        text: 'Quick Note',
        tooltipText: 'Insert a short note in the current selection',
        click: onQuickNote,
      },
      {
        id: CUSTOM_IDS.highlight,
        text: 'Highlight',
        tooltipText: 'Highlight the current selection',
        click: onHighlight,
      },
      {
        id: CUSTOM_IDS.clear,
        text: 'Clear',
        tooltipText: 'Clear contents of the current selection',
        click: onClear,
      },
    ]);
  };

  return (
    <div style=>
      <SpreadsheetComponent
        ref={spreadsheetRef}
        created={handleCreated}
        showFormulaBar={false}
        showSheetTabs={false}
        allowInsert={true}
        allowDelete={true}
        allowMerge={true}
      >
        <SheetsDirective>
          <SheetDirective>
            <RangesDirective>
            </RangesDirective>
            <ColumnsDirective>
              <ColumnDirective width={120} />
              <ColumnDirective width={140} />
              <ColumnDirective width={140} />
              <ColumnDirective width={160} />
            </ColumnsDirective>
          </SheetDirective>
        </SheetsDirective>
      </SpreadsheetComponent>
    </div>
  );
}

export default App;

const root = createRoot(document.getElementById('root'));
root.render(<App />);

app.tsx

import * as React from 'react';
import { createRoot } from 'react-dom/client';
import {
  SpreadsheetComponent,
  SheetsDirective,
  SheetDirective,
  RangesDirective,
  ColumnsDirective,
  ColumnDirective,
} from '@syncfusion/ej2-react-spreadsheet';

function App(): React.ReactElement {
  const spreadsheetRef = React.useRef<SpreadsheetComponent>(null);
  const CUSTOM_IDS = {
    quickNote: 'custom_quick_note',
    highlight: 'custom_highlight',
    clear: 'custom_clear',
  };

  const onQuickNote = (): void => {
    const spreadsheet = spreadsheetRef.current;
    if (!spreadsheet) return;
    const sheet: any = spreadsheet.getActiveSheet();
    const range = sheet.selectedRange || sheet.activeCell || 'A1';
    spreadsheet.updateCell({ notes: { text: 'Note' } } as any, range);
  };

  const onHighlight = (): void => {
    const spreadsheet = spreadsheetRef.current;
    if (!spreadsheet) return;
    const sheet: any = spreadsheet.getActiveSheet();
    const range = sheet.selectedRange || sheet.activeCell || 'A1';
    spreadsheet.cellFormat({ backgroundColor: '#FFF9C4', color: '#5D4037' }, range);
  };

  const onClear = (): void => {
    const spreadsheet = spreadsheetRef.current;
    if (!spreadsheet) return;
    const sheet: any = spreadsheet.getActiveSheet();
    const range = sheet.selectedRange || sheet.activeCell || 'A1';
    spreadsheet.clear({ type: 'Clear All', range });
  };

  const handleCreated = (): void => {
    const spreadsheet = spreadsheetRef.current;
    if (!spreadsheet) return;
    spreadsheet.addToolbarItems('Home', [
      {
        id: CUSTOM_IDS.quickNote,
        text: 'Quick Note',
        tooltipText: 'Insert a short note in the current selection',
        click: onQuickNote,
      },
      {
        id: CUSTOM_IDS.highlight,
        text: 'Highlight',
        tooltipText: 'Highlight the current selection',
        click: onHighlight,
      },
      {
        id: CUSTOM_IDS.clear,
        text: 'Clear',
        tooltipText: 'Clear contents of the current selection',
        click: onClear,
      },
    ] as any);
  };

  return (
    <div style=>
      <SpreadsheetComponent
        ref={spreadsheetRef}
        created={handleCreated}
        showFormulaBar={false}
        showSheetTabs={false}
        allowInsert={true}
        allowDelete={true}
        allowMerge={true}
      >
        <SheetsDirective>
          <SheetDirective>
            <RangesDirective>
            </RangesDirective>
            <ColumnsDirective>
              <ColumnDirective width={120} />
              <ColumnDirective width={140} />
              <ColumnDirective width={140} />
              <ColumnDirective width={160} />
            </ColumnsDirective>
          </SheetDirective>
        </SheetsDirective>
      </SpreadsheetComponent>
    </div>
  );
}

export default App;

const root = createRoot(document.getElementById('root')!);
root.render(<App />);

Hide or Show Ribbon Tabs and Items

The React Spreadsheet Editor allows you to hide or show ribbon tabs and toolbar items. This helps you create a simple and clean user interface by showing only the tools that are needed.

You can hide any ribbon tab by using the hideRibbonTabs method. You can hide toolbar items using the hideToolbarItems method, where the items are hidden based on their index in the tab.

The following code sample shows how to hide or show ribbon items.

app.jsx

import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';

function App() {
  const spreadsheetRef = React.useRef(null);

  // Items in the Home tab to hide/show (by index)
  // Adjust these indices based on your app's ribbon layout
  const homeItemsToToggle = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 14, 15];

  const hideInsertTab = () => {
    const spreadsheet = spreadsheetRef.current;
    if (!spreadsheet) return;
    spreadsheet.hideRibbonTabs(['Insert']);
  };

  const showInsertTab = () => {
    const spreadsheet = spreadsheetRef.current;
    if (!spreadsheet) return;
    spreadsheet.hideRibbonTabs(['Insert'], false);
  };

  const hideHomeItems = () => {
    const spreadsheet = spreadsheetRef.current;
    if (!spreadsheet) return;
    spreadsheet.hideToolbarItems('Home', homeItemsToToggle);
  };

  const showHomeItems = () => {
    const spreadsheet = spreadsheetRef.current;
    if (!spreadsheet) return;
    spreadsheet.hideToolbarItems('Home', homeItemsToToggle, false);
  };

  const handleCreated = () => {
    const spreadsheet = spreadsheetRef.current;
    if (!spreadsheet) return;

    // Initial state: hide the "Insert" tab and selected "Home" items
    spreadsheet.hideRibbonTabs(['Insert']);
    spreadsheet.hideToolbarItems('Home', homeItemsToToggle);
  };

  return (
    <div style=>
      <div style=>
        <button onClick={showInsertTab}>Show Insert Tab</button>
        <button onClick={hideInsertTab}>Hide Insert Tab</button>
        <button onClick={showHomeItems}>Show Home Items</button>
        <button onClick={hideHomeItems}>Hide Home Items</button>
      </div>

      <SpreadsheetComponent
        ref={spreadsheetRef}
        created={handleCreated}
      />
    </div>
  );
}

export default App;

const root = createRoot(document.getElementById('root'));
root.render(<App />);

app.tsx

import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';

function App(): React.ReactElement {
  const spreadsheetRef = React.useRef<SpreadsheetComponent>(null);

  // Items in the Home tab to hide/show (by index)
  // Adjust these indices based on your app's ribbon layout
  const homeItemsToToggle = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 14, 15];

  const hideInsertTab = (): void => {
    const spreadsheet = spreadsheetRef.current;
    if (!spreadsheet) return;
    spreadsheet.hideRibbonTabs(['Insert']);
  };

  const showInsertTab = (): void => {
    const spreadsheet = spreadsheetRef.current;
    if (!spreadsheet) return;
    (spreadsheet as any).hideRibbonTabs(['Insert'], false);
  };

  const hideHomeItems = (): void => {
    const spreadsheet = spreadsheetRef.current;
    if (!spreadsheet) return;
    spreadsheet.hideToolbarItems('Home', homeItemsToToggle);
  };

  const showHomeItems = (): void => {
    const spreadsheet = spreadsheetRef.current;
    if (!spreadsheet) return;
    (spreadsheet as any).hideToolbarItems('Home', homeItemsToToggle, false);
  };

  const handleCreated = (): void => {
    const spreadsheet = spreadsheetRef.current;
    if (!spreadsheet) return;

    // Initial state: hide the "Insert" tab and selected "Home" items
    spreadsheet.hideRibbonTabs(['Insert']);
    spreadsheet.hideToolbarItems('Home', homeItemsToToggle);
  };

  return (
    <div style=>
      <div style=>
        <button onClick={showInsertTab}>Show Insert Tab</button>
        <button onClick={hideInsertTab}>Hide Insert Tab</button>
        <button onClick={showHomeItems}>Show Home Items</button>
        <button onClick={hideHomeItems}>Hide Home Items</button>
      </div>

      <SpreadsheetComponent
        ref={spreadsheetRef}
        created={handleCreated}
      />
    </div>
  );
}

export default App;

const root = createRoot(document.getElementById('root')!);
root.render(<App />);

Enable or Disable Ribbon Tabs and Items

The React Spreadsheet Editor lets you enable or disable ribbon tabs and toolbar items when needed. You can enable or disable ribbon tabs by using the enableRibbonTabs method. To enable or disable specific toolbar items inside a ribbon tab, use the enableToolbarItems method.
These methods accept an array of ribbon tab names or toolbar item IDs along with a boolean value. Set the value to true to enable or false to disable the items.

The following code sample shows how to enable or disable a ribbon tab and toolbar items.

app.jsx

import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';

function App() {
  const spreadsheetRef = React.useRef(null);

  // Example toolbar item indices inside Home tab to enable/disable
  const homeItemsToToggle = [0, 1, 2, 3, 4, 5];

  const disableInsertTab = () => {
    const spreadsheet = spreadsheetRef.current;
    if (!spreadsheet) return;
    spreadsheet.enableRibbonTabs(['Insert'], false);
  };

  const enableInsertTab = () => {
    const spreadsheet = spreadsheetRef.current;
    if (!spreadsheet) return;
    spreadsheet.enableRibbonTabs(['Insert'], true);
  };

  const disableHomeItems = () => {
    const spreadsheet = spreadsheetRef.current;
    if (!spreadsheet) return;
    spreadsheet.enableToolbarItems('Home', homeItemsToToggle, false);
  };

  const enableHomeItems = () => {
    const spreadsheet = spreadsheetRef.current;
    if (!spreadsheet) return;
    spreadsheet.enableToolbarItems('Home', homeItemsToToggle, true);
  };

  const handleCreated = () => {
    const spreadsheet = spreadsheetRef.current;
    if (!spreadsheet) return;
    // Initial example state: disable Insert tab and a few Home items
    spreadsheet.enableRibbonTabs(['Insert'], false);
    spreadsheet.enableToolbarItems('Home', homeItemsToToggle, false);
  };

  return (
    <div style=>
      <div style=>
        <button onClick={enableInsertTab}>Enable Insert Tab</button>
        <button onClick={disableInsertTab}>Disable Insert Tab</button>
        <button onClick={enableHomeItems}>Enable Home Items</button>
        <button onClick={disableHomeItems}>Disable Home Items</button>
      </div>

      <SpreadsheetComponent
        ref={spreadsheetRef}
        created={handleCreated}
      />
    </div>
  );
}

export default App;

const root = createRoot(document.getElementById('root'));
root.render(<App />);

app.tsx

import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';

const App: React.FC = () => {
  const spreadsheetRef = React.useRef<SpreadsheetComponent | null>(null);

  const homeItemsToToggle: number[] = [0, 1, 2, 3, 4, 5];

  const disableInsertTab = () => {
    const spreadsheet = spreadsheetRef.current as any;
    if (!spreadsheet) return;
    spreadsheet.enableRibbonTabs(['Insert'], false);
  };

  const enableInsertTab = () => {
    const spreadsheet = spreadsheetRef.current as any;
    if (!spreadsheet) return;
    spreadsheet.enableRibbonTabs(['Insert'], true);
  };

  const disableHomeItems = () => {
    const spreadsheet = spreadsheetRef.current as any;
    if (!spreadsheet) return;
    spreadsheet.enableToolbarItems('Home', homeItemsToToggle, false);
  };

  const enableHomeItems = () => {
    const spreadsheet = spreadsheetRef.current as any;
    if (!spreadsheet) return;
    spreadsheet.enableToolbarItems('Home', homeItemsToToggle, true);
  };

  const handleCreated = () => {
    const spreadsheet = spreadsheetRef.current as any;
    if (!spreadsheet) return;
    spreadsheet.enableRibbonTabs(['Insert'], false);
    spreadsheet.enableToolbarItems('Home', homeItemsToToggle, false);
  };

  return (
    <div style=>
      <div style=>
        <button onClick={enableInsertTab}>Enable Insert Tab</button>
        <button onClick={disableInsertTab}>Disable Insert Tab</button>
        <button onClick={enableHomeItems}>Enable Home Items</button>
        <button onClick={disableHomeItems}>Disable Home Items</button>
      </div>

      <SpreadsheetComponent
        ref={spreadsheetRef}
        created={handleCreated}
      />
    </div>
  );
};

export default App;

const rootElement = document.getElementById('root') as HTMLElement;
const root = createRoot(rootElement);
root.render(<App />);

Note

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

See Also

• Worksheet
• Rows and columns
• Cell templates
• Context menu customization
• File menu customization
• Theming-and-styling