React Spread Sheet Excel - Lightning Fast Excel Component for React ⚡

The fastest, most lightweight React spreadsheet component - Render 100,000+ cells with blazing performance. Perfect for building Excel-like applications, data grids, and complex data entry forms in React.

🚀 Why Choose React Spread Sheet Excel?

• ⚡ Blazing Fast - Optimized virtual scrolling renders 100,000+ cells smoothly
• 🪶 Ultra Lightweight - Only ~300KB, no heavy dependencies
• 🧮 Excel-like Formulas - Full calculation engine with cell references (=A1*B2+C3)
• 🎨 Rich Formatting - Bold, italic, underline, colors, alignment, and more
• 📊 Merge Cells - Combine cells like in Excel
• ↩️ Undo/Redo - Full history management
• ⌨️ Keyboard Navigation - Arrow keys, shortcuts, Excel-like experience
• 📋 Copy/Paste - Multi-cell selection and clipboard operations
• 📁 Import/Export - CSV and XLSX support
• 🔒 Read-Only Mode - Display data without editing
• 🎯 100% Test Coverage - Reliable and production-ready
• 📱 TypeScript Support - Full type definitions included

📺 Live Demo

Try it now →

⚡ Performance

This library is highly optimized for performance. See our Performance Guide for:

• Detailed benchmarks
• Optimization techniques
• Best practices
• Memory management tips

📦 Installation

npm install react-spread-sheet-excel

yarn add react-spread-sheet-excel

pnpm add react-spread-sheet-excel

🎯 Quick Start

import React, { useRef, useState } from "react";
import Sheet, { SheetRef } from "react-spread-sheet-excel";

function App() {
  const [data] = useState([
    [{ value: "Product" }, { value: "Price" }, { value: "Quantity" }, { value: "Total" }],
    [{ value: "Apple" }, { value: "1.5" }, { value: "10" }, { value: "=B2*C2" }],
    [{ value: "Banana" }, { value: "0.8" }, { value: "15" }, { value: "=B3*C3" }],
  ]);
  
  const sheetRef = useRef<SheetRef>(null);

  const handleChange = (row?: number, col?: number, value?: string) => {
    console.log(`Cell [${row}, ${col}] changed to: ${value}`);
  };

  const getData = () => {
    const updatedData = sheetRef.current?.getData();
    console.log("Current data:", updatedData);
  };

  return (
    <div>
      <button onClick={getData}>Get Data</button>
      <Sheet data={data} onChange={handleChange} ref={sheetRef} />
    </div>
  );
}

export default App;

🎨 Features in Detail

⚡ Performance Optimized

Our spreadsheet uses advanced virtual scrolling and memoization techniques to handle massive datasets:

• Virtual Rendering: Only visible cells are rendered
• Optimized Re-renders: Smart memoization prevents unnecessary updates
• Calculation Caching: Formula results are cached for instant display
• Lazy Loading: Rows load on-demand as you scroll

Benchmark: Renders 1000 rows × 100 columns in milliseconds!

🧮 Excel-like Formulas

Full calculation engine supporting:

// Cell references
=A1 + B2

// Complex formulas
=A1 * B2 + (C3 - D4) / E5

// Multiple operations
=(A1 + A2 + A3) * 0.1

🎨 Rich Text Formatting

// Apply formatting via toolbar or keyboard shortcuts
Ctrl/Cmd + B  // Bold
Ctrl/Cmd + I  // Italic
Ctrl/Cmd + U  // Underline

// Programmatic styling
const styledData = [
  [{ 
    value: "Header", 
    styles: { 
      fontWeight: "bold", 
      background: "#4CAF50", 
      color: "white" 
    } 
  }]
];

📋 Copy/Paste Operations

• Multi-cell selection: Click and drag or Shift+Arrow keys
• Copy: Ctrl/Cmd + C
• Cut: Ctrl/Cmd + X
• Paste: Ctrl/Cmd + V
• Select All: Ctrl/Cmd + A

📁 Import/Export

CSV Export

import { SheetRef } from "react-spread-sheet-excel";

const sheetRef = useRef<SheetRef>(null);

// Export to CSV
const exportCSV = () => {
  sheetRef.current?.exportCsv("mydata", true); // true = include headers
};

XLSX Import/Export

npm install @e965/xlsx

import * as XLSX from "@e965/xlsx";
import { getCalculatedVal, printToLetter } from "react-spread-sheet-excel";

// Import XLSX
const importFromXlsx = (file: File, onSuccess: (data: any[][]) => void) => {
  const reader = new FileReader();
  reader.onload = (e) => {
    const arrayBuffer = e.target?.result as ArrayBuffer;
    const workbook = XLSX.read(arrayBuffer, { type: "array" });
    const worksheet = workbook.Sheets[workbook.SheetNames[0]];
    const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 }) as any[][];
    
    const formatted = jsonData.map((row) => 
      row.map((cell) => ({ value: cell }))
    );
    onSuccess(formatted);
  };
  reader.readAsArrayBuffer(file);
};

