Rows and Columns Spreadsheet

https://docs.rowsncolumns.app
Admin
Rows and Columns Spreadsheet is a React component library for building powerful, Excel-like...
Tokens:141,385
Snippets:1,678
Trust Score:6.5
Update:4 months ago
Show doc for...
Tokens:
Raw
### Querying Documentation

Source: https://docs.rowsncolumns.app/getting-started/installation

Example of how to query the documentation dynamically using an HTTP GET request with the 'ask' query parameter.

```http
GET https://docs.rowsncolumns.app/getting-started/installation.md?ask=<question>
```

--------------------------------

### HTTP GET Request Example

Source: https://docs.rowsncolumns.app/configuration/features/print-preview

Example of how to perform an HTTP GET request to query the documentation dynamically.

```http
GET https://docs.rowsncolumns.app/configuration/features/print-preview.md?ask=<question>
```

--------------------------------

### Querying Documentation

Source: https://docs.rowsncolumns.app/getting-started

Perform an HTTP GET request on the current page URL with the `ask` query parameter to ask a question about the documentation.

```http
GET https://docs.rowsncolumns.app/getting-started.md?ask=<question>
```

--------------------------------

### Query Documentation via HTTP GET

Source: https://docs.rowsncolumns.app/support/contact-support

This example shows how to query the documentation dynamically by performing an HTTP GET request to the current page URL with the `ask` query parameter.

```http
GET https://docs.rowsncolumns.app/support/contact-support.md?ask=<question>
```

--------------------------------

### Adjusting the height of the Spreadsheet

Source: https://docs.rowsncolumns.app/getting-started/installation

Examples demonstrating how to set the height of the Spreadsheet component using CSS.

```html
// Auto-height
<div style={{ flex: 1}}>
    <Spreadsheet />
</div>

// Fixed height
<div style={{ height: 500 }}>
    <Spreadsheet />
</div>
```

--------------------------------

### Querying Documentation Example

Source: https://docs.rowsncolumns.app/configuration/features/sparklines

Example of how to query the documentation dynamically using an HTTP GET request with the 'ask' query parameter.

```http
GET https://docs.rowsncolumns.app/configuration/features/sparklines.md?ask=<question>
```

--------------------------------

### Querying Documentation Dynamically

Source: https://docs.rowsncolumns.app/configuration/components/selection-input

Example of how to perform an HTTP GET request to query the documentation dynamically.

```http
GET https://docs.rowsncolumns.app/configuration/components/selection-input.md?ask=<question>
```

--------------------------------

### Dynamic Documentation Query

Source: https://docs.rowsncolumns.app/configuration/features/styling

Example of how to query the documentation dynamically using an HTTP GET request with the 'ask' query parameter.

```http
GET https://docs.rowsncolumns.app/configuration/features/styling.md?ask=<question>
```

--------------------------------

### Dynamic Documentation Query Example

Source: https://docs.rowsncolumns.app/configuration/features/structured-cell-renderer

Example of how to perform an HTTP GET request to query documentation dynamically using the 'ask' query parameter.

```http
GET https://docs.rowsncolumns.app/configuration/features/structured-cell-renderer.md?ask=<question>

```

--------------------------------

### Querying Documentation Dynamically

Source: https://docs.rowsncolumns.app/getting-started/roadmap

Example of how to perform an HTTP GET request to query the documentation dynamically using the `ask` query parameter.

```http
GET https://docs.rowsncolumns.app/getting-started/roadmap.md?ask=<question>
```

--------------------------------

### Querying Documentation via HTTP GET

Source: https://docs.rowsncolumns.app/configuration/features/lazy-loading-infinite-scrolling

Example of an HTTP GET request to query the documentation dynamically.

```http
GET https://docs.rowsncolumns.app/configuration/features/lazy-loading-infinite-scrolling.md?ask=<question>
```

--------------------------------

### Agent Instructions: Querying This Documentation

Source: https://docs.rowsncolumns.app/configuration/components/conditional-format-editor-1

Example of how to perform an HTTP GET request to query the documentation dynamically.

```http
GET https://docs.rowsncolumns.app/configuration/components/conditional-format-editor-1.md?ask=<question>
```

--------------------------------

### Querying Documentation Dynamically

Source: https://docs.rowsncolumns.app/specifications/browser-support

Example of how to perform an HTTP GET request to query the documentation dynamically with the 'ask' query parameter.

```HTTP
GET https://docs.rowsncolumns.app/specifications/browser-support.md?ask=<question>
```

--------------------------------

