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}`}
  />
}