// Export XLSX
const exportToXlsx = (data: any[][], fileName = "export.xlsx") => {
  const aoa = data.map((row) =>
    row.map((cell) => {
      if (cell.value?.toString().startsWith("=")) {
        return getCalculatedVal(cell.value, data);
      }
      return cell.value;
    })
  );
  
  const worksheet = XLSX.utils.aoa_to_sheet(aoa);
  const workbook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
  XLSX.writeFile(workbook, fileName);
};

📖 API Reference

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | data | any[][] | [[]] | Initial spreadsheet data (2D array) | | onChange | (row?, col?, value?) => void | - | Callback fired on cell changes | | resize | boolean | false | Enable column resizing | | hideXAxisHeader | boolean | false | Hide column headers (A, B, C...) | | hideYAxisHeader | boolean | false | Hide row numbers (1, 2, 3...) | | headerValues | string[] | ['A','B','C'...] | Custom column headers | | readonly | boolean | false | Make spreadsheet read-only | | hideTools | boolean | false | Hide formatting toolbar | | autoAddAdditionalRows | boolean | true | Auto-add rows when scrolling |

Ref Methods

| Method | Parameters | Returns | Description | |--------|------------|---------|-------------| | getData | - | Data[][] | Get current spreadsheet data | | setData | data: Data[][] | void | Replace all data | | exportCsv | filename: string, includeHeaders?: boolean | void | Export to CSV file | | updateOneCell | row: number, col: number, value: any | void | Update single cell | | getOneCell | row: number, col: number | Data | Get single cell data |

Data Format

interface Data {
  value: string | number;
  styles?: { [key: string]: string };
  type?: string;
  colSpan?: number;
  rowSpan?: number;
  skip?: boolean; // For merged cells
}

🎯 Use Cases

📊 Data Entry Forms

Perfect for complex data entry with calculations, validations, and formatting.

📈 Financial Applications

Build budgeting tools, expense trackers, and financial calculators.

📋 Inventory Management

Track products, quantities, prices with automatic calculations.

📊 Report Builders

Create dynamic reports with user-editable data and formulas.

🎓 Educational Tools

Build interactive spreadsheet tutorials and exercises.

🔧 Advanced Examples

Custom Styling

const styledData = [
  [
    { 
      value: "Revenue", 
      styles: { 
        fontWeight: "bold", 
        fontSize: "16px",
        background: "#2196F3",
        color: "white",
        textAlign: "center"
      } 
    },
    { value: "=B2+B3+B4", styles: { fontWeight: "bold" } }
  ]
];

Merged Cells

const mergedData = [
  [
    { value: "Merged Header", colSpan: 3, rowSpan: 1 },
    { skip: true },
    { skip: true }
  ]
];

Read-Only Cells

<Sheet 
  data={data} 
  readonly={true}  // Entire sheet read-only
/>

Custom Headers

<Sheet 
  data={data}
  headerValues={["Product", "Q1", "Q2", "Q3", "Q4", "Total"]}
/>

🎮 Keyboard Shortcuts

| Shortcut | Action | |----------|--------| | Arrow Keys | Navigate cells | | Shift + Arrow | Select multiple cells | | Ctrl/Cmd + C | Copy | | Ctrl/Cmd + X | Cut | | Ctrl/Cmd + V | Paste | | Ctrl/Cmd + Z | Undo | | Ctrl/Cmd + Shift + Z | Redo | | Ctrl/Cmd + B | Bold | | Ctrl/Cmd + I | Italic | | Ctrl/Cmd + U | Underline | | Ctrl/Cmd + A | Select all | | Delete/Backspace | Clear selected cells | | Enter | Edit cell | | Esc | Cancel edit |

🧪 Testing

100% test coverage with comprehensive unit tests:

npm test

📚 Resources

• Performance Guide - Optimization tips and benchmarks
• Live Demo
• CodeSandbox Example
• StackBlitz Example
• Medium Article: Building a Lightning-Fast Spreadsheet
• Medium Article: State Management Without Redux

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

ISC License - see LICENSE file for details

👨‍💻 Author

Sojin Antony

🌟 Show Your Support

If this project helped you, please give it a ⭐️!

🔍 Keywords

react spreadsheet, react excel, react data grid, react table, excel component, spreadsheet component, data entry, virtual scrolling, formula calculation, cell formatting, react datagrid, editable grid, react grid, excel-like, spreadsheet editor, data table, react table editor, lightweight spreadsheet, fast spreadsheet, performance spreadsheet

Made with ❤️ for the React community