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
      • Floating Cell 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
  • Content cells
  • Header cell

Was this helpful?

  1. Configuration
  2. Features

Cell renderer

Customise Cells to your liking

PreviousCell editorsNextStructured Cell Renderer

Last updated 10 months ago

Was this helpful?

Content cells and header cells can be changed to custom React components. Spreadsheet uses ReactKonva internally to render canvas declaratively.

All components can be used in the Spreadsheet. Read more about React konva here -

Cells are only renderer if they have content, for performance reasons. Only if getCellData returns some cell value or cell style, will it be rendered

Content cells

import React from "react";
import {
  SpreadsheetProvider,
  CanvasGrid,
  CellProps,
} from "@rowsncolumns/spreadsheet";
import { Rect, Text } from "react-konva";

export default {
  title: "Spreadsheet",
  component: SheetGrid,
};

const CustomCell = ({ x, y, width, height }: CellProps) => {
  return (
    <>
      <Rect x={x} y={y} width={width} height={height} fill="green" />
      <Text
        x={x}
        y={y}
        width={width}
        height={height}
        text="green"
        verticalAlign="middle"
        align="center"
        fill="white"
      />
    </>
  );
};

const MySpreadsheet = () => {
  return (
    <CanvasGrid
      sheetId={1}
      rowCount={100}
      columnCount={100}
      Cell={CustomCell}
      getCellData={(sheetId, rowIndex, columnIndex) => {
        if (rowIndex === 1 && columnIndex === 2) {
          return {
            formattedValue: "Hello world",
          };
        }
      }}
    />
  );
};

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

Header cell

Use HeaderCell prop to customise header cells.

You can also instead localise header cell values using getRowHeaderText and getColumnHeaderText

const HeaderCell = (props: HeaderCellprops) => {
  return <Text {...props} />
} 

const MySpreadsheet = () => {
  <CanvasGrid
    sheetId={1}
    rowCount={100}
    columnCount={100}
    HeaderCell={HeaderCell}
    getCellData={(sheetId, rowIndex, columnIndex) => {
      if (rowIndex === 1 && columnIndex === 2) {
        return {
          formattedValue: "Hello world",
        };
      }
    }}
    getRowHeaderText={(rowIndex: number) => `Header: ${rowIndex}`}
    getColumnHeaderText={(columnIndex: number) => `Header: ${columnIndex}`}
  />
}
⚙️
Konva
https://github.com/konvajs/react-konva