TinySheet

TinySheet is a fork of FortuneSheet: for experimental features, faster bug fixes and optimizations.

English | 简体中文

Purpose

TinySheet encourages faster SDLC, pushing newer versions quicker. Due to this, testing may not be as thorough as in FortuneSheet. Here, TinySheet depends on the community to bring the developers to its attention for quicker error resolution!

TinySheet cannot promise backward compatibility with FortuneSheet, but promises an optimized experience in edit operations with fewer P0/P1 issues. FortuneExcel will always be compatible with both TinySheet and FortuneSheet.

Moreover, due to its access limitations and new changes to npm token expiration, we might not be able to maintain FortuneSheet further.

Upcoming Improvements

• Special Paste Support [ctrl/cmd + shift + v]
• NaN in Selected Cell/ Range box
• Updated documentation
• Updated and Improved Storybooks
• Dark theme
• Optimizations
  • Optimized Edit Cell operation
  • Optimized Load by deferring caching
  • Optimized Memory Usage to reduce crashes
• Data Validation Sidebar (ruilisi#746)
• Placeholder text (ruilisi#716)

Get started (react)

Download and install the library

Using npm

npm install @lofcz/tinysheet-react

Using pnpm

pnpm install @lofcz/tinysheet-react

Using yarn

yarn add @lofcz/tinysheet-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 "@lofcz/tinysheet-react";
import "@lofcz/tinysheet-react/dist/index.css"

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

Backend storage and collabration

Each time a user operates on the sheet, an array of Op will be emiited through onOp callback. An op describes how to modify the current data to reach the new data after the user's operation. For example, here is an op when user sets the cell font to be bold on cell A2.

[
    {
        "op": "replace",
        "index": "0",
        "path": ["data", 1, 0, "bl"],
        "value": 1
    }
]

The op is useful for database modification and syncing state in online collabration.

A working example with Express (backend server) and MongoDB (data persistence) is avaiable in backend-demo folder.

Run it with node index.js and visit Collabration example (initialize data by visiting http://localhost:8081/init)

For detailed doc about Op, refer to fortune-sheet-doc

Contributing

Expected workflow is: Fork -> Patch -> Push -> Pull Request

Please make sure to read the Contributing Guide before making a pull request.

Development

Installation

yarn

Development

yarn dev

Packaging

yarn build

License

This project is licensed under the MIT License. See MIT for the full license text.