Skip to main content

SpreadsheetViewer

SpreadsheetViewer

Excel and CSV files as a read-only grid with number formats, styles, merged cells, frozen panes and sheet tabs

Tags: viewer excel xlsx csv spreadsheet grid

SpreadsheetViewer shows .xlsx workbooks and CSV/TSV files as a read-only grid. It uses its own parser (@classic-homes/viewer-core/sheet), with no peer dependency, and virtualises both axes, so sheets with hundreds of thousands of cells scroll smoothly.

Import​

<script>
  import { SpreadsheetViewer } from '@classic-homes/viewer-svelte/xlsx';
</script>

Setup​

Optionally parse in a worker, so large workbooks never freeze the page:

import { configureSpreadsheet } from '@classic-homes/viewer-svelte/xlsx';
import SheetWorker from '@classic-homes/viewer-core/sheet/worker?worker';

configureSpreadsheet({ worker: () => new SheetWorker() });

configureSpreadsheet({ maxCells }) sets how many cells a sheet may have before it is cut short (default 2,000,000). For CSV, this includes empty field slots. Both readers enforce Excel grid bounds: 1,048,576 rows and 16,384 columns.

Rendering is limited to 512 visible tracks per axis and 65,536 cells per pane block, including frozen panes. A status note appears if a display limit is reached; zoom in to see more detail.

Basic Usage​

<script lang="ts">
  import { loadSource } from '@classic-homes/viewer-svelte';
  import { SpreadsheetViewer } from '@classic-homes/viewer-svelte/xlsx';
</script>

{#await loadSource('/budgets/lot-12.xlsx') then source}
  <SpreadsheetViewer {source} kind="xlsx" initialSheet="Summary" class="h-[70vh]" />
{/await}

Pass kind="csv" for CSV and TSV files; the delimiter is detected.

Props​

Prop Type Default Description
source LoadedSource required Loaded bytes plus name and MIME hints
kind RenderableKind required 'xlsx' or 'csv'
initialSheet string | number - Name or 0-based index of the sheet to open; default first visible
hideToolbar boolean false Hide the toolbar
onready () => void - The first sheet is on screen
onerror (error: ViewerError) => void - Parsing failed
class string - Classes for the outer element

What it shows​

Cell values with their Excel number formats (dates, currency, percentages), fonts, fills, borders, alignment, wrapping, merged cells, column widths, row heights, hidden rows and columns, frozen panes and gridlines. Hyperlinks work, including links to other sheets. Formulas show their cached results, and the status bar shows the formula of the active cell.

It does not show charts, images, conditional formatting, table styles or pivot tables; a note under the toolbar says when a sheet contains any of them. Hidden sheets are not listed as tabs.

Accessibility​

  • The grid is one tab stop, labelled with the sheet name and size. A live region announces the active cell's address and value as it moves.
  • Arrow keys, PageUp/PageDown, Home/End and Ctrl+Home/End move the active cell; Ctrl+C copies it.
  • Sheet tabs are a tab list: arrow keys move between sheets.
  • Find (Ctrl/Cmd + F) searches every cell's displayed text.
On this page