Workbook API in React Spreadsheet API component

    <div id="spreadsheet"></div>

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

const App = () => {
  return (
    /* Set 'Car Stock Report' sheet as active sheet. */
    <SpreadsheetComponent activeSheetIndex={1}>
      <SheetsDirective>
        <SheetDirective name="Car Sales Report" />
        <SheetDirective name="Car Stock Report" />
      </SheetsDirective>
    </SpreadsheetComponent>
  );
};
export default App;

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

    <div id="spreadsheet"></div>

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

const App = () => {
  const autoFillSettings: AutoFillSettingsModel = {
    fillType: 'CopyCells',
    showFillOptions: true,
  };

  return (
    <SpreadsheetComponent
      autoFillSettings={autoFillSettings}
    />
  );
};
export default App;

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

    <div id="spreadsheet"></div>

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

const App = () => {
  const cellStyle: CellStyleModel = {
    fontWeight: 'bold',
    fontSize: '12pt',
    fontStyle: 'italic',
    textIndent: '2pt',
    backgroundColor: '#4b5366',
    color: '#ffffff',
  };
  return <SpreadsheetComponent cellStyle={cellStyle} />;
};
export default App;

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

    <div id="spreadsheet"></div>

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

const App = () => {
  const definedNames: DefineNameModel[] = [
    { name: 'Group1', refersTo: 'Sheet1!A1:B5' },
  ];

  return (
    <SpreadsheetComponent definedNames={definedNames} />
  );
};
export default App;

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

    <div id="spreadsheet"></div>

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

const App = () => {
  return (
    <SpreadsheetComponent
      height="600px"
    ></SpreadsheetComponent>
  );
};

export default App;

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

    <div id="spreadsheet"></div>

import React from 'react';
import { createRoot } from 'react-dom/client';
import { salesData } from './data';
import {
  SpreadsheetComponent,
  SheetsDirective,
  SheetDirective,
  RangesDirective,
  RangeDirective,
  RowsDirective,
  RowDirective,
  CellsDirective,
  CellDirective,
  ColumnsDirective,
  ColumnDirective,
} from '@syncfusion/ej2-react-spreadsheet';

const App = () => {
  return (
    <SpreadsheetComponent>
      <SheetsDirective>
        <SheetDirective name="First Sheet">
          <RangesDirective>
            <RangeDirective dataSource={salesData} />
          </RangesDirective>
          <RowsDirective>
            <RowDirective index={30}>
              <CellsDirective>
                <CellDirective index={4} value="Total Amount:" />
                <CellDirective formula="=SUM(F2:F30)" />
              </CellsDirective>
            </RowDirective>
          </RowsDirective>
        </SheetDirective>
        <SheetDirective name="Second Sheet">
          <ColumnsDirective>
            <ColumnDirective width={180} />
            <ColumnDirective width={130} />
            <ColumnDirective width={130} />
          </ColumnsDirective>
        </SheetDirective>
      </SheetsDirective>
    </SpreadsheetComponent>
  );
};
export default App;

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

    <div id="spreadsheet"></div>

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

const App = () => {
  return (
    <SpreadsheetComponent
      /**
       * Specifies the width.
       */
      width="600px"
    />
  );
};
export default App;

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

    <div id="spreadsheet"></div>

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

const App = () => {
  const spreadsheetRef = useRef<SpreadsheetComponent>(null);
  const onClick = (): void => {
    // Apply the styles to the cells in the specified range.
    spreadsheetRef.current?.cellFormat(
      {
        fontWeight: 'bold',
        fontSize: '12pt',
        backgroundColor: '#279377',
        color: '#ffffff',
      },
      'A2:E2'
    );
    spreadsheetRef.current?.cellFormat(
      { verticalAlign: 'middle', fontFamily: 'Axettac Demo' },
      'A2:E12'
    );
    spreadsheetRef.current?.cellFormat({ textAlign: 'center' }, 'A2:A12');
    // Apply text-indent to 2nd & 4th columns.
    const style: { textAlign: string; textIndent: string } = {
      textAlign: 'left',
      textIndent: '8pt',
    };
    spreadsheetRef.current?.cellFormat(style, 'B2:B12');
    spreadsheetRef.current?.cellFormat(style, 'D2:D12');
    spreadsheetRef.current?.cellFormat(
      { fontStyle: 'italic', textAlign: 'right' },
      'C3:C12'
    );
    spreadsheetRef.current?.cellFormat({ textAlign: 'center' }, 'E2:E12');
  };

  return (
    <div>
      <button onClick={onClick}>Apply Cell Format</button>
      <SpreadsheetComponent ref={spreadsheetRef} />
    </div>
  );
};
export default App;

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

    <div id="spreadsheet"></div>

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

