Luckysheet

Luckysheet is an online spreadsheet like excel that is powerful, simple to configure, and completely open source.

15,854

2,352

15,854

685

View on GitHub View on NPM

Top Related Projects

handsontable

19,743

JavaScript data grid with a spreadsheet look & feel. Works with React, Angular, and Vue. Supported by the Handsontable team ⚡

sheetjs

34,966

📗 SheetJS Spreadsheet Data Toolkit -- New home https://git.sheetjs.com/SheetJS/sheetjs

ag-grid

12,496

The best JavaScript Data Table for building Enterprise Applications. Supports React / Angular / Vue / Plain JavaScript.

Quick Overview

Luckysheet is an open-source spreadsheet component library for web applications. It provides a powerful, feature-rich Excel-like experience directly in the browser, allowing developers to integrate spreadsheet functionality into their web projects with ease.

Pros

Rich feature set comparable to traditional desktop spreadsheet applications
Highly customizable and extensible through plugins and APIs
Supports collaborative editing and real-time data synchronization
Cross-browser compatibility and responsive design

Cons

Large file size may impact initial load times for web applications
Documentation is primarily in Chinese, which may be challenging for non-Chinese speakers
Steeper learning curve compared to simpler spreadsheet libraries
Some advanced features may require additional configuration or plugins

Code Examples

Basic initialization:

const options = {
    container: 'luckysheet',
    data: [
        {
            name: "Sheet1",
            celldata: [
                {r:0, c:0, v: "Hello"},
                {r:0, c:1, v: "Luckysheet"}
            ]
        }
    ]
};
luckysheet.create(options);

Adding a custom toolbar button:

luckysheet.create({
    // ... other options
    plugins: ['chart'],
    hook: {
        toolbarClick: function(event, info) {
            if (info.id === 'mycustombutton') {
                // Custom button action
                alert('Custom button clicked!');
            }
        }
    },
    toolbarConfig: {
        custom: true,
        toolbarList: [
            // ... default toolbar items
            {
                text: 'Custom Button',
                id: 'mycustombutton'
            }
        ]
    }
});

Accessing and modifying cell data:

// Get value of cell A1
const value = luckysheet.getCellValue(0, 0);

// Set value of cell B2
luckysheet.setCellValue(1, 1, 'New Value');

// Update multiple cells
luckysheet.updateCell([
    {r: 2, c: 2, v: 10},
    {r: 2, c: 3, v: 20}
]);

Getting Started

Include Luckysheet files in your HTML:

<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/css/luckysheet.css' />
<script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/js/plugin.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/luckysheet.umd.js"></script>

Create a container element:

<div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:100%;height:100%;left: 0px;top: 0px;"></div>

Initialize Luckysheet:

luckysheet.create({
    container: 'luckysheet',
    data: [{ name: "Sheet1" }]
});

Competitor Comparisons

handsontable

19,743

JavaScript data grid with a spreadsheet look & feel. Works with React, Angular, and Vue. Supported by the Handsontable team ⚡

Pros of Handsontable

More mature and feature-rich, with a longer development history
Extensive documentation and API reference
Offers both open-source and commercial versions with additional features

Cons of Handsontable

Steeper learning curve due to its extensive feature set
Commercial license required for some advanced features
Larger file size, which may impact load times for smaller projects

Code Comparison

Handsontable:

const hot = new Handsontable(container, {
  data: data,
  rowHeaders: true,
  colHeaders: true,
  filters: true,
  dropdownMenu: true
});

Luckysheet:

luckysheet.create({
  container: 'luckysheet',
  data: [{ name: 'Sheet1', celldata: data }],
  showinfobar: false
});

Key Differences

Handsontable uses a more traditional JavaScript approach, while Luckysheet has a simpler API
Luckysheet is fully open-source, whereas Handsontable has both open-source and commercial versions
Handsontable offers more built-in features and customization options out of the box

Use Cases

Choose Handsontable for complex, feature-rich spreadsheet applications with specific requirements
Opt for Luckysheet for simpler, open-source projects or when a more Excel-like interface is desired

sheetjs

34,966

📗 SheetJS Spreadsheet Data Toolkit -- New home https://git.sheetjs.com/SheetJS/sheetjs

Pros of SheetJS

Mature and widely adopted library with extensive documentation
Supports a wide range of spreadsheet formats (XLS, XLSX, CSV, etc.)
Lightweight and efficient, suitable for both browser and Node.js environments