### Querying Documentation Dynamically

Source: https://docs.rowsncolumns.app/configuration/features/undo-redo

Example of how to perform an HTTP GET request to a documentation page with an 'ask' query parameter to get specific information.

```http
GET https://docs.rowsncolumns.app/configuration/features/undo-redo.md?ask=<question>
```

--------------------------------

### Querying Documentation

Source: https://docs.rowsncolumns.app/configuration/features/pivoting-and-grouping

Example of how to query the documentation dynamically using an HTTP GET request with the 'ask' query parameter.

```http
GET https://docs.rowsncolumns.app/configuration/features/pivoting-and-grouping.md?ask=<question>
```

--------------------------------

### Querying Documentation Dynamically

Source: https://docs.rowsncolumns.app/specifications/third-party-licenses

This example shows how to perform an HTTP GET request to query the documentation dynamically with an 'ask' query parameter.

```HTTP
GET https://docs.rowsncolumns.app/specifications/third-party-licenses.md?ask=<question>
```

--------------------------------

### Querying Documentation Dynamically

Source: https://docs.rowsncolumns.app/configuration/features/search

Example of how to perform an HTTP GET request to query the documentation dynamically with an 'ask' query parameter.

```http
GET https://docs.rowsncolumns.app/configuration/features/search.md?ask=<question>
```

--------------------------------

### Querying Documentation

Source: https://docs.rowsncolumns.app/configuration/components/formula-input

Example of how to query the documentation dynamically using an HTTP GET request with the 'ask' query parameter.

```http
GET https://docs.rowsncolumns.app/configuration/components/formula-input.md?ask=<question>
```

--------------------------------

### Querying Documentation

Source: https://docs.rowsncolumns.app/configuration/features/structured-references/schema-based-tables-and-columns

This example shows how to query the documentation dynamically using an HTTP GET request with the `ask` query parameter.

```HTTP
GET https://docs.rowsncolumns.app/configuration/features/structured-references/schema-based-tables-and-columns.md?ask=<question>
```

--------------------------------

### Querying Documentation Dynamically

Source: https://docs.rowsncolumns.app/configuration/features/data-validation

An example of how to perform an HTTP GET request with the `ask` query parameter to get dynamic information from the documentation.

```http
GET https://docs.rowsncolumns.app/configuration/features/data-validation.md?ask=<question>

```

--------------------------------

### Render a stateless spreadsheet

Source: https://docs.rowsncolumns.app/getting-started/installation

Basic example of rendering a stateless Spreadsheet component in a React application.

```jsx
import React from 'react'
// Add css
import "@rowsncolumns/spreadsheet/dist/spreadsheet.min.css";
import { SpreadsheetProvider, CanvasGrid } from "@rowsncolumns/spreadsheet"

const MySpreadsheet = () => {
  const licenseKey = "will be emailed to you after purchase"
  return (
    <SpreadsheetProvider>
      <CanvasGrid licenseKey={licenseKey} />
    </SpreadsheetProvider>
  )
}
```

--------------------------------

### Querying Documentation Dynamically

Source: https://docs.rowsncolumns.app/collaboration

Example of how to perform an HTTP GET request to query the documentation dynamically with an 'ask' query parameter.

```HTTP
GET https://docs.rowsncolumns.app/collaboration.md?ask=<question>
```

--------------------------------

### Basic ShareDB Server Setup

Source: https://docs.rowsncolumns.app/collaboration/sharedb-collaboration

Example of setting up a basic ShareDB server using Express and WebSockets.

```javascript
const http = require("http");
const express = require("express");
const ShareDB = require("sharedb");
const WebSocket = require("ws");
const WebSocketJSONStream = require("@teamwork/websocket-json-stream");

// Initialize ShareDB
const backend = new ShareDB();

// Create Express app and HTTP server
const app = express();
const server = http.createServer(app);

// Create WebSocket server
const wss = new WebSocket.Server({ server });

// Handle WebSocket connections
wss.on("connection", (ws) => {
  const stream = new WebSocketJSONStream(ws);
  backend.listen(stream);
});

// Start server
const PORT = process.env.PORT || 8080;
server.listen(PORT, () => {
  console.log(`ShareDB server listening on port ${PORT}`);
});
```

--------------------------------

### Install using Yarn

Source: https://docs.rowsncolumns.app/getting-started/installation

Install the Spreadsheet component and its optional state hook using Yarn.

```sh
yarn add @rowsncolumns/spreadsheet
```

```sh
// Optional spreadsheet state hook
yarn add @rowsncolumns/spreadsheet-state
```

