react-spread-sheet-excel v1.0.8

React-spread-sheet-excel

A light weight component to Render large lists of input boxes in the table using React JS and Redux, Render a table with a large number of rows and columns.

• Can render a large number of input boxes in the table
• Light Weight
• Calculations Support, value should starts with "="
• Supports calculations in Excel cells (= 2 A2 + (B2 C4))
• Customizable header values - (Do not pass numbers in header values, will affect calc)
• Resize columns
• Can Use as a Spreadsheet or Excel with react
• Read-only mode
• Export to CSV support
• Move between cells using tab/shift+tab or arrow Keys keys on the keyboard
• Sticky Headers
• 100% unit test coverage

Getting Started

Input data format

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

npm install react-spread-sheet-excel

demo

Live demo

import React, { useRef, useState } from "react";
import Sheet, { SheetRef } from "./lib";
import packageConf from "../package.json";

const createData = () => {
  const val: any[][] = [];
  for (let i = 0; i < 2000; i++) {
    val.push(Array.from({ length: 40 }, () => Math.floor(Math.random() * 10)));
  }
  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()); 
  };

  return (
    <div>
      <div>
        <button onClick={getData}>Get Updated data</button>
      </div>
      <div>
        <Sheet data={state} onChange={onChange} ref={childRef} />
      </div>
    </div>
  );
}

export default App;

props

Ref

Sojin Antony

Acknowledgments

• React-intersection-observer
• Redux, React Redux