const App = () => {
  const spreadsheetRef = useRef<SpreadsheetComponent>(null);
  const onClick = (): void => {
    // Calculate the result of an arithmetic expression or formula.
    spreadsheetRef.current?.computeExpression('522+1');
    spreadsheetRef.current?.computeExpression('=SUM(F2:F3)');
  };

  return (
    <div>
      <button onClick={onClick}>To Compute Expression</button>
      <SpreadsheetComponent ref={spreadsheetRef} />
    </div>
  );
};
export default App;

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

    <div id="spreadsheet"></div>

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

const App = () => {
  const spreadsheetRef = useRef<SpreadsheetComponent>(null);
  const onClick = (): void => {
    spreadsheetRef.current?.delete(1, 1, 'Row', 'Sheet1');
    spreadsheetRef.current?.delete(2, 2, 'Column', 'Sheet1');
  };

  return (
    <div>
      <button onClick={onClick}>Delete Row & Column</button>
      <SpreadsheetComponent ref={spreadsheetRef} />
    </div>
  );
};
export default App;

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

    <div id="spreadsheet"></div>

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

const App = () => {
  const spreadsheetRef = useRef<SpreadsheetComponent>(null);

  const onClick = (): void => {
    spreadsheetRef.current?.deleteChart('Chart');
  };

  const onCreated = (): void => {
    spreadsheetRef.current?.insertChart([
      {
        type: 'Line',
        theme: 'Material',
        isSeriesInRows: false,
        range: 'A1:B5',
        id: 'Chart',
      },
    ]);
  };

  return (
    <div>
      <button onClick={onClick}>Delete Chart</button>
      <SpreadsheetComponent ref={spreadsheetRef} created={onCreated} />
    </div>
  );
};
export default App;

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

    <div id="spreadsheet"></div>

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

const App = () => {
  const spreadsheetRef = useRef<SpreadsheetComponent>(null);
  const onClick = (): void => {
    spreadsheetRef.current?.duplicateSheet();
    spreadsheetRef.current?.duplicateSheet(0);
  };

  return (
    <div>
      <button onClick={onClick}>Make Duplicate Sheet</button>
      <SpreadsheetComponent ref={spreadsheetRef} />
    </div>
  );
};
export default App;

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

    <div id="spreadsheet"></div>

import React, { useRef } from 'react';
import { createRoot } from 'react-dom/client';
import { salesData } from './data';
import {
  SpreadsheetComponent,
  SheetsDirective,
  SheetDirective,
  RangesDirective,
  RangeDirective,
} from '@syncfusion/ej2-react-spreadsheet';

const App = () => {
  const spreadsheetRef = useRef<SpreadsheetComponent>(null);
  const onClick = (): void => {
    // Return the specified cell address data as JSON.
    spreadsheetRef.current
      ?.getData('Sheet1!A1:B2')
      .then((data) => console.log(data));
    spreadsheetRef.current?.getData('A1:B2').then((data) => console.log(data));
  };

  return (
    <div>
      <button onClick={onClick}>Get Data</button>
      <SpreadsheetComponent ref={spreadsheetRef}>
        <SheetsDirective>
          <SheetDirective>
            <RangesDirective>
              <RangeDirective dataSource={salesData} />
            </RangesDirective>
          </SheetDirective>
        </SheetsDirective>
      </SpreadsheetComponent>
    </div>
  );
};
export default App;

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

    <div id="spreadsheet"></div>

import React, { useRef } from 'react';
import { createRoot } from 'react-dom/client';
import { salesData } from './data';
import {
  SpreadsheetComponent,
  SheetsDirective,
  SheetDirective,
  RangesDirective,
  RangeDirective,
  getCell,
  CellModel,
} from '@syncfusion/ej2-react-spreadsheet';