--------------------------------

### Install using NPM

Source: https://docs.rowsncolumns.app/getting-started/installation

Install the Spreadsheet component and its optional state hook using npm.

```sh
npm install @rowsncolumns/spreadsheet --save
```

```bash
// Optional spreadsheet state hook
npm install @rowsncolumns/spreadsheet-state --save
```

--------------------------------

### Querying Documentation Dynamically

Source: https://docs.rowsncolumns.app/configuration/features/cell-tooltips-and-popovers

Example of how to perform an HTTP GET request to query the documentation dynamically with an 'ask' query parameter.

```HTTP
GET https://docs.rowsncolumns.app/configuration/features/cell-tooltips-and-popovers.md?ask=<question>
```

--------------------------------

### Querying Documentation Dynamically

Source: https://docs.rowsncolumns.app/configuration/api

This example shows how to query the documentation dynamically by performing an HTTP GET request with the `ask` query parameter.

```http
GET https://docs.rowsncolumns.app/configuration/api.md?ask=<question>
```

--------------------------------

### Querying Documentation

Source: https://docs.rowsncolumns.app/configuration/features/lambda-and-higher-order-functions

Example of how to query the documentation dynamically using an HTTP GET request with the 'ask' query parameter.

```http
GET https://docs.rowsncolumns.app/configuration/features/lambda-and-higher-order-functions.md?ask=<question>
```

--------------------------------

### Installation

Source: https://docs.rowsncolumns.app/configuration/features/version-comparison

Install the version comparison package using npm.

```bash
npm install @rowsncolumns/version-comparison
```

--------------------------------

### Querying Documentation Dynamically

Source: https://docs.rowsncolumns.app/collaboration/real-time-collaboration

This example shows how to query the documentation dynamically by making an HTTP GET request to the current page URL with an `ask` query parameter.

```http
GET https://docs.rowsncolumns.app/collaboration/real-time-collaboration.md?ask=<question>
```

--------------------------------

### Querying Documentation Dynamically

Source: https://docs.rowsncolumns.app/data-persistence

An example of how to perform an HTTP GET request to query the documentation dynamically using the `ask` query parameter.

```HTTP
GET https://docs.rowsncolumns.app/data-persistence.md?ask=<question>
```

--------------------------------

### Query Documentation Dynamically

Source: https://docs.rowsncolumns.app/getting-started/formula-evaluation

Example of how to perform an HTTP GET request to query the documentation dynamically with an 'ask' query parameter.

```http
GET https://docs.rowsncolumns.app/getting-started/formula-evaluation.md?ask=<question>
```

--------------------------------

### Querying Documentation

Source: https://docs.rowsncolumns.app/configuration/using-spreadsheet-with-nextjs

Example of how to query the documentation dynamically using an HTTP GET request with the 'ask' query parameter.

```http
GET https://docs.rowsncolumns.app/configuration/using-spreadsheet-with-nextjs.md?ask=<question>
```

--------------------------------

### Querying Documentation Example

Source: https://docs.rowsncolumns.app/configuration/components/grid-footer

Demonstrates how to query the documentation dynamically using an HTTP GET request with the 'ask' query parameter.

```http
GET https://docs.rowsncolumns.app/configuration/components/grid-footer.md?ask=<question>
```

--------------------------------

### Querying Documentation Dynamically

Source: https://docs.rowsncolumns.app/configuration/features/navigate-to-range

Example of how to query the documentation dynamically using an HTTP GET request with the `ask` query parameter.

```HTTP
GET https://docs.rowsncolumns.app/configuration/features/navigate-to-range.md?ask=<question>
```

--------------------------------

### API for dynamic querying

Source: https://docs.rowsncolumns.app/configuration/features/outline-grouping

Example of how to perform an HTTP GET request to query the documentation dynamically with an 'ask' query parameter.

```http
GET https://docs.rowsncolumns.app/configuration/features/outline-grouping.md?ask=<question>
```

--------------------------------

### Querying Documentation Dynamically

Source: https://docs.rowsncolumns.app/configuration/features/rich-text-formatting

Example of how to perform an HTTP GET request to query the documentation dynamically with an 'ask' query parameter.

```HTTP
GET https://docs.rowsncolumns.app/configuration/features/rich-text-formatting.md?ask=<question>
```

--------------------------------

### Querying Documentation Dynamically

Source: https://docs.rowsncolumns.app/configuration/features/iterative-calculation

Example of how to perform an HTTP GET request to query the documentation dynamically with an 'ask' query parameter.

