react-spread-sheet-excel v3.0.2

React-spread-sheet-excel

A high-performance React component for building Excel-like spreadsheets with advanced features.

A light weight component to Render large lists of input boxes in the table using React JS, Render a table with a large number of rows and columns. Able to render 1Lakh+ input boxes in react, A quick solution for web based spreadsheet or excel.

Live Demo

Demo

Features

• Blazing Fast Rendering: Handles large datasets efficiently (1Lakh+ input boxes).
• Comprehensive Calculation Engine: Supports complex formulas and calculations. (= 2 A2 + (B2 C4))
• Rich Formatting Options: Customize cell appearance with bold, italic, underline, and more.
• Undo, Redo actions.
• Calculations Support, value should starts with "="
• Select Multiple cells
• Intuitive Keyboard Navigation: Navigate and edit cells effortlessly.
• Delete values in selected cells.
• Customizable header values - (Do not pass numbers in header values, will affect calc)
• Resize columns
• Can Use as a Spreadsheet or Excel with react
• Flexible Data Management: Import, export, and manipulate data.
• Customizable Headers and Columns: Tailor the spreadsheet to your application.
• Read-Only Mode: Protect data from accidental modifications.
• CSV Export: Easily share data in a common format.
• Sticky Headers: Keep headers visible while scrolling.
• 100% Unit Test Coverage: Ensures reliability and stability.
• JSON based SpreadSheet

Getting Started

Input data format

[
  [{"value": 1},{"value": 1},{"value": "a"},{"value": "b"},{"value": "d"}]
]

npm install react-spread-sheet-excel

Example

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

//Create dummy data.
const createData = (count?: number) => {
  const val: any[][] = [];
  for (let i = 0; i < (count || 500) ; i++) {
    val.push(
      Array.from({ length: count || 30 }, () => ({
        value: "",
      }))
    );
  }
  return val;
};

function App() {
  const [state] = useState<any[][]>(createData());
  const childRef = useRef<SheetRef>(null);

  const onChange = (i: number, j: number, value: string) => {
    //Do not try to update state with this action, it will slow down your application
    console.log(`Value Updated at ${j}, ${j}`, value);
  };

  const getData = () => {
    console.log("Updated Data", childRef?.current?.getData()); 
  };

  //Generate CSV
  const exportCSV = () => {
    childRef?.current?.exportCsv("myCsvFile", false);
  };

  return (
    <div>
      <div>
        <button onClick={getData}>Get Updated data</button>
        <button data-testid="csv-export" onClick={exportCSV}>Export CSV data</button>
      </div>
      <div>
        <Sheet data={state} onChange={onChange} ref={childRef} />
      </div>
    </div>
  );
}

export default App;

props

Ref (API's)

Try here

Sandbox

Stackblitz

Performance

Benchmark: Rendered 1000 rows and 100 columns in mills. Optimization Techniques: Global state, Lazy loading.

Sojin Antony

Acknowledgments

• React-intersection-observer