syidaxgrid
Home Pricing Settings

GRID FEATURE

Excel import

XLSX import reads a workbook and converts the selected sheet into a Grid column-and-row snapshot. The full parsed workbook and the display snapshot are different data.

Markdown source Features

How it works and when to use it

importDataFromXlsx returns XlsxImportResult. Read the Grid snapshot from xlsxImported's detail. Apply it explicitly in your app to avoid overwriting existing edits accidentally.

In the code, grid is the Grid element prepared in the installation chapter. Check each example's data and settings, and implement the app functions and server endpoints for your project.

Example 1. Read the selected file

file is a File object selected through a file input.

javascript
const parsed = await grid.importDataFromXlsx(await file.arrayBuffer());
console.log(parsed.workbook, parsed.sheets);

Verify the result: Inspect the source workbook and sheets in the return value. There is no parsed.snapshot return field.

Example 2. Apply the converted sheet to Grid

Subscribe to the completion event before starting the import.

javascript
grid.addEventListener('xlsxImported', event => {
  const { snapshot, sheetName } = event.detail;
  grid.columnDefs = [...snapshot.columnDefs];
  grid.rowData = [...snapshot.rowData];
  console.log(sheetName, snapshot.rowData.length);
});

Verify the result: Pass the converted result as new arrays to display it. Activate this subscription only after deciding whether existing work may be replaced.

Example 3. Choose a named sheet

Select the Orders sheet if it exists in the workbook.

javascript
await grid.importDataFromXlsx(await file.arrayBuffer(), { sheetName: 'Orders' });

Verify the result: Only the selected sheet is converted to a display snapshot. Check sheet existence, column structure, and supported formula/style conversion for each file.

Combining features and troubleshooting

Do not assume all Excel formatting, formulas, and merges are reproduced identically. Inspect the converted result and reapply necessary column settings.

Provide loading and error states for large files, and clean up duplicate subscriptions so one import is not applied multiple times.

Related reading