Cons of SheetJS

Primarily focused on data parsing and manipulation, not UI rendering
Requires additional libraries or custom code for spreadsheet visualization
Commercial use may require purchasing a license

Code Comparison

SheetJS:

import * as XLSX from 'xlsx';

const workbook = XLSX.utils.book_new();
const worksheet = XLSX.utils.json_to_sheet(data);
XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
XLSX.writeFile(workbook, "output.xlsx");

Luckysheet:

luckysheet.create({
    container: 'luckysheet',
    data: [{ name: "Sheet1", celldata: [{ r: 0, c: 0, v: "Hello" }] }],
    showtoolbar: true,
    showgridlines: true
});

Summary

SheetJS excels in data processing and format support, making it ideal for backend operations or headless spreadsheet manipulation. Luckysheet, on the other hand, provides a full-featured spreadsheet UI component, similar to Excel or Google Sheets, making it more suitable for web applications requiring interactive spreadsheet functionality. The choice between the two depends on whether you need data processing capabilities or a complete spreadsheet interface.

exceljs

13,539

Excel Workbook Manager

Pros of exceljs

More mature and widely adopted project with extensive documentation
Supports both reading and writing Excel files (.xlsx, .csv, etc.)
Offers a wide range of Excel-specific features and formatting options

Cons of exceljs

Primarily focused on server-side Excel file manipulation
Lacks built-in UI components for spreadsheet editing
Steeper learning curve for complex operations

Code Comparison

exceljs:

const workbook = new ExcelJS.Workbook();
const worksheet = workbook.addWorksheet('Sheet1');
worksheet.getCell('A1').value = 'Hello, World!';
await workbook.xlsx.writeFile('output.xlsx');

Luckysheet:

const options = {
  container: 'luckysheet',
  data: [{ name: 'Sheet1', celldata: [{ r: 0, c: 0, v: 'Hello, World!' }] }]
};
luckysheet.create(options);

Key Differences

Luckysheet is a full-featured spreadsheet component for web applications, offering a UI similar to Excel
exceljs focuses on programmatic Excel file manipulation without a built-in UI
Luckysheet is better suited for in-browser spreadsheet editing, while exceljs excels at server-side processing
exceljs provides more advanced Excel-specific features and formatting options
Luckysheet offers real-time collaboration features out of the box

Both libraries have their strengths, and the choice between them depends on the specific requirements of your project, such as whether you need a UI component or server-side processing capabilities.

ag-grid

12,496

The best JavaScript Data Table for building Enterprise Applications. Supports React / Angular / Vue / Plain JavaScript.

Pros of ag-grid

More mature and feature-rich, with extensive documentation and enterprise support
Highly performant, capable of handling large datasets efficiently
Offers a wide range of built-in functionality like filtering, sorting, and grouping

Cons of ag-grid

Steeper learning curve due to its complexity and extensive API
Licensing costs for enterprise features can be expensive for some projects
Less focused on spreadsheet-like functionality compared to Luckysheet

Code Comparison

ag-grid:

const gridOptions = {
  columnDefs: [
    { field: 'make' },
    { field: 'model' },
    { field: 'price' }
  ],
  rowData: [
    { make: 'Toyota', model: 'Celica', price: 35000 }
  ]
};

Luckysheet:

const options = {
  container: 'luckysheet',
  data: [
    {
      name: 'Sheet1',
      celldata: [
        { r: 0, c: 0, v: 'Toyota' },
        { r: 0, c: 1, v: 'Celica' },
        { r: 0, c: 2, v: 35000 }
      ]
    }
  ]
};

Both libraries offer ways to define and populate grid data, but ag-grid uses a more structured approach with column definitions and row data, while Luckysheet uses a cell-based model similar to traditional spreadsheets.

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

logo

English| ç®ä½ä¸æ

Luckysheet is no longer maintained, please use Univer instead!

Follow the #1454 issue for more details.

Introduction

ðLuckysheet is an online spreadsheet like excel that is powerful, simple to configure, and completely open source.

Links

Source Code	Documentation	Demo	Plugins Demo	Forum
Github	Online Documentation	Online Demo / Cooperative editing demo	Import Excel Demo	Chinese Forum
Gitee Mirror	Gitee Online Documentation	Gitee Online Demo	Gitee Import Excel Demo	Google Group

Demo

Plugins