```http
GET https://docs.rowsncolumns.app/configuration/features/iterative-calculation.md?ask=<question>
```

--------------------------------

### API Request for Documentation Querying

Source: https://docs.rowsncolumns.app/collaboration/supabase-realtime-collaboration

This example shows how to query the documentation dynamically by performing an HTTP GET request to the current page URL with an 'ask' query parameter. This is useful for retrieving specific information or clarification not directly present on the page.

```http
GET https://docs.rowsncolumns.app/collaboration/supabase-realtime-collaboration.md?ask=<question>
```

--------------------------------

### API Query Example

Source: https://docs.rowsncolumns.app/configuration/features/mentions

Example of how to query the documentation dynamically using an HTTP GET request with the 'ask' query parameter.

```http
GET https://docs.rowsncolumns.app/configuration/features/mentions.md?ask=<question>
```

--------------------------------

### Query Documentation Dynamically

Source: https://docs.rowsncolumns.app/demos

Perform an HTTP GET request on the current page URL with the `ask` query parameter to query the documentation dynamically.

```HTTP
GET https://docs.rowsncolumns.app/demos.md?ask=<question>
```

--------------------------------

### Dynamic Documentation Query

Source: https://docs.rowsncolumns.app/configuration/keyboard-shortcuts

This example shows how to query the documentation dynamically for additional information not explicitly present on the current page.

```HTTP
GET https://docs.rowsncolumns.app/configuration/keyboard-shortcuts.md?ask=<question>
```

--------------------------------

### Rendering multiple spreadsheets

Source: https://docs.rowsncolumns.app/getting-started/installation

Example of rendering multiple independent Spreadsheet components on the same page using SpreadsheetProvider.

```tsx
import "@rowsncolumns/spreadsheet/dist/spreadsheet.min.css";
import { SpreadsheetProvider, CanvasGrid } from "@rowsncolumns/spreadsheet"

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

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

--------------------------------

### Querying Documentation Dynamically

Source: https://docs.rowsncolumns.app/configuration/components/sheet-switcher

Example of how to perform an HTTP GET request to query the documentation dynamically.

```http
GET https://docs.rowsncolumns.app/configuration/components/sheet-switcher.md?ask=<question>
```

--------------------------------

### Agent Instructions: Querying This Documentation

Source: https://docs.rowsncolumns.app/configuration/features/export-canvas-as-image

Instructions on how to query the documentation dynamically using an HTTP GET request with the 'ask' query parameter.

```http
GET https://docs.rowsncolumns.app/configuration/features/export-canvas-as-image.md?ask=<question>

```

--------------------------------

### Querying Documentation Dynamically

Source: https://docs.rowsncolumns.app/configuration/features/version-comparison

Perform an HTTP GET request on the current page URL with the `ask` query parameter to query the documentation dynamically.

```HTTP
GET https://docs.rowsncolumns.app/configuration/features/version-comparison.md?ask=<question>
```

--------------------------------

### Dynamic Documentation Query

Source: https://docs.rowsncolumns.app/configuration

Perform an HTTP GET request on the current page URL with the `ask` query parameter to query the documentation dynamically.

```http
GET https://docs.rowsncolumns.app/configuration.md?ask=<question>
```

--------------------------------

### Web Worker Calculation Setup

Source: https://docs.rowsncolumns.app/getting-started/formula-evaluation

Example of configuring `useSpreadsheetState` for asynchronous formula evaluation using a Web Worker.

```typescript
const createCalculationWorker = () => {
  if (typeof Worker === "undefined") {
    throw new Error(
      "The calculation worker requires a browser environment. " +
        "Provide a custom createCalculationWorker when rendering on the server."
    );
  }
  return new Worker(new URL("./calculation-worker.ts", import.meta.url), {
    type: "module",
  });
};
const MySpreadsheet = () => {
  const state = useSpreadsheetState({
    calculationMode: 'worker',
    createCalculationWorker,
    initialSheets: [/* ... */]
  });

  return <CanvasGrid {...state} />;
};

