FortuneSheet is an online spreedsheet component library that provides out-of-the-box features just like Excel

Overview

FortuneSheet

FortuneSheet is an online spreedsheet component library that provides out-of-the-box features just like Excel

English | 简体中文

Purpose

The goal of FortuneSheet is to make a feature-rich, easy-to-configure online spreedsheet that you can use out-of-the-box.

This project is originated from Luckysheet and has inherited many code from it. Lots of efforts have done to translate the whole project to typescript (still in progress), and solved problems in project level.

We aim to make FortuneSheet powerful yet easy to maintain.

Take a look at the online demo at fortune-sheet-demo

Attention

This project is in the state of early development, APIs may have significant change in the future, use with caution in production.

Improvements to Luckysheet

  • Written fully in typescript.
  • You can now use import / require to use the library.
    import { Workbook } from '@fortune-sheet/react'
  • Multiple instance on the same page is supported.
  • Dropped jQuery dependency, uses native React / Vue + immer to manage the dom and state.
  • Changed to a forked handsontable/formula-parser to handle formula calculations.
  • Optimized the dom structure.
  • Replaced icons from iconfont with SVGs, as iconfont icons are inconvenient to update for other maintainers.
  • No visible elements is created outside container.
  • Never stores data in the window object.

Features

  • Data structure is compatible with Luckysheet.
  • Formatting: style, text alignment and rotation, text truncation, overflow, automatic line wrapping, multiple data types, cell segmentation style
  • Cells: multiple selection, merge cells
  • Row & column: insert, delete rows or columns
  • Operation: copy, paste, cut, hot key
  • Formulas & Functions: Built-in formulas

TODOs

  • Formatting: conditional formatting, fonts
  • Cells: drag and drop, fill handle, find and replace, location, data verification
  • Row & column: hide, freeze, and split text
  • Operation: undo, redo, format painter, drag and drop selection
  • Tables: filter, sort
  • Enhanced functions: Pivot tables, charts, comments, cooperative editing, insert picture, matrix calculations, screenshots, copying to other formats, EXCEL import and export, etc.
  • Vue support.
  • Tests.

Documentation

See detailed documentation at fortune-sheet-doc

Get started (react)

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')
);

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.

