> ## Documentation Index
> Fetch the complete documentation index at: https://docs.reducto.ai/llms.txt
> Use this file to discover all available pages before exploring further.
# SpreadsheetViewer
> A React component for viewing Excel spreadsheets with bounding box overlays for document extraction visualization
**Enterprise Component** — The SpreadsheetViewer component is available to Reducto enterprise customers.
Contact [sales@reducto.ai](mailto:sales@reducto.ai) to get access.
## Overview
The `SpreadsheetViewer` component provides a powerful, read-only Excel spreadsheet viewer with support for bounding box overlays. It's designed to visualize Reducto extraction results directly on your spreadsheet documents.
View `.xlsx` and `.xls` files with full sheet navigation
Overlay extraction results with clickable, colored regions
CSS Variables for easy theming without Tailwind dependency
Full type definitions included for excellent DX
## Installation
Create or update your project's `.npmrc` file to authenticate with GitHub Packages:
```bash .npmrc theme={null}
@reductoai-collab:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${REDUCTO_NPM_TOKEN}
```
Never commit your token directly to `.npmrc`. Use an environment variable as shown above.
Reducto will provide you with an access token. Set it as an environment variable:
Add to your shell profile (`~/.bashrc`, `~/.zshrc`, etc.):
```bash theme={null}
export REDUCTO_NPM_TOKEN="your-token-from-reducto"
```
Then reload your shell:
```bash theme={null}
source ~/.zshrc # or ~/.bashrc
```
Set as a system environment variable:
```powershell theme={null}
[System.Environment]::SetEnvironmentVariable('REDUCTO_NPM_TOKEN', 'your-token-from-reducto', 'User')
```
Restart your terminal after setting.
Add `REDUCTO_NPM_TOKEN` as a secret in your CI environment:
```yaml GitHub Actions theme={null}
env:
REDUCTO_NPM_TOKEN: ${{ secrets.REDUCTO_NPM_TOKEN }}
```
```yaml GitLab CI theme={null}
variables:
REDUCTO_NPM_TOKEN: $REDUCTO_NPM_TOKEN
```
```bash theme={null}
npm install @reductoai-collab/components
```
```bash theme={null}
yarn add @reductoai-collab/components
```
```bash theme={null}
pnpm add @reductoai-collab/components
```
Import the CSS file in your application's entry point:
```tsx App.tsx or main.tsx theme={null}
import '@reductoai-collab/components/styles/spreadsheet-viewer.css';
```
## Quick Start
Here's a minimal example to get you started:
```tsx theme={null}
import { SpreadsheetViewer } from '@reductoai-collab/components';
import '@reductoai-collab/components/styles/spreadsheet-viewer.css';
function App() {
return (
{
console.log(`Loaded ${metadata.sheetCount} sheets`);
}}
onError={(error) => {
console.error(`Error: ${error.message}`);
}}
/>
);
}
```
The `SpreadsheetViewer` requires a container with defined dimensions. Always wrap it in a parent element with explicit `height` and `width`.
## Usage Examples
### Basic Viewer
Display a spreadsheet without any overlays:
```tsx theme={null}
import { SpreadsheetViewer } from '@reductoai-collab/components';
function BasicViewer() {
return (
{
console.log('Sheet names:', metadata.sheetNames);
}}
/>
);
}
```
### With Bounding Boxes
Highlight specific regions of the spreadsheet with colored bounding boxes:
```tsx theme={null}
import { SpreadsheetViewer, type BoundingBox } from '@reductoai-collab/components';
function ViewerWithBboxes() {
const bboxes: BoundingBox[] = [
{
id: 'header-row',
page: 1, // Sheet number (1-indexed)
top: 1, // Starting row
left: 1, // Starting column (A = 1)
width: 5, // Number of columns
height: 1, // Number of rows
color: 'blue',
label: 'Header',
},
{
id: 'data-table',
page: 1,
top: 2,
left: 1,
width: 5,
height: 10,
color: 'green',
label: 'Sales Data',
metadata: {
tableId: 'tbl-001',
confidence: 0.95,
},
},
];
return (
{
console.log('Clicked:', bbox.id);
console.log('Custom data:', bbox.metadata);
}}
/>
);
}
```
### Integrating with Reducto API Results
Convert Reducto extraction results to bounding boxes:
```tsx theme={null}
import { useState } from 'react';
import { SpreadsheetViewer, type BoundingBox } from '@reductoai-collab/components';
interface ReductoBlock {
id: string;
type: 'table' | 'text' | 'key_value';
bbox: {
page: number;
top: number;
left: number;
width: number;
height: number;
};
content: string;
}
interface ExtractionResult {
blocks: ReductoBlock[];
}
function ReductoViewer({
documentUrl,
extractionResult,
}: {
documentUrl: string;
extractionResult: ExtractionResult;
}) {
const [selectedBlock, setSelectedBlock] = useState(null);
// Map block types to colors
const colorMap: Record = {
table: 'blue',
text: 'green',
key_value: 'purple',
};
// Convert Reducto blocks to bounding boxes
const bboxes: BoundingBox[] = extractionResult.blocks.map((block) => ({
id: block.id,
page: block.bbox.page,
top: block.bbox.top,
left: block.bbox.left,
width: block.bbox.width,
height: block.bbox.height,
color: colorMap[block.type] ?? 'gray',
label: block.type,
metadata: {
blockId: block.id,
type: block.type,
content: block.content,
},
}));
return (
{/* Viewer */}
{
const block = extractionResult.blocks.find(
(b) => b.id === bbox.metadata?.blockId
);
setSelectedBlock(block ?? null);
}}
/>
{/* Details Panel */}
Selected Block
{selectedBlock ? (
Type: {selectedBlock.type}
Content:
{selectedBlock.content}
) : (
Click a bounding box to see details
)}