Online Collaboration Excel

English | 中文

Online Demo

Installation

npm i --save excel-collab

Examples

• Simple Example
• Custom Example
• Collaboration Example

Quick Start

Create a React app

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

Install the Required Libraries

npm i --save excel-collab comlink yjs react@latest react-dom@latest @types/react@latest @types/react-dom@latest

Modify the Main File

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

const workerInstance = wrap<WorkerMethod>(new Worker());

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

controller.addFirstSheet();

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

Create the Worker File

// src/worker.ts
import { workerMethod } from 'excel-collab';
import { expose } from 'comlink';

expose(workerMethod);

Modify the Config File

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  worker: {
    format: 'es',
  },
});

Start the app

npm run dev

Local Developing

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