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 ifgetCellData
returns some cell value or cell style, will it be rendered
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>
);
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