IgrSpreadsheet にワークブックを読み込む

IgrSpreadsheet に、ローカル環境にあるワークブック（Excel ファイル）をロードするサンプルです。

import React, { useRef } from "react";
import { IgrExcelXlsxModule } from "igniteui-react-excel";
import { IgrExcelCoreModule } from "igniteui-react-excel";
import { IgrExcelModule } from "igniteui-react-excel";
import { IgrSpreadsheetModule } from "igniteui-react-spreadsheet";
import { IgrSpreadsheet } from "igniteui-react-spreadsheet";
import { ExcelUtility } from "../ExcelUtility";

IgrExcelCoreModule.register();
IgrExcelModule.register();
IgrExcelXlsxModule.register();
IgrSpreadsheetModule.register();

export const IgrSpreadsheetComponent = () => {
  const spreadsheetRef = useRef<IgrSpreadsheet>(null);
  const openFile = (selectorFiles: FileList) => {
    if (selectorFiles != null && selectorFiles.length > 0) {
      ExcelUtility.load(selectorFiles[0]).then(
        (w) => {
          (spreadsheetRef.current as IgrSpreadsheet).workbook = w;
        },
        (e) => {
          console.error("Workbook Load Error");
        }
      );
    }
  };

  return (
    <div className="container sample">
      <div className="options horizontal">
        <input
          type="file"
          onChange={(e) => openFile(e.target.files as FileList)}
          accept=".xls, .xlt, .xlsx, .xlsm, .xltm, .xltx"
        />
      </div>
      <IgrSpreadsheet height="500px" width="800px" ref={spreadsheetRef} />
    </div>
  );
};