Comments
  • 请问如何二次使用data参数重新初始化?

    请问如何二次使用data参数重新初始化?

    Is your feature request related to a problem? Please describe. 目前表格的初始化为获取到远端data配置后完成第一次加载,但如果使用useState存储data的时候,当data更新后表格不会重新渲染到新的data配置,不知道是否有其他方法可以手动/自动触发这个加载?

    Describe the solution you'd like 当data存储在useSatate时,若更新data则表格重新渲染到新的data

    opened by Minfee 13
  • Uncaught TypeError: Cannot use 'in' operator to search for 'mc' in 1286

    Uncaught TypeError: Cannot use 'in' operator to search for 'mc' in 1286

    Describe the bug

    I'm trying to show a SQL query output in a fortune-sheet worksheet. I'm rendering the worksheet using the following code

    <Workbook
      showToolbar={false}
      showSheetTabs={false}
      data={[
        {
          name: "Sheet1",
          celldata: cellData,
        },
      ]}
    />
    
    

    There is a glimpse of the worksheet being rendered for a second and the app crashes with the following exception,

    Uncaught TypeError: Cannot use 'in' operator to search for 'mc' in 1286
        at mergeBorder (index.esm.js:48304:1)
        at getCellRowColumn (index.esm.js:55025:1)
        at index.esm.js:2247:1
        at index.esm.js:2260:1
        at e.produce (immerClass.ts:94:1)
        at e.produceWithPatches (immerClass.ts:141:1)
        at index.esm.js:7438:1
        at basicStateReducer (react-dom.development.js:16540:1)
        at updateReducer (react-dom.development.js:16664:1)
        at updateState (react-dom.development.js:17004:1)
    

    To Reproduce Steps to reproduce the behavior:

    1. Render the sheet
    2. Wait for a couple of seconds before the app is crashed

    Expected behavior The worksheet shouldn't crash.

    Screenshots ezgif com-gif-maker (5)

    opened by sandilya28 8
  • Issue with line breaking

    Issue with line breaking

    Describe the bug When there is multiple rows in a cell, then delete the last row, then the words aligment is wrong, especially under "horizontal center" style.

    To Reproduce Steps to reproduce the behavior:

    1. Input multipe rows in the same cell with "alt+enter".
    2. Delete the last row, and the count of ramining rows is more than one.
    3. See the style error.

    Screenshots image

    opened by SuyongSun 8
  • Add default rows to add from configuration of sheet

    Add default rows to add from configuration of sheet

    Pick number of rows for add button from default configuration. IMG_20221219_000355

    Pic from configuration of sheet data. https://ruilisi.github.io/fortune-sheet-docs/guide/sheet.html

    opened by gudipudipradeep 7
  • steps to setup development environment

    steps to setup development environment

    how to setup the development environment to customized or extend functionality. Please guide the steps after cloning this repo with some example to change the type script.

    So that people can contribute and raise the pull request for bugs and importants.

    Development steps and guidelines, pull request standards.

    How to setup package folder contains core, formula and react to start and open basic sheet by importing modules, it will help.

    opened by gudipudipradeep 6
  • Options column, row, lang

    Options column, row, lang "zh_tw" are ignored

    Describe the bug Options column, row, lang "zh_tw" are ignored

    To Reproduce Steps to reproduce the behavior:

    1. Try to fill in any number for column or row, also set lang option "zh_tw"
    2. Column / row count is still the default, despite options passed. Language zh_tw render English context menu

    Expected behavior For the documented options to work as advertised.

    Screenshots image

    Additional context I see that this sandbox uses an old version, but it's the same in the latest that I installed today.

    opened by kimgysen 5
  • When readOnly mode, text field formula bar is still editable + the user can swtich the sheet position

    When readOnly mode, text field formula bar is still editable + the user can swtich the sheet position

    Describe the bug When the config allowEdit is false, the text field in the formula bar should not be editable AND The user can still move the sheet name from the right or left position

    To Reproduce

    1. Set config allowEdit to false
    2. Select a cell
    3. click on the formula bar and edit the content (the cell value is not updated, but the formula bar value should be editable)
    4. Open an Excel file with more than 1 sheet (2 or 3)
    5. You can still move (drag and drop) one sheet before or after another

    Expected behavior The text field should not be editable (read-only) and the sheet order should not be changed

    Screenshots image image

    opened by nicoesiea 5
  • Scrollbar out of the box

    Scrollbar out of the box

    Describe the bug The horizontal scrollbar is out of the container. The scroll bar width exceeds the width of the container

    To Reproduce Default behavior

    Expected behavior The scrollbar width stays inside the container

    Screenshots image I can change my application setting to use a discreet scrollbar design, even in this mode we can see the width is too big: image

    Additional context I'm using Angular 13 with the react plugin loaded with a wrapper (just for you to know)

    opened by nicoesiea 5
  • Limiting rows and columns are not working

    Limiting rows and columns are not working

    "row": 36, //the number of rows in a sheet "column": 18, //the number of columns in a sheet

    set the attributes as per the document https://ruilisi.github.io/fortune-sheet-docs/guide/sheet.html#initial followed the above document got more rows and columns image

    opened by gudipudipradeep 4
  • Wrong words wrapping

    Wrong words wrapping

    Describe the bug Wrapping of words is clipped.

    To Reproduce Input some words especially chinese words, and set the cell wrapping, tune the length of words, will see the wrap cell clips one or two words.

    Expected behavior Correct wrapping calculation.

    Screenshots image

    opened by SuyongSun 4
  • 👋❓ Use Auto-Fill / Drag Down Programmatically? 以编程方式使用自动填充/向下拖动?

    👋❓ Use Auto-Fill / Drag Down Programmatically? 以编程方式使用自动填充/向下拖动?

    How can you drag down a range programmatically? I have a row that I wish to drag down and copy formats and formulas. Example below. Thank you!

    如何以编程方式向下拖动范围?我有一行希望向下拖动并复制格式和公式。下面的例子。谢谢!

    image

    image

    opened by firstredpepper 4
  • React 18, filter menu: maximum update depth exceeded

    React 18, filter menu: maximum update depth exceeded

    Describe the bug A clear and concise description of what the bug is.

    To Reproduce Steps to reproduce the behavior:

    1. "@fortune-sheet/react": "^0.12.3",
    2. 右键展开菜单
    3. 点击筛选选区
    4. 点击单元格内选区按钮
    5. 可以看到报错 Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

    Expected behavior A clear and concise description of what you expected to happen.

    Screenshots

    image

    Unhandled Runtime Error
    Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
    
    Call Stack
    checkForNestedUpdates
    node_modules\.pnpm\[email protected][email protected]\node_modules\react-dom\cjs\react-dom.development.js (27292:0)
    scheduleUpdateOnFiber
    node_modules\.pnpm\[email protected][email protected]\node_modules\react-dom\cjs\react-dom.development.js (25475:0)
    dispatchSetState
    node_modules\.pnpm\[email protected][email protected]\node_modules\react-dom\cjs\react-dom.development.js (17527:0)
    

    Additional context Add any other context about the problem here.

    opened by fantasticit 1
  • sheetTabContextMenu not respected

    sheetTabContextMenu not respected

    Describe the bug sheetTabContextMenu properties seem to be ignored.

    To Reproduce Steps to reproduce the behavior:

    1. Add custom menu as array of string values
    2. Right mouse click a sheet tab

    Expected behavior The context menu should appear

    Screenshots image

    Additional context cellContextMenu works partially (updating props changes the items) but also here I see that there no 1 - 1 correspondence, and the contextMenu even shows empty cells at the bottom of the contextMenu when propagating the changed array.

    image

    opened by kimgysen 1
  • devicePixelRatio seems to be ignored

    devicePixelRatio seems to be ignored

    Describe the bug The devicePixelRatio seems to be ignored

    To Reproduce Steps to reproduce the behavior:

    1. Add devicePixelRatio prop
    2. Set any number

    Expected behavior Expecting to get some visual feedback when changing the value. (Also needs to work when the prop changes value)

    Screenshots image

    opened by kimgysen 2
