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 { worksheet } = 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 worksheet.loadFromFile(file);
});

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.worksheet.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.worksheet.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 worksheet.loadFromUrl('/data/report.xlsx')
• From a raw ArrayBuffer: await worksheet.loadFromBuffer(arrayBuffer)
• With a specific sheet: await worksheet.loadXlsx(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.

See also

• XLSX Import & Export
• Save Grid as XLSX