const App = () => {
  const spreadsheetRef = useRef<SpreadsheetComponent>(null);
  const onClick = (): void => {
    // Get the cell model for the given row, column, and sheet indexes.
    const cell: CellModel = getCell(
      0,
      0,
      spreadsheetRef.current?.getActiveSheet()!
    );
    // To get the formatted cell value, specify the cell model.
    const displayText: string = spreadsheetRef.current?.getDisplayText(cell);
    console.log(displayText);
  };

  return (
    <div>
      <button onClick={onClick}>Get Display Text</button>
      <SpreadsheetComponent ref={spreadsheetRef}>
        <SheetsDirective>
          <SheetDirective>
            <RangesDirective>
              <RangeDirective dataSource={salesData} />
            </RangesDirective>
          </SheetDirective>
        </SheetsDirective>
      </SpreadsheetComponent>
    </div>
  );
};
export default App;

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

    <div id="spreadsheet"></div>

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

const App = () => {
  const spreadsheetRef = useRef<SpreadsheetComponent>(null);
  const onClick = (): void => {
    // Insert a chart into a spreadsheet using the chart options specified.
    spreadsheetRef.current?.insertChart([
      {
        type: 'Line',
        theme: 'Material',
        isSeriesInRows: false,
        range: 'A1',
        id: 'Chart',
      },
    ]);
  };

  return (
    <div>
      <button onClick={onClick}>Insert Chart</button>
      <SpreadsheetComponent ref={spreadsheetRef}></SpreadsheetComponent>
    </div>
  );
};
export default App;

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

    <div id="spreadsheet"></div>

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

const App = () => {
  const spreadsheetRef = useRef<SpreadsheetComponent>(null);
  const onClick = (): void => {
    // Insert the column at the starting column index specified.
    spreadsheetRef.current?.insertColumn([{ index: 1, width: 95 }], 1);
  };

  return (
    <div>
      <button onClick={onClick}>Insert Column</button>
      <SpreadsheetComponent ref={spreadsheetRef}></SpreadsheetComponent>
    </div>
  );
};
export default App;

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

    <div id="spreadsheet"></div>

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

const App = () => {
  const spreadsheetRef = useRef<SpreadsheetComponent>(null);
  const onClick = (): void => {
    // Insert a row at the specified row index.
    spreadsheetRef.current?.insertRow(4, 4);
  };

  return (
    <div>
      <button onClick={onClick}>Insert Row</button>
      <SpreadsheetComponent ref={spreadsheetRef}></SpreadsheetComponent>
    </div>
  );
};
export default App;

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

    <div id="spreadsheet"></div>

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

const App = () => {
  const spreadsheetRef = useRef<SpreadsheetComponent>(null);
  const onClick = (): void => {
    // Insert a sheet at the specified sheet index.
    spreadsheetRef.current?.insertSheet(0, 2);
  };

  return (
    <div>
      <button onClick={onClick}>Insert Sheet</button>
      <SpreadsheetComponent ref={spreadsheetRef}></SpreadsheetComponent>
    </div>
  );
};
export default App;

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

    <div id="spreadsheet"></div>

import React, { useRef } from 'react';
import { createRoot } from 'react-dom/client';
import {
  ProtectSettingsModel,
  SpreadsheetComponent,
} from '@syncfusion/ej2-react-spreadsheet';

const App = () => {
  const spreadsheetRef = useRef<SpreadsheetComponent>(null);
  const onClick = (): void => {
    // Protect the worksheet.
    const protectSetting: ProtectSettingsModel = {
      selectCells: true,
      formatCells: false,
      formatRows: false,
      formatColumns: false,
      insertLink: false,
    };
    spreadsheetRef.current?.protectSheet('Sheet1', protectSetting);
    // Unlock the A2:AZ100 cell range.
    spreadsheetRef.current?.lockCells('A2:AZ100', false);
    // Lock the A1:Z1 cell range.
    spreadsheetRef.current?.lockCells('A1:Z1', true);
  };

  return (
    <div>
      <button onClick={onClick}>Lock Cells</button>
      <SpreadsheetComponent ref={spreadsheetRef}></SpreadsheetComponent>
    </div>
  );
};
export default App;

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

    <div id="spreadsheet"></div>

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

