How to Change Active Sheet While Importing a File in React Spreadsheet

17 Aug 20262 minutes to read

You can change the active sheet of the imported file by updating the activeSheetIndex property on the openComplete event.

The following code example shows how to set the active sheet when importing an Excel file.

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 openCompleteHandler = () => {
    let spreadsheet = spreadsheetRef.current;
    if (spreadsheet) {
      spreadsheet.activeSheetIndex = 2;
    }
  }
  return (
    <SpreadsheetComponent
      openUrl='https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/open'
      saveUrl='https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save'
      ref={spreadsheetRef}
      openComplete={openCompleteHandler}
    >
    </SpreadsheetComponent>
  );
}

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() {
  const spreadsheetRef = React.useRef<SpreadsheetComponent>(null);
  const openCompleteHandler = (): void => {
    let spreadsheet = spreadsheetRef.current;
    if (spreadsheet) {
      spreadsheet.activeSheetIndex = 2;
    }
  }
  return (
    <SpreadsheetComponent
      openUrl='https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/open'
      saveUrl='https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save'
      ref={spreadsheetRef}
      openComplete={openCompleteHandler}
    >
    </SpreadsheetComponent>
  );
}

export default App;

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