Releases(v0.12.3)
Owner
Suzhou Ruilisi Technology Co., Ltd
Suzhou Ruilisi Technology Co., Ltd
Mind Mapping to excel, or excel to .xmind file

Mind Mapping To Excel Project setup Prepare project npm install 1、Fetch data and generate excel Open the Mind Mapping like this Process On Mind Mappi

xuzelin995 3 May 5, 2022
Zemi is data-driven and reverse-routing library for Express. It provides out-of-the-box OpenAPI support, allowing you to specify and autogenerate an OpenAPI spec.

zemi zemi is a data-driven routing library for Express, built with Typescript. Features: optional, out-of-the-box support for OpenAPI reverse-routing

Yoaquim Cintrón 5 Jul 23, 2022
Some out-of-the-box utility features based on the Oasis engine.

Engine Toolkit Some out-of-the-box utility features based on the Oasis engine Script, welcome to enjoy! Features ?? Controls - Some camera controllers

Oasis 22 Nov 21, 2022
A powerful and simple JavaScript library provides a history for undo/redo functionality. Just like a time machine! 🕐

UndoRedo.js A powerful and simple Javascript library provides a history for undo/redo functionality. Just like a time machine! ?? Installation: Node.j

${Mr.DJA} 26 Dec 14, 2022
Custom alert box using javaScript and css. This plugin will provide the functionality to customize the default JavaScript alert box.