Luckyexcel: Excel import and export library
chartMix: Chart plugin

Ecosystem

Project	Description
Luckysheet Vue	Luckysheet and Luckyexcel in a vue cli3 project
Luckysheet Vue3	Luckysheet and Luckyexcel in a vue3 project with vite
Luckysheet React	Luckysheet in a React project
Luckyexcel Node	Use Luckyexcel in koa2
Luckysheet Server	Java backend Luckysheet Server
Luckysheet Server Starter	LuckysheetServer docker deployment startup template

Features

Formatting: style, conditional formatting, text alignment and rotation, text truncation, overflow, automatic line wrapping, multiple data types, cell segmentation style
Cells: drag and drop, fill handle, multiple selection, find and replace, location, merge cells, data verification
Row & column: hide, insert, delete rows or columns, freeze, and split text
Operation: undo, redo, copy, paste, cut, hot key, format painter, drag and drop selection
Formulas & Functions: Built-in, remote and custom formulas
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.

For a more detailed feature list, please refer to: Features

ð Resources

Priority reading for new users: User Guide
For the tutorials, learning materials and supporting solutions provided by the community, please refer to: Tutorials and Resources

ð Changelog

Detailed changes for each release are documented in the CHANGELOG.md.

âï¸ Issues

Please make sure to read the Issue Reporting Checklist before opening an issue. Issues not conforming to the guidelines may be closed immediately.

â TODO

Managed with GitHub Projects

ðªContribution

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

Usage

First step

Introduce dependencies through CDN

<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/plugins.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/css/luckysheet.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/assets/iconfont/iconfont.css' />
<script src="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/js/plugin.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/luckysheet.umd.js"></script>

Second step

Specify a table container

<div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:100%;height:100%;left: 0px;top: 0px;"></div>

Third step

Create a table

<script>
    $(function () {
        //Configuration item
        var options = {
            container: 'luckysheet' //luckysheet is the container id
        }
        luckysheet.create(options)
    })
</script>

Development

Requirements

Node.js Version >= 6

Installation

npm install
npm install gulp -g

Development

npm run dev

Package

npm run build

Partner project

h5-Dooring

Communication

Chinese community

Sponsor

Luckysheet is an MIT-licensed open source project with its ongoing development made possible entirely by the support of these awesome backers. If you'd like to join them, please consider:

Become a backer or sponsor on Patreon.
Become a backer or sponsor on Open Collective.
One-time donation via PayPal, WeChat or Alipay

PayPal	WeChat	Alipay
Paypal Me

What's the difference between Patreon and OpenCollective?

Funds donated via Patreon go directly to support mengshukeji's work on Luckysheet. Funds donated via OpenCollective are managed with transparent expenses and will be used for compensating work and expenses for core team members or sponsoring community events. Your name/logo will receive proper recognition and exposure by donating on either platform.

Sponsors List

(Sort by time)

