Comment on page
Cell renderer

Customise Cells to your liking
Content cells and header cells can be changed to custom React components. Spreadsheet uses ReactKonva internally to render canvas declaratively.
All Konva components can be used in the Spreadsheet. Read more about React konva here - https://github.com/konvajs/react-konva​
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}`}
  />
}
Cell editors
Theming
Last modified 7mo ago