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
  • Loading Canvas in Node
  • CSS Specificity when importing stylesheet
  • (Optional) Using tailwindcss preset to configure spreadsheet styles

Was this helpful?

  1. Configuration

Using Spreadsheet with NextJS

SSR is supported, but Server components, not yet

PreviousSheetCellNextKeyboard shortcuts

Last updated 11 months ago

Was this helpful?

Add use client at the top of your file, so this component will be part of client bundle

More info here -

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

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

Loading Canvas in Node

NextJS throws error while compiling canvas during SSR. If you see these errors,

Error: Module not found: Can't resolve 'canvas'
Did you mean './canvas'?
ModuleParseError: Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

the solution would be to install canvas and add it as an external module in nextJS

yarn add canvas --dev
/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack (config) {
    config.externals.push('canvas')
    return config
  }
}

module.exports = nextConfig

CSS Specificity when importing stylesheet

NextJS does not respect the order of CSS imports. So there could be style conflicts if you are using tailwindcss in a nextJS project.

The proposed solution is

  1. Install postcss-import and add it to your postcss.config.js

module.exports = {
  plugins: {
    "postcss-import": {},
    tailwindcss: {},
    autoprefixer: {},
  },
};
  1. Import spreadsheet style using the import statement

@import "tailwindcss/base";
@import "@rowsncolumns/spreadsheet/dist/spreadsheet.min.css";

@tailwind components;
@tailwind utilities;

(Optional) Using tailwindcss preset to configure spreadsheet styles

If you are still having problems with conflicting css in nextjs, this is another way to solve it.

Install the rowsncolumns tailwind preset

yarn add @rowsncolumns/tailwindcss-preset --dev

// or 
npm install @rowsncolumns/tailwindcss-preset

Update tailwindcss content and add the preset

// tailwind.config.js
content: [
   ...// your files
   "./node_modules/@rowsncolumns/*/dist/**/*.js"
],
presets: [
  require('@rowsncolumns/tailwindcss-preset')
]

Import spreadsheet css variables

Import this css file in global.css

// global.css
@tailwind base;
@tailwind components;
@tailwind utilities;

@import "./spreadsheet.css"

Credit to for the fix

Add a css file spreadsheet.css and add contents from

⚙️
https://beta.nextjs.org/docs/rendering/server-and-client-components#convention
https://github.com/radix-ui/themes/issues/109#issuecomment-1747345743
https://github.com/rowsncolumns/spreadsheet/blob/main/apps/spreadsheet/spreadsheet.css