*æ¶ Â¥ 200
popo Â¥ 1
ååå Â¥ 5
Shawnæ Â¥ 99
å¹¸è¿çå°è·¯æ Â¥ 1
å¯å¯ä¿ Â¥ 88
mxb Â¥ 10
ç¥é³ Â¥ 20
*å Â¥ 30
èæ Â¥ 200
çå Â¥ 50
Alphabet(Google)-gcf Â¥ 1
**å¹³ Â¥ 100
**ä¸ Â¥ 10
debugger Â¥ 20
ç¦äºç¦ Â¥ 10
æé¡¶é¡¶ Â¥ 200
yangxshn Â¥ 10
ç±ä¹ Â¥ 100
å°æé£åå Â¥ 66
å¼ é Â¥ 200
æ¹æ²»å Â¥ 1
*ç¹ Â¥ 10
**æ Â¥ 9.9
**sdmq Â¥ 20
*æ Â¥ 10
Quentin Â¥ 20
å¨å®å¡ Â¥ 100
*è¶ Â¥ 10
ç»´å® Â¥ 100
hyy Â¥ 20
é¨äºå¯æ±æ Â¥ 50
**å Â¥ 10
**å Â¥ 20
terrywan Â¥ 100
çææ´ª Â¥ 10
Sun Â¥ 10
å¿§ç»£ Â¥ 100
Jasonx Â¥ 10
å½å Â¥ 66.6
éå¿ Â¥ 100
å¿å Â¥ 1
ni Â¥ 100
è Â¥ 50
Mads_chan Â¥ 1
LK Â¥ 100
æºè¿æ¹è ææ±ªç³ Â¥ 168
**å Â¥ 260
*è¶ Â¥ 10
*å Â¥ 10
*è¾ Â¥ 15
ååå¥½é¾èµ· Â¥ 20
å¤§å±± Â¥ 1
waiting Â¥ 1000
**å® Â¥ 10.00
åå°å¸çå¥å¥ Â¥ 20.00
å®éè´è¿ Â¥ 10.00
Eleven Â¥ 1.00
**å¸ Â¥ 188
henry Â¥ 100
.æ³¢ç½ Â¥ 50
è±è½æå®¶ Â¥ 50
è¸éåæ°´åå±± Â¥ 1
LC Â¥ 5
**æ Â¥ 8.80
*å Â¥ 20
å¼ å½ª Â¥ 50
ä¼ä¸ææ¡£äº@èæ Â¥ 10
å¿å Â¥ 50
éé¥è¡ Â¥ 10
z.wasaki Â¥ 50
Make Children Â¥ 20
Foam Â¥ 20
å¥¥ç¹æ¼( o|o)ãä¸ Â¥ 50
**å¯ Â¥ 10
**åµ Â¥ 20
**å· Â¥ 1
äºä¸ Â¥ 50
èç¶ææ Â¥ 10
é¹æ° Â¥ 10
å¼ æ°¸å¼º Â¥ 50
é±¼å¾æ°´ Â¥ 50
Ccther Â¥ 1
Eric Cheng Â¥ 10
ä½å Â¥ 1
è±å¶ Â¥ 50
GT Â¥ 20
èèå¿ Â¥ 10
fisher Â¥ 1
JC Â¥ 5
ä½å Â¥ 20
ç¬å¤ä¸å Â¥ 50
mxt Â¥ 20
ä¸å¶è¿·å±± Â¥ 100
Jeff Â¥ 100
å«åå¤æ¡çð¶ Â¥ 100
æå³° Â¥ 10
æ Â¥ 1
æµªéä¸ªæµª Â¥ 1
åè°å½æ° Â¥ 50
èµçå Â¥ 5
Miloâ¢J Â¥ 20
å¯éäº Â¥ 200
*ç¨ Â¥ 10
æ¥ä¸æ¯å¡å¸é¸å¥¶ Â¥ 5
åä¹è Â¥ 100
å¿«ææ±æ¹ Â¥ 50
*æ° Â¥ 9.9
**é¾ Â¥ 100
**æ± Â¥ 100
**å¨ Â¥ 9.8
**æ¶ Â¥ 500
**å Â¥ 10
*æ¶ Â¥ 1
*åµ Â¥ 5
*é³ Â¥ 200
*è¾ Â¥ 1
*å¸ Â¥ 30
**æº Â¥ 10
**éº Â¥ 20
*é Â¥ 9.9
*å¸ Â¥ 10
*é« Â¥ 6.66
~æ´:shu Â¥ 29.79
æªæ¥ Â¥ 1
å½å Â¥ 0.1
ç¨å¿çµå¬é¨ Â¥ 10
é Â¥ 5
æç¨ Â¥ 5

Authors and acknowledgment

Active Core Team Members

Community Partners

License

MIT

Top Related Projects

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

Top Related Projects

Quick Overview

Pros

Cons

Code Examples

Getting Started

Competitor Comparisons

Pros of Handsontable

Cons of Handsontable

Code Comparison

Key Differences

Use Cases

Pros of SheetJS

Cons of SheetJS

Code Comparison

Summary

Pros of exceljs

Cons of exceljs

Code Comparison

Key Differences

Pros of ag-grid

Cons of ag-grid

Code Comparison

Convert designs to code with AI

README

Luckysheet is no longer maintained, please use Univer instead!

Introduction

Links

Plugins

Ecosystem

Features

ð Resources

ð Changelog

âï¸ Issues

â TODO

ðªContribution

Usage

First step

Second step

Third step

Development

Requirements

Installation

Development

Package

Partner project

Communication

Sponsor

What's the difference between Patreon and OpenCollective?

Sponsors List

Authors and acknowledgment

Active Core Team Members

Community Partners

License

Top Related Projects

Convert designs to code with AI

NPM DownloadsLast 30 Days

ð Resources

ð Changelog

âï¸ Issues

â TODO

ðªContribution