Customize File Menu in React Spreadsheet

3 Jul 202614 minutes to read

The React Spreadsheet Editor component lets you customize the File menu. You can hide file menu items, disable items, and add your own custom items with click actions. This helps you build a clear, task‑focused menu. You can perform the following file menu customization options in the spreadsheet

  • Add File Menu Items
  • Hide/Show File Menu Items
  • Enable/Disable File Menu Items

Add Custom File Menu Items

In the React Spreadsheet Editor, you can add custom items to the File menu to include your custom actions. These items are inserted before or after a chosen built‑in File menu item by using the addFileMenuItems method.

A custom item can have its own text, icon, and sub‑items, and its click action is handled in the fileMenuItemSelect event, where the selected item is identified and the defined functionality is executed.

The following code sample shows how to add custom items in file menu:

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;

    // Add a single custom item after "Print"
    spreadsheet.addFileMenuItems(
      [
        { text: 'Quick Export (.csv)', iconCss: 'e-icons e-export' }
      ],
      'Print'
    );
  };

  // Run the action for our custom item
  const handleFileMenuItemSelect = (args) => {
    const spreadsheet = spreadsheetRef.current;
    if (!spreadsheet) return;

    if (args.item.text === 'Quick Export (.csv)') {
      spreadsheet.save({ saveType: 'Csv' });
    }
  };

  return (
    <div style=>
      <SpreadsheetComponent
        ref={spreadsheetRef}
        created={handleCreated}
        fileMenuItemSelect={handleFileMenuItemSelect}
        openUrl="https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/open"
        saveUrl="https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save"
      />
    </div>
  );
}

export default App;

const root = createRoot(document.getElementById('root'));
root.render(<App />);
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;

    // Add a single custom item after "Save"
    spreadsheet.addFileMenuItems(
      [
        { text: "Quick Export (.csv)", iconCss: "e-icons e-export" }
      ],
      "Print"
  );
  };

  // Run the action for our custom item
  const handleFileMenuItemSelect = (args: any): void => {
    const spreadsheet = spreadsheetRef.current;
    if (!spreadsheet) return;

    if (args.item.text === 'Quick Export (.csv)') {
      spreadsheet.save({ saveType: 'Csv' });
    }
  };

  return (
    <div style=>
      <SpreadsheetComponent
        ref={spreadsheetRef}
        created={handleCreated}
        fileMenuItemSelect={handleFileMenuItemSelect}
        openUrl="https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/open"
        saveUrl="https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save"
      />
    </div>
  );
}

export default App;

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

Show or Hide File Menu Items

You can show or hide File menu items using the hideFileMenuItems method in fileMenuBeforeOpen event.

The following code sample shows how to hide or show file menu items:

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);

  // Toggle this to control visibility
  const [hideItems, setHideItems] = React.useState(true);

  // File menu items are created dynamically; update visibility here
  const handleFileMenuBeforeOpen = () => {
    const spreadsheet = spreadsheetRef.current;
    if (!spreadsheet) return;

    if (hideItems) {
      spreadsheet.hideFileMenuItems(['Open', 'Save As']);
    } else {
      // Show again (second arg: false)
      spreadsheet.hideFileMenuItems(['Open', 'Save As'], false);
    }
  };

  return (
    <div style=>
      <div style=>
        <button onClick={() => setHideItems(false)}>Show</button>
        <button onClick={() => setHideItems(true)}>Hide</button>
      </div>

      <SpreadsheetComponent
        ref={spreadsheetRef}
        fileMenuBeforeOpen={handleFileMenuBeforeOpen}
        openUrl="https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/open"
        saveUrl="https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save"
      />
    </div>
  );
}

export default App;

const root = createRoot(document.getElementById('root'));
root.render(<App />);
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);

  // Toggle this to control visibility
  const [hideItems, setHideItems] = React.useState(true);

  // File menu items are created dynamically; update visibility here
  const handleFileMenuBeforeOpen = (): void => {
    const spreadsheet = spreadsheetRef.current;
    if (!spreadsheet) return;

    if (hideItems) {
      spreadsheet.hideFileMenuItems(['Open', 'Save As']);
    } else {
      // Show again (second arg: false)
      (spreadsheet as any).hideFileMenuItems(['Open', 'Save As'], false);
    }
  };

  return (
    <div style=>
      <div style=>
        <button onClick={() => setHideItems(false)}>Show</button>
        <button onClick={() => setHideItems(true)}>Hide</button>
      </div>

      <SpreadsheetComponent
        ref={spreadsheetRef}
        fileMenuBeforeOpen={handleFileMenuBeforeOpen}
        openUrl="https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/open"
        saveUrl="https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save"
      />
    </div>
  );
}

export default App;

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

Enable or Disable File Menu Items

You can use the enableFileMenuItems method in the fileMenuBeforeOpen event to enable or disable File menu items. If there are duplicate item texts, target the item by its unique ID and set the third parameter isUniqueId to true.

The following code sample shows how to enable or disable file menu items

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);

  // Toggle this to control "New" item enable/disable by unique ID
  const [disableNew, setDisableNew] = React.useState(true);

  // Enable/disable items when the menu is about to open
  const handleFileMenuBeforeOpen = () => {
    const spreadsheet = spreadsheetRef.current;
    if (!spreadsheet) return;

    const newItemId = `${spreadsheet.element.id}_New`;

    // Enable when false, disable when true
    spreadsheet.enableFileMenuItems([newItemId], !disableNew, true);
  };

  return (
    <div style=>
      <div style=>
        <button onClick={() => setDisableNew(false)}>Enable New</button>
        <button onClick={() => setDisableNew(true)}>Disable New</button>
      </div>

      <SpreadsheetComponent
        ref={spreadsheetRef}
        fileMenuBeforeOpen={handleFileMenuBeforeOpen}
        openUrl="https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/open"
        saveUrl="https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save"
      />
    </div>
  );
}

export default App;

const root = createRoot(document.getElementById('root'));
root.render(<App />);
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);

  // Toggle this to control "New" item enable/disable by unique ID
  const [disableNew, setDisableNew] = React.useState(true);

  // Enable/disable items when the menu is about to open
  const handleFileMenuBeforeOpen = (): void => {
    const spreadsheet = spreadsheetRef.current;
    if (!spreadsheet) return;

    const newItemId = `${spreadsheet.element.id}_New`;

    // Enable when false, disable when true
    spreadsheet.enableFileMenuItems([newItemId], !disableNew, true);
  };

  return (
    <div style=>
      <div style=>
        <button onClick={() => setDisableNew(false)}>Enable New</button>
        <button onClick={() => setDisableNew(true)}>Disable New</button>
      </div>

      <SpreadsheetComponent
        ref={spreadsheetRef}
        fileMenuBeforeOpen={handleFileMenuBeforeOpen}
        openUrl="https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/open"
        saveUrl="https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save"
      />
    </div>
  );
}

export default App;

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

You can also use fileMenuBeforeClose when you need to run logic just before the File menu closes.