Vue Data GridExcel Import

import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./styles.css";
import {
  AutoGenerateColumnDefsOptions,
  AutoGenerateColumnsModule,
  ClientSideRowModelModule,
  ColDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  ProcessFileInputParams,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ContextMenuModule,
  ExcelExportModule,
} from "ag-grid-enterprise";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  AutoGenerateColumnsModule,
  ExcelExportModule,
  ColumnMenuModule,
  ContextMenuModule,
]);

declare let XLSX: any;

function parseWorkbook(workbook: any): Record<string, unknown>[] {
  const firstSheetName = workbook.SheetNames[0];
  const worksheet = workbook.Sheets[firstSheetName];
  return XLSX.utils.sheet_to_json(worksheet);
}

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div class="example-wrapper">
      <div style="margin-bottom: 1rem">
        <button v-on:click="importExcel()">Load Sample Excel</button>
        <button v-on:click="uploadFile()">Upload File</button>
      </div>
      <ag-grid-vue
        style="width: 100%; height: 100%;"
        @grid-ready="onGridReady"
        :autoGenerateColumnDefs="true"
        :defaultColDef="defaultColDef"
        :processFileInput="processFileInput"
        :rowData="rowData"></ag-grid-vue>
      </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi | null>(null);
    const defaultColDef = ref<ColDef>({
      minWidth: 80,
      flex: 1,
    });
    const processFileInput = ref<(params: ProcessFileInputParams) => void>(
      (params: ProcessFileInputParams) => {
        const file = params.files[0];
        if (!file) return;
        const reader = new FileReader();
        reader.onerror = () => params.fail("Failed to read file");
        reader.onload = (e) => {
          try {
            const workbook = XLSX.read(
              new Uint8Array(e.target?.result as ArrayBuffer),
            );
            params.success(parseWorkbook(workbook));
          } catch {
            params.fail("Failed to parse file");
          }
        };
        reader.readAsArrayBuffer(file);
      },
    );
    const rowData = ref<any[]>(null);

    function uploadFile() {
      const curr = gridApi.value.getGridOption("activeOverlay");
      gridApi.value.setGridOption(
        "activeOverlay",
        curr === "agFileInputOverlay" ? undefined : "agFileInputOverlay",
      );
    }
    function importExcel() {
      fetch("https://www.ag-grid.com/example-assets/olympic-data.xlsx")
        .then((response) => response.arrayBuffer())
        .then((data: ArrayBuffer) => {
          const workbook = XLSX.read(new Uint8Array(data));
          gridApi.value.updateGridOptions({
            rowData: parseWorkbook(workbook),
            activeOverlay: undefined,
          });
        });
    }
    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;
    };

    return {
      gridApi,
      defaultColDef,
      processFileInput,
      rowData,
      onGridReady,
      uploadFile,
      importExcel,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");

.example-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#myGrid {
    flex: 1 1 0px;
    width: 100%;
}