const App = () => {
  const spreadsheetRef = useRef<SpreadsheetComponent>(null);
  const onCreated = (): void => {
    // Merge the cells in the specified range.
    spreadsheetRef.current?.merge('B1:E2');
  };

  return (
    <SpreadsheetComponent
      ref={spreadsheetRef}
      created={onCreated}
    ></SpreadsheetComponent>
  );
};
export default App;

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

    <div id="spreadsheet"></div>

import React, { useRef } from 'react';
import { createRoot } from 'react-dom/client';
import {
  SpreadsheetComponent,
  SheetsDirective,
  SheetDirective,
} from '@syncfusion/ej2-react-spreadsheet';

const App = () => {
  const spreadsheetRef = useRef<SpreadsheetComponent>(null);
  const onClick = (): void => {
    // Move the active sheet to the specified position.
    spreadsheetRef.current?.moveSheet(1);
    // Move the list of specified sheets to the specified position.
    spreadsheetRef.current?.moveSheet(0, [1, 2]);
  };

  return (
    <div>
      <button onClick={onClick}>Move Sheets</button>
      <SpreadsheetComponent ref={spreadsheetRef}>
        <SheetsDirective>
          <SheetDirective></SheetDirective>
          <SheetDirective></SheetDirective>
          <SheetDirective></SheetDirective>
        </SheetsDirective>
      </SpreadsheetComponent>
    </div>
  );
};
export default App;

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

    <div id="spreadsheet"></div>

import React, { useRef } from 'react';
import { createRoot } from 'react-dom/client';
import { salesData } from './data';
import {
  SpreadsheetComponent,
  SheetsDirective,
  SheetDirective,
  RangesDirective,
  RangeDirective,
  getFormatFromType,
} from '@syncfusion/ej2-react-spreadsheet';

const App = () => {
  const spreadsheetRef = useRef<SpreadsheetComponent>(null);
  const onCreated = (): void => {
    // Apply the number format to the specified range of cells.
    spreadsheetRef.current?.numberFormat('$#,##0.00', 'E1:E3');
    // Apply the accounting format to the specified range of cells.
    spreadsheetRef.current?.numberFormat(
      getFormatFromType('Accounting'),
      'E4:E10'
    );
    // Apply the percentage format to the specified range of cells.
    spreadsheetRef.current?.numberFormat('0%', 'F3:F10');
  };

  return (
    <SpreadsheetComponent ref={spreadsheetRef} created={onCreated}>
      <SheetsDirective>
        <SheetDirective name="Car Sales Report">
          <RangesDirective>
            <RangeDirective dataSource={salesData} />
          </RangesDirective>
        </SheetDirective>
      </SheetsDirective>
    </SpreadsheetComponent>
  );
};
export default App;

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

    <div id="spreadsheet"></div>

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

const App = () => {
  const spreadsheetRef = useRef<SpreadsheetComponent>(null);
  let response = Object;
  const save = (): void => {
    // Save the spreadsheet data as JSON.
    spreadsheetRef.current?.saveAsJson().then((Json) => (response = Json));
  };

  const open = (): void => {
    // Load the JSON data to the spreadsheetRef.currrent?.
    spreadsheetRef.current?.openFromJson({ file: response.jsonObject });
  };

  return (
    <div>
      <SpreadsheetComponent ref={spreadsheetRef} />
      <button onClick={save}>Save</button>
      <button onClick={open}>Open</button>
    </div>
  );
};
export default App;

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

    <div id="spreadsheet"></div>

import React, { useRef } from 'react';
import { createRoot } from 'react-dom/client';
import { salesData } from './data';
import {
  SpreadsheetComponent,
  SheetsDirective,
  RangesDirective,
  RangeDirective,
  SheetDirective,
} from '@syncfusion/ej2-react-spreadsheet';

