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
  • useSpreadSheet hook
  • Multiple Spreadsheets

Was this helpful?

  1. Configuration
  2. API

SpreadsheetProvider

Context Provider that isolates Spreadsheet internal state

Each Spreadsheet instance should be wrapped in a SpreadsheetProvider component so that each instance will have its own set of props and internal state.

useSpreadSheet hook

Children of SpreadsheetProvider will have access to useSpreadsheet hook that exposes several internal functions a developer can access.

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

const MySpreadsheet = () => {

  const {
    canEditCell,
    cancelEditor,
    focusSheet,
    getCellBounds,
    getCellDimensions,
    getNamedRanges,
    getNextFocusableCell,
    getRowHeight,
    getSelectionsFromFormula,
    getTableColumnNames,
    getTableNames,
    makeEditable,
    onEditorKeyDown,
    scrollToCell,
    setEditorValue,
    submitEditor,
    updateSelectionStartEndReference,
  } = useSpreadsheet();
  
  return (
    <CanvasGrid
      rowCount={1000}
      columnCount={1000}
      sheetId={1}
      tokenizer={tokenizer}
    />
  );
};

const App = () => (
  <SpreadsheetProvider>
    <MySpreadsheet />
  </SpreadsheetProvider>
);

Multiple Spreadsheets

You can render multiple Spreadsheet UI's in a single page, each able to work independently or together. It is left to your imagination.

You can share tables, charts, embeds across multiple sheets or even sheets and sheetData.

Each Spreadsheet should be wrapped in <SpreadsheetProvider /> to isolate internal state, such as formulaMode, cell editor states, cell selection states etc.

import { SpreadsheetProvider, CanvasGrid } from "@rowsncolumns/spreadsheet"

const SpreadsheetA = () => {
  return (
    <SpreadsheetProvider>
      <CanvasGrid />
    </SpreadsheetProvider>
  )
}
const SpreadsheetB = () => {
  return (
    <SpreadsheetProvider>
      <CanvasGrid />
    </SpreadsheetProvider>
  )
}

const App = () => {
  return (
    <>
      <SpreadsheetA />
      <SpreadsheetB />
    </>
  )
}
PreviousSheetsNextuseSpreadsheet

Last updated 2 years ago

Was this helpful?

⚙️