Below we illustrate how you might import an Excel spreadsheet into AG Grid using a third-party library - in this example we're using xlsx.
Auto-Generate Columns is used so no column definitions need to be provided upfront — columns are created from the imported data. The processFileInput callback parses dropped Excel files using the same library.
Click Load Sample Excel to fetch a sample spreadsheet, or drag your own .xlsx file onto the grid. Click Upload File to re-show the file input overlay. The spreadsheet can also be downloaded here.
Example Import Copy Link
import {
AutoGenerateColumnsModule,
ClientSideRowModelModule,
GridApi,
GridOptions,
ModuleRegistry,
ProcessFileInputParams,
createGrid,
enableDevValidations,
} from "ag-grid-community";
import {
ColumnMenuModule,
ContextMenuModule,
ExcelExportModule,
} from "ag-grid-enterprise";
declare let XLSX: any;
if (process.env.NODE_ENV !== "production") {
// Enable extended validations only for development
enableDevValidations();
}
ModuleRegistry.registerModules([
ClientSideRowModelModule,
AutoGenerateColumnsModule,
ExcelExportModule,
ColumnMenuModule,
ContextMenuModule,
]);
let gridApi: GridApi;
const gridOptions: GridOptions = {
autoGenerateColumnDefs: true,
defaultColDef: {
minWidth: 80,
flex: 1,
},
processFileInput: (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);
},
};
function parseWorkbook(workbook: any): Record<string, unknown>[] {
const firstSheetName = workbook.SheetNames[0];
const worksheet = workbook.Sheets[firstSheetName];
return XLSX.utils.sheet_to_json(worksheet);
}
function uploadFile() {
const curr = gridApi.getGridOption("activeOverlay");
gridApi.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.updateGridOptions({
rowData: parseWorkbook(workbook),
activeOverlay: undefined,
});
});
}
const eGridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(eGridDiv, gridOptions);
if (typeof window !== "undefined") {
// Attach external event handlers to window so they can be called from index.html
(<any>window).uploadFile = uploadFile;
(<any>window).importExcel = importExcel;
}