Load XLSX from File Input

Let the user pick an .xlsx file from disk and load it directly into the grid.

Vanilla JS

<input type="file" accept=".xlsx" id="file" />
<div id="grid" style="width: 100%; height: 500px;"></div>

import { createReogrid } from '@reogrid/lite';

const grid = createReogrid('#grid');

const input = document.querySelector<HTMLInputElement>('#file')!;
input.addEventListener('change', async (e) => {
  const file = (e.target as HTMLInputElement).files?.[0];
  if (!file) return;
  await grid.loadFromFile(file);
});

A real workbook opened through that handler — styling, merges, column widths and conditional colors come across with the values.

React

import { Reogrid, type ReogridInstance } from '@reogrid/lite/react';
import { useRef } from 'react';

export default function App() {
  const gridRef = useRef<ReogridInstance>(null);

  async function onFileChange(e: React.ChangeEvent<HTMLInputElement>) {
    const file = e.target.files?.[0];
    if (!file || !gridRef.current) return;
    await gridRef.current.loadFromFile(file);
  }

  return (
    <>
      <input type="file" accept=".xlsx" onChange={onFileChange} />
      <Reogrid ref={gridRef} style={{ width: '100%', height: 500 }} />
    </>
  );
}

Vue

<script setup lang="ts">
import { ref } from 'vue';
import { Reogrid, type ReogridInstance } from '@reogrid/lite/vue';

const gridRef = ref<{ instance: ReogridInstance | null }>();

async function onFileChange(e: Event) {
  const file = (e.target as HTMLInputElement).files?.[0];
  if (!file || !gridRef.value?.instance) return;
  await gridRef.value.instance.loadFromFile(file);
}
</script>

<template>
  <input type="file" accept=".xlsx" @change="onFileChange" />
  <Reogrid ref="gridRef" style="width: 100%; height: 500px" />
</template>

Alternative sources

From a URL: await grid.loadFromUrl('/data/report.xlsx')
From a raw ArrayBuffer: await grid.loadXlsx(arrayBuffer)

Load the whole workbook, not just one sheet

Call these on the grid (grid.loadFromFile), not on grid.worksheet. The worksheet’s own loaders load a single sheet — and before v1.7.0 they had the same names, so grid.worksheet.loadFromFile(file) kept only the first tab and a workbook whose first sheet is a cover or index page looked blank. Since v1.7.0 they are named loadSheetFromFile / loadSheetFromUrl / loadSheetFromBuffer; the old names still work but are deprecated.

Reach for the worksheet-level call only when you deliberately want one sheet in the current worksheet:

await grid.worksheet.loadSheetFromBuffer(data, { sheetName: 'Sheet2' });

Notes

xlsx import works in both Lite and Pro. Only export is Pro-only.
In Lite, if the file has more than 100 rows or 26 columns, the overflow is silently truncated.
loadFromFile resolves after cells, styles, merges, borders, number formats, and images are applied. Awaiting it means the grid is ready.