Although there are some opensource solutions such as Luckysheet and handsontable for creating javascript spreadsheet, I found none of them meet my requirements.

Handsontable lacks many Excel functionalities out of the box and I have to implement them on my own. Luckysheet is great in features, but It's not very developer friendly, the code base is in a mess which makes it hard to make changes. So, I decided to create my own, based on what Luckysheet has done.

Github: FortuneSheet - A drop-in javascript spreadsheet library that provides rich features like Excel and Google Sheets

Live Demo

Quick start

Download and install the library

yarn add @fortune-sheet/react

or using npm:

npm install @fortune-sheet/react

Create an HTML placeholder

<style>
  html, body, #root {
    width: 100%;
    height: 100%;
  }
</style>
<div id="root"></div>

NOTE: width and height doesn't have to be 100%, but should at least have a value. If set to auto, table area may not show.

Render the sheet

import React from 'react';
import ReactDOM from 'react-dom';
import { Workbook } from "@fortune-sheet/react";
import "@fortune-sheet/react/dist/index.css"

ReactDOM.render(
  <Workbook data={[{ name: "Sheet1" }]} />,
  document.getElementById('root')
);

And that's it. You will get a basic spreadsheet with fomula and other excel features support.

Further settings can be done to achieve collabrative editing!

Thanks for reading. Next thing to do will be adding support for excel file import and export, and probably chart support. See you soon!