Docs / Viewers / XLSX Viewer

XLSX Viewer

Svelte 5 port of the Extend UI xlsx-viewer. Workbooks load on the client with SheetJS.

Fixture workbook

Dark mode

Empty state

Differences from upstream

Also exported as XlsxViewerPreview, the upstream name.

• The grid is a virtualized native grid over SheetJS values, not @extend-ai/react-xlsx (React-only). Like upstream it shows column letters and row numbers from A1, with row 1 as data and blank rows kept.
• Added props: data (workbook bytes), rowHeight, height, overscan. The toolbar shows a row count.
• The dark-mode control is a toolbar switch instead of an item in the workbook actions menu. It only calls onIsDarkChange; the parent owns isDark.
• Not ported: cell formatting (fonts, fills, borders, number formats, merged cells), frozen panes, column resize, zoom, search, sheet thumbnails, and the upload/download menu (showDownload, showUpload, toolbarActions).
• Exports: WorkbookSheetTabs is ported and shared with the editor. It takes sheets, activeSheetIndex, and onActiveSheetIndexChange instead of workbookIdentity plus the react-xlsx context, and has no hover thumbnails. Not ported: renderXlsxScroller (a react-xlsx scroll-area helper), WorkbookTableHeaderMenu (the column sort menu; the port has no sorting), and XlsxWorkbookSurface (a context surface; XlsxViewer is self-contained).
• Like upstream's read-only grid, cells can be selected and the grid (one Tab stop) navigates with the arrows, Ctrl/Cmd+arrows, Home/End, PageUp/PageDown, Tab, and Enter. Not ported: range selection (Shift+arrows move instead of extending) and copy.

Back to all components