const App = () => {
  const spreadsheetRef = useRef<SpreadsheetComponent>(null);
  const onClick = (): void => {
    spreadsheetRef.current?.save({
      url: 'https://services.syncfusion.com/react/production/api/spreadsheet/save',
      fileName: 'Worksheet',
      saveType: 'Xlsx',
    });
  };

  return (
    <div>
      <SpreadsheetComponent ref={spreadsheetRef}>
        <SheetsDirective>
          <SheetDirective name="Car Sales Report">
            <RangesDirective>
              <RangeDirective dataSource={salesData} />
            </RangesDirective>
          </SheetDirective>
        </SheetsDirective>
      </SpreadsheetComponent>
      <button onClick={onClick}>Save</button>
    </div>
  );
};
export default App;

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

    <div id="spreadsheet"></div>

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

const App = () => {
  const spreadsheetRef = useRef<SpreadsheetComponent>(null);
  let response = Object;
  const save = (): void => {
    // Save the spreadsheet data as JSON.
    spreadsheetRef.current?.saveAsJson().then((Json) => (response = Json));
  };

  const open = (): void => {
    // Load the JSON data to the spreadsheetRef.currrent?.
    spreadsheetRef.current?.openFromJson({ file: response.jsonObject });
  };

  return (
    <div>
      <SpreadsheetComponent ref={spreadsheetRef} />
      <button onClick={save}>Save</button>
      <button onClick={open}>Open</button>
    </div>
  );
};
export default App;

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

    <div id="spreadsheet"></div>

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

const App = () => {
  const spreadsheetRef = useRef<SpreadsheetComponent>(null);
  const onClick = (): void => {
    // Sets the border to the specified cell range.
    spreadsheetRef.current?.setBorder(
      { border: '1px solid #000000' },
      'C6:G8',
      'Outer'
    );
    spreadsheetRef.current?.setBorder({ border: '1px solid #000000' });
  };

  return (
    <div>
      <SpreadsheetComponent ref={spreadsheetRef}></SpreadsheetComponent>
      <button onClick={onClick}>Set Border</button>
    </div>
  );
};
export default App;

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

    <div id="spreadsheet"></div>

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

const App = () => {
  const spreadsheetRef = useRef<SpreadsheetComponent>(null);
  const onClick = (): void => {
    // To split the merged cell into multiple cells.
    spreadsheetRef.current?.unMerge('B1:E2');
  };

  const onCreated = (): void => {
    spreadsheetRef.current?.merge('B1:E2');
  };

  return (
    <div>
      <SpreadsheetComponent ref={spreadsheetRef} created={onCreated} />
      <button onClick={onClick}>UnMerge Cells</button>
    </div>
  );
};

export default App;

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

    <div id="spreadsheet"></div>

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

const App = () => {
  const spreadsheetRef = useRef<SpreadsheetComponent>(null);
  const onClick = (): void => {
    // To wrap/unwrap the cell's text content with the specified address.
    spreadsheetRef.current?.wrap('B5', true);
  };

  return (
    <div>
      <SpreadsheetComponent ref={spreadsheetRef} />
      <button onClick={onClick}>To Wrap</button>
    </div>
  );
};
export default App;

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

<div id='Spreadsheet'></div>

new Spreadsheet({
      beforeCellFormat: (args: BeforeCellFormatArgs) => {
      }
     ...
 }, '#Spreadsheet');

<div id='Spreadsheet'></div>

 new Spreadsheet({
     beforeCellUpdate: (args: BeforeCellUpdateArgs) => {
     }
     ...
 }, '#Spreadsheet');

<div id='Spreadsheet'></div>

new Spreadsheet({
      beforeOpen: (args: BeforeOpenEventArgs) => {
      }
     ...
 }, '#Spreadsheet');

<div id='Spreadsheet'></div>

new Spreadsheet({
      beforeSave: (args: BeforeSaveEventArgs) => {
      }
     ...
 }, '#Spreadsheet');

<div id='Spreadsheet'></div>

new Spreadsheet({
      openFailure: (args: OpenFailureArgs) => {
      }
     ...
 }, '#Spreadsheet');

<div id='Spreadsheet'></div>

new Spreadsheet({
     queryCellInfo: (args: CellInfoEventArgs) => {
     }
     ...
 }, '#Spreadsheet');

<div id='Spreadsheet'></div>

new Spreadsheet({
      saveComplete: (args: SaveCompleteEventArgs) => {
      }
     ...
 }, '#Spreadsheet');