Free and Open Source High-Performance JavaScript Spreadsheet: X-Sheet Tutorial

November 23, 2021#open source #javascript #spreadsheet

Background

With the development of Internet technology, especially web applications, our demand for online documents and light applications is getting higher and higher. Many small partners have become accustomed to cloud office and online collaborative office. Commonly used are Google Sheet,Tencent documents, Kingsoft documents, and shimo documents, Lark, etc.,Recently, I discovered a high-performance front-end javascript spreadsheet: x-sheet. It was inspired by Google Sheet and rendered using HTML5 canvas. Next, I will share the introductory experience.

Introduction

First put the official open source address of x-sheet

https://gitee.com/eigi/x-sheet
https://github.com/eiji-th/x-sheet

Online experience address:

https://lwebapp.com/example/x-sheet.html

You can pull up the latest code from gitee to look at it locally. This is a standard es6 modernization project, custom webpack packaging, and code analysis after running, and there are several cases for reference.

Feature List

Let’s take a look at the function description on the README

undo & redo
Format brush
Clear format
Text format
Font settings
Font size
Bold font
Italics
Underscore
Strikethrough
Text color
Cell color
Cell border
Font slanted
Slanted bezel
Background tilt
Merge Cells
Horizontal alignment
Word wrap
Freeze cells
Cell function (processing)
Row height and column width settings
Copy, cut, paste (processing)
Auto fill
Insert row, column (processing)
Delete rows and columns (processing)
Hidden rows and columns (processing)
Support multiple sheets
Print (Processing)
Data verification (in process)
Export XLSX
Import XLSX (Processing)
Export CVS (Processing)
Import CVS (Processing)
Import pictures (Processing)
Data screening (under processing)

Usage

So how to start an x-sheet demo? Since x-sheet is still in the development stage, the npm package installation method is not yet provided, we can package and use it from the source code.

Clone the code

git clone https://gitee.com/eigi/x-sheet.git

Enter the code directory, install dependencies

cd x-sheet
npm i

Packaging

npm run build

After packaging, we can create a new html file and import the packaged source code to use

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>X-XWorkSheet</title>
        <link href="XSheet.css" rel="stylesheet" />
        <style>
            * {
                padding: 0;
                margin: 0;
            }

            html,
            body {
                height: 100%;
                display: block;
            }
        </style>
        <script src="XSheet.js" type="text/javascript"></script>
    </head>
    <body id="demo">
        <script>
            const dome = document.getElementById("demo");
            const xSheet = new XSheet(demo);
        </script>
    </body>
</html>

Or go directly to the example directory of the source code, open the .html file in the browser directly, and you can see the rich local templates and cases given by the official, all of which support the excel interface for online editing.

Templates and Cases

The following screenshot shows the official case

A purchase order template

experience address https://lwebapp.com/example/x-sheet-purchase-order.html

An outbound order template

experience address https://lwebapp.com/example/x-sheet-outbound-order.html

An inventory detail template

experience address https://lwebapp.com/example/x-sheet-inventory-details.html

A travel plan template

experience address https://lwebapp.com/example/x-sheet-travel-plan.html

A project plan template

experience address https://lwebapp.com/example/x-sheet-project-plan.html

x-sheet displays the 2019 calendar. Similarly, we can construct calendars for more years based on this template and make a DIY calendar

experience address https://lwebapp.com/example/x-sheet-calendar-2019.html

x-sheet displays the 2020 calendar

experience address https://lwebapp.com/example/x-sheet-calendar-2020.html

x-sheet supports multiple instances, one interface displays multiple spreadsheets, which can be edited separately

experience address https://lwebapp.com/example/x-sheet-multi-instance.html

x-sheet measured cell data of 50,000 rows and 25 columns, sliding very smoothly

experience address https://lwebapp.com/example/x-sheet-50000-rows-test.html

x-sheet measured 1 million rows and 25 columns of cell data, sliding is also very smooth

experience address https://lwebapp.com/example/x-sheet-1000000-rows-test.html

Notice

x-sheet supports Modern browsers (chrome, firefox)
The current open source agreement of x-sheet is MOZILLA PUBLIC LICENSE

Conclusion

I have roughly experienced the x-sheet, it can be said to be remarkable

Functionally, rich cell styles, rich text, border tilt, merge cells, freeze, undo and redo, format brush and other core functions, also support import and export xlsx files, multiple instances, support for large amounts of data
On the interface, the style is similar to Google Sheet, refreshing and comfortable, and the operating experience is very good
Lightweight, clear code module split, good scalability for secondary development

Of course, there are some shortcomings, such as not supporting collaboration, imperfect support for shortcut keys, etc. When I experience x-sheet, x-sheet is still in the development stage, so it is inevitable that there are some bugs. If you want to use it in production, you need to do more testing by yourself. This is an open source and free online spreadsheet, I hope you can give it a lot of support, and you are also welcome to submit issues and PRs for exchange and discussion. I hope the author can add more features and continue to maintain this spreadsheet library.