Online Collaboration Excel

English | 中文

Online Demo

Installation

npm i --save excel-collab

Quick Start

1. Create a React app

npm create vite@latest my-app -- --template react-ts
cd my-app
npm i

2. Install the Required Libraries

npm i --save excel-collab yjs

3. Modify the Main File

// src/main.tsx
import { createRoot } from 'react-dom/client';
import { StrictMode } from 'react';
import { initController, StateContext, Excel } from 'excel-collab';
import Worker from 'excel-collab/worker?worker';
import 'excel-collab/style.css';
import * as Y from 'yjs';

const controller = initController({
  worker: new Worker(),
  doc: new Y.Doc(),
});

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <div style={{ height: '100vh' }}>
      <StateContext value={{ controller }}>
        <Excel />
      </StateContext>
    </div>
  </StrictMode>,
);

4. Start the app

npm run dev

Examples

• Simple Example
• Custom Example

Collaboration Example

git clone https://github.com/nusr/excel.git
cd excel

npm i -g pnpm
pnpm i

cd demo/frontend && pnpm i && cd -
cd demo/backend && pnpm i && cd -
npm run dev

Supported Features

• Online Collaboration
• Create File
• Change File Name
• Web Worker parse formulas
• OffScreenCanvas Render
• Undo
• Redo
• Copy
• Cut
• Paste
• Formulas
• Font Family
• Font Size
• Font Color
• Fill Color
• Bold
• Italic
• Strike
• Underline
• Border
• Text Vertical Align
• Text Horizontal Align
• Text Wrapping
• Number Format
• AutoFilter
• Merge Cells
• Chart
• Floating Picture
• Define Name
• Insert Row
• Insert Column
• Delete Row
• Delete Column
• Hide Row
• Hide Column
• Row Height
• Column Width
• Insert Sheet
• Delete Sheet
• Rename Sheet
• Hide Sheet
• Unhide Sheet
• Import XLSX
• Export XLSX
• Import CSV
• Export CSV
• Dark Mode
• I18N

Supported Formulas

Math

• ABS
• ACOS
• ACOSH
• ACOT
• ACOTH
• ASIN
• ASINH
• ATAN
• ATAN2
• ATANH
• AVERAGE
• COS
• COT
• EXP
• INT
• PI
• SIN
• SUM

Text

• CHAR
• CODE
• CONCAT
• CONCATENATE
• LEN
• LOWER
• SPLIT
• T
• TEXT
• TRIM
• UNICHAR
• UNICODE
• UPPER