Content cells and header cells can be changed to custom React components. Spreadsheet uses ReactKonva
internally to render canvas declaratively.
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
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>
);
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}`}
/>
}