Rows n’ Columns Docs
Visit HomepagePricing
  • Introduction
  • License
  • Demos
  • Getting started
    • Installation
    • Spreadsheet state
    • Headless UI
    • Imperative Spreadsheet API
    • Examples
  • ⚙️Configuration
    • Features
      • Data validation
      • Formula evaluation
      • Real-time data
      • Cell editors
      • Cell renderer
      • Structured Cell Renderer
      • Theming
      • Styling
      • Context menu
      • Localisation
      • Undo/Redo
      • Conditional formatting
      • Named ranges
      • Structured references
        • Schema based tables and columns
        • Calculated columns
      • Basic filter or Excel AutoFilter
      • Charts
      • Embedded content
      • Calculate on-demand
      • Drag and Drop
      • Pivoting and Grouping (Coming soon)
      • Tokenizer
      • Lazy loading/Infinite scrolling
      • OpenAI/Chat GPT Integration
      • Search
      • Formula protection
      • Autofill
      • Export canvas as image
    • Components
      • Canvas Grid
      • Toolbar
      • Sheet Tabs
      • Sheet Switcher
      • Sheet Status
      • Range Selector
      • Formula Input
      • Selection Input
      • SheetSearch
      • NamedRangeEditor
      • DeleteSheetConfirmation
      • TableEditor
      • Cell Format Editor
      • Conditional Format Editor
      • Data Validation Editor
      • Insert Link Editor
      • Insert Image Editor
    • API
      • Cell Data
      • Sheets
      • SpreadsheetProvider
      • useSpreadsheet
      • Modules
      • SheetCell
    • Using Spreadsheet with NextJS
    • Keyboard shortcuts
  • Collaboration
    • Real time collaboration
    • Yjs Collaboration
    • Supabase realtime Collaboration
  • Charts
    • Charts
    • Custom charts
  • Excel and Google sheets
    • CSV
    • Excel
    • Google sheets (Coming soon)
  • Functions
    • Named functions
    • Array formulas
  • Data persistence
    • Server side data persistence
    • React Query integration
  • Specifications
    • Browser support
    • Third party licenses
  • Support
    • Contact support
    • Report bugs
    • Feature requests
Powered by GitBook
On this page

Was this helpful?

  1. Collaboration

Real time collaboration

Built for real-time editing and viewing of Spreadsheets

With a supported real-time back-end, you can have a full collaborative and real-time Spreadsheet. The UI is data agnostic, so both OT and CRDT data structures are supported.

SheetGrid exposes the following prop to highlight users in the canvas grid.

const App = () => {
  const currentUserId = 1
  <SheetGrid
    users={
      [
        {
          userId: 1,
          title: 'Foo bar',
          // Active cell that will be highlighted
          activeCell: { rowIndex: 2, columnIndex: 3},
          // Which sheetID is currently in focus
          sheetId: 1
        },
        {
          userId: 2,
          title: 'Foo bar',
          activeCell: { rowIndex: 2, columnIndex: 3},
          sheetId: 1
        }
      ]
    }
    userId={currentUserId}
  />
}

Immer and useSpreadsheetState

If you are using useSpreadsheetState hook to manage the state of Spreadsheet, Immer is the state library that is used to modify state.

Immer has really good API for JSON patches that is sent over the wire for real-time collaboration. JSON patches also helps in building a robust undo/redo functionality.

onChangeHistory callback is fired when user modifies state.

import { SpreadsheetProvider, CanvasGrid } from "@rowsncolumns/spreadsheet";
import { tokenize as tokenizer } from "@rowsncolumns/calculator";
import { useSpreadsheetState } from "@rowsncolumns/spreadsheet-state";

const MySpreadsheet = () => {
  const {} = useSpreadsheetState({
    onChangeHistory(patches) {
      // Send this over the wire to Yjs, Pusher, Liveblocks etc
      console.log(patches);
    },
  });
  return (
    <CanvasGrid
      rowCount={1000}
      columnCount={1000}
      sheetId={1}
      tokenizer={tokenizer}
      users={[{ ... }]}
      userId={}
    />
  );
};

const App = () => (
  <SpreadsheetProvider>
    <MySpreadsheet />
  </SpreadsheetProvider>
);
PreviousKeyboard shortcutsNextYjs Collaboration

Last updated 12 months ago

Was this helpful?