Socket
Book a DemoInstallSign in
Socket

@fileverse-dev/dsheet

Package Overview
Dependencies
Maintainers
6
Versions
323
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@fileverse-dev/dsheet

DSheet

1.1.22
latest
npmnpm
Version published
Weekly downloads
1.6K
45.36%
Maintainers
6
Weekly downloads
 
Created
Source

Fileverse DSheet

NPM TypeScript

dsheets.new is your decentralised alternative to google sheets & excel. Use it to read, manipulate, and even write onchain data, in real-time. Built on the same middleware as ddocs.new, the app is privacy-first, self-sovereign, and gives you full control over your data <3

👩‍🏭 Features:

  • End-to-end encryption
  • Local & peer-to-peer storage
  • Query live data from APIs & smart contracts
  • Write onchain: simulate + submit transactions (V0.3)
  • Use a familiar spreadsheets interface & functions (VLOOKUP, INDEX, MATCH…)
  • Granular access permissions (email, wallet, ENS)

Try Live Demo →

image

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

PropTypeDescription
isAuthorizedbooleanAuthorization status for the user
dsheetIdstringUnique identifier for collaboration room

Optional Props

PropTypeDefaultDescription
onChange(data: SheetUpdateData, encodedUpdate?: string) => void-Callback when sheet data changes
portalContentstring-Encoded initial sheet data
isReadOnlybooleanfalseEnable read-only mode
allowCommentsbooleanfalseEnable comments (requires isReadOnly=true)
usernamestring-Username for collaboration
isCollaborativebooleanfalseEnable collaborative features
enableWebrtcbooleantrueEnable WebRTC for P2P collaboration
enableIndexeddbSyncbooleantrueEnable local IndexedDB persistence
isTemplateOpenboolean-Template sidebar state
selectedTemplatestring-Selected template identifier
onboardingCompleteboolean-Onboarding completion status
sheetEditorRefRefObject<WorkbookInstance>-External ref to editor instance

Advanced Props

PropTypeDescription
renderNavbar(editorValues?: EditorValues) => JSX.ElementCustom navbar renderer
onboardingHandlerOnboardingHandlerTypeCustom onboarding logic
dataBlockApiKeyHandlerDataBlockApiKeyHandlerTypeAPI key handler for data blocks
getCommentCellUI(row: number, column: number) => voidCustom comment UI handler
commentDataObjectComment data for cells
toggleTemplateSidebar() => voidTemplate sidebar toggle handler
storeApiKey(apiKeyName: string) => voidAPI key storage handler
onDataBlockApiResponse(dataBlockName: string) => voidData block API response handler
onDuneChartEmbed() => voidDune chart embed handler
onSheetCountChange(sheetCount: number) => voidSheet count change handler

UI State Props

PropTypeDescription
setShowFetchURLModalDispatch<SetStateAction<boolean>>URL fetch modal state setter
setFetchingURLData(fetching: boolean) => voidURL fetching state setter
setInputFetchURLDataBlockDispatch<SetStateAction<string>>URL input state setter
setForceSheetRenderDispatch<SetStateAction<number>>Force re-render trigger

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

MIT

FAQs

Package last updated on 05 Sep 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc

U.S. Patent No. 12,346,443 & 12,314,394. Other pending.