Fileverse dSheets

dsheets.new is your end-to-end encrypted alternative to Google Sheets & Excel. Use it to read, manipulate, and even write financial data, in real-time. Built on the same middleware as ddocs.new, the app is privacy-focused, sovereign, and gives you full control over your data.

𓆣 Features include:

• End-to-end encryption
• Local & peer-to-peer storage
• Query live data from APIs & even smart contracts
• Enable dark mode and other color themes
• Use a familiar spreadsheets interface & functions (VLOOKUP, INDEX, MATCH…)
• Granular access permissions (e.g., give view, comment, edit, suggest access to specific email addresses)

Installation

Install via npm to get started:

npm install @fileverse-dev/dsheet

Setup

1. Import

Add the following imports

import DsheetEditor from '@fileverse-dev/dsheet';
import '@fileverse-dev/dsheet/styles';

2. Configure Tailwind

Add to your tailwind.config.js:

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./node_modules/@fileverse-dev/dsheet/dist/index.es.js"
  ]
}

3. Basic Usage

function App() {
  const [data, setData] = useState({});

  return (
    <DsheetEditor
      isAuthorized={true}
      dsheetId="my-sheet-id"
      onChange={(updateData) => setData(updateData)}
    />
  );
}

Props Reference

Required Props

Optional Props

Advanced Props

UI State Props

Examples

Read-Only Viewer

<DsheetEditor
  isAuthorized={true}
  dsheetId="viewer-sheet"
  isReadOnly={true}
  allowComments={true}
  portalContent={encodedData}
  onChange={() => {}}
/>

Collaborative Editor

<DsheetEditor
  isAuthorized={true}
  dsheetId="collab-sheet"
  username="john-doe"
  isCollaborative={true}
  enableWebrtc={true}
  onChange={(data) => console.log('Sheet updated:', data)}
/>

Custom Navbar

<DsheetEditor
  isAuthorized={true}
  dsheetId="custom-sheet"
  renderNavbar={(editorValues) => (
    <div className="flex items-center gap-4">
      <h1>My Custom Sheet</h1>
      <button onClick={() => editorValues?.sheetEditorRef.current?.exportToExcel()}>
        Export
      </button>
    </div>
  )}
/>

With Templates

<DsheetEditor
  isAuthorized={true}
  dsheetId="template-sheet"
  selectedTemplate="financial-budget"
  isTemplateOpen={true}
  toggleTemplateSidebar={() => setTemplateOpen(!templateOpen)}
/>

Development

Run Demo

cd demo
npm install
npm run dev

Build Package

npm run build

TypeScript

All props are fully typed. Import types:

import { DsheetProps, SheetUpdateData, EditorValues } from '@fileverse-dev/dsheet/types';

License

AGPL-3.0