```

--------------------------------

### Querying Documentation

Source: https://docs.rowsncolumns.app/excel-and-google-sheets

Example of how to query the documentation dynamically using an HTTP GET request with the 'ask' query parameter.

```HTTP
GET https://docs.rowsncolumns.app/excel-and-google-sheets.md?ask=<question>
```

--------------------------------

### Installation

Source: https://docs.rowsncolumns.app/data-persistence/react-query-integration

Instructions for installing React Query using yarn or npm.

```bash
yarn add @tanstack/react-query
```

```bash
npm i @tanstack/react-query
```

--------------------------------

### Querying Documentation Dynamically

Source: https://docs.rowsncolumns.app/configuration/components

Instructions on how to perform an HTTP GET request to query the documentation dynamically using the 'ask' query parameter.

```HTTP
GET https://docs.rowsncolumns.app/configuration/components.md?ask=<question>
```

--------------------------------

### Querying Documentation API

Source: https://docs.rowsncolumns.app/configuration/features/embedded-content

Example of how to perform an HTTP GET request to query the documentation dynamically with an 'ask' query parameter.

```http
GET https://docs.rowsncolumns.app/configuration/features/embedded-content.md?ask=<question>
```

--------------------------------

### Querying documentation dynamically

Source: https://docs.rowsncolumns.app/charts/e-charts

Example of how to query the documentation dynamically using an HTTP GET request with the 'ask' query parameter.

```http
GET https://docs.rowsncolumns.app/charts/e-charts.md?ask=<question>
```

--------------------------------

### Query Documentation Dynamically

Source: https://docs.rowsncolumns.app/support

Perform an HTTP GET request on the current page URL with the `ask` query parameter to query the documentation dynamically.

```HTTP
GET https://docs.rowsncolumns.app/support.md?ask=<question>
```

--------------------------------

### Client Component Setup

Source: https://docs.rowsncolumns.app/configuration/using-spreadsheet-with-nextjs

Example of setting up a React component as a client component in Next.js to use the Spreadsheet and CanvasGrid.

```tsx
"use client";
import "@rowsncolumns/spreadsheet/dist/spreadsheet.min.css";
import { SpreadsheetProvider, CanvasGrid } from "@rowsncolumns/spreadsheet";

export const Sheet = () => {
  return (
    <SpreadsheetProvider>
      <CanvasGrid />
    </SpreadsheetProvider>
  );
};

```

--------------------------------

### Redis Persistence Setup

Source: https://docs.rowsncolumns.app/collaboration/loro-collaboration

Installs the ioredis package and provides functions to load and save Loro documents to Redis.

```bash
npm install ioredis
```

```typescript
import Redis from "ioredis";

const redis = new Redis();

// Load document from Redis
async function loadDocument(docId: string): Promise<Uint8Array | null> {
  const data = await redis.getBuffer(`loro:${docId}`);
  return data ? new Uint8Array(data) : null;
}

// Save document to Redis
async function saveDocument(docId: string, snapshot: Uint8Array): Promise<void> {
  await redis.set(`loro:${docId}`, Buffer.from(snapshot));
}

// In the update handler:
case "update": {
  // ... apply update ...
  const snapshot = serverDoc.export({ mode: "snapshot" });
  documents.set(message.docId, snapshot);
  await saveDocument(message.docId, snapshot);
  // ... broadcast ...
}
```

--------------------------------

### Dynamic Documentation Query

Source: https://docs.rowsncolumns.app/configuration/features/text-to-columns

Example of how to query the documentation dynamically using an HTTP GET request with an 'ask' query parameter.

```http
GET https://docs.rowsncolumns.app/configuration/features/text-to-columns.md?ask=<question>
```

--------------------------------

### Login to Github

Source: https://docs.rowsncolumns.app/getting-started/installation

Login to GitHub using npm to access private packages.

```bash
npm login --scope=@rowsncolumns --registry=https://npm.pkg.github.com
```

--------------------------------

### Querying Documentation Dynamically

Source: https://docs.rowsncolumns.app/configuration/features/tokenizer

Example of how to perform an HTTP GET request to query the documentation dynamically with the 'ask' query parameter.

```http
GET https://docs.rowsncolumns.app/configuration/features/tokenizer.md?ask=<question>
```

--------------------------------

### Basic Usage Examples

Source: https://docs.rowsncolumns.app/configuration/features/sparklines

Demonstrates the basic syntax for creating line, column, and winloss sparklines.

```excelFormula
A1:A10 = numeric values
B1     = =SPARKLINE(A1:A10)        // line sparkline (default)
B2     = =SPARKLINE(A1:A10, {"charttype","column"})
B3     = =SPARKLINE(A1:A10, {"charttype","winloss"})
```

--------------------------------

### Query Documentation Dynamically

Source: https://docs.rowsncolumns.app/specifications

Instructions on how to perform an HTTP GET request to query the documentation dynamically using the `ask` query parameter.

```HTTP
GET https://docs.rowsncolumns.app/specifications.md?ask=<question>
```
Tokens:
Raw