Links
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}`}
/>
}
Last modified 7mo ago