customAlertBoxPlugin Custom Alert Box Plugin Using JavaScript and CSS Author: Suraj Aswal Must Include CSS Code/Default Custom Alert Box Class: /* mus

Suraj Aswal 17 Sep 10, 2022
Cross provider map drawing library, supporting Mapbox, Google Maps and Leaflet out the box

Terra Draw Frictionless map drawing across mapping providers. TerraDraw centralises map drawing logic and provides a host of out the box drawing modes

James Milner 106 Dec 31, 2022
Excel-like Experience for Web Apps

DataGridXL 2 Excel-like Experience for Web Apps Built in JavaScript ES6. Made in the 2020s. ✅ Works with JSON ✅ Works with CSV ✅ Works with SQL ✅ Work

DataGridXL 381 Jan 2, 2023
Used for creating a out-of-the-box template without additional configuration.

ou Used for creating a out-of-the-box template without additional configuration. Templates Vue3 Lite Template Used for some simple web app Vue3 + Vite

Dewey Ou 6 Jul 17, 2022
CLI utility that parses argv, loads your specified file, and passes the parsed argv into your file's exported function. Supports ESM/TypeScript/etc out of the box.

cleffa CLI tool that: Parses argv into an object (of command-line flags) and an array of positional arguments Loads a function from the specified file

Lily Scott 9 Mar 6, 2022
Scaffold a full-stack SvelteKit application with tRPC and WindiCSS out of the box

create-sweet-app Interactive CLI to quickly set up an opinionated, full-stack, typesafe SvelteKit project. Inspired by the T3 Stack and create-t3-app

David Hrabě 10 Dec 16, 2022
Build forms from JSON Schema. Easily template-able. Compatible with Bootstrap 3 out of the box.

JSON Form The JSON Form library is a JavaScript client-side library that takes a structured data model defined using JSON Schema as input and returns

null 2.6k Dec 28, 2022
Out-of-the-box MPA plugin for Vite, with html template engine and virtual files support.

vite-plugin-virtual-mpa Out-of-the-box MPA plugin for Vite, with html template engine and virtual files support, generate multiple files using only on

QinXuYang 21 Dec 16, 2022
This Application provides basic authentication features like you can register and create account and then login and access your profile.

Authentication API This Application provides basic authentication features like you can register and create account and then login and access your pro

Rohan Kulkarni 1 Jan 17, 2022
TS & JS Library for adaptive precision cursor for the web. Releases will come out soon! Meanwhile, check out the demo site:

Haha, cool cursor go brrrr... Table of Content What is this? Installation & Setup Installation Setup Usage Cursor controls Element settings Known issu

LemonOrange 10 Nov 24, 2022
Colr Pickr, a vanilla JavaScript color picker component built with SVGs, with features like saving colors. Similar design to the chrome-dev-tools color picker.

Colr Pickr Colr Pickr, a vanilla JavaScript color picking component built with SVGs, with features like saving colors. Similar design to the chrome-de

TEK 27 Jun 27, 2022
A platform designed specifically as an additional layer on top of Google Classroom for students to gain the best out of online evaluations

Peer-Learning-Platform A platform designed specifically as an additional layer on top of Google Classroom for students to gain the best out of online

Rahul Dhakar 3 Jun 12, 2022
JIT Compiler is a open source online code compiler. You can run more than 40+ most popular programming languages in your browser just-in-time using jitcompiler.

JIT Compiler is a open source online code compiler. You can run more than 40+ most popular programming languages in your browser just-in-time using jitcompiler.

Rajkumar Dusad 36 Jan 5, 2023
A chat logs online saver for discord bots to save messages history & cleared messages online

Chat Logs NPM package that saves messages online to view it later Useful for bots where users can save messages history & cleared messages online Supp

TARIQ 8 Dec 28, 2022