> For the complete documentation index, see [llms.txt](https://docs.rowsncolumns.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.rowsncolumns.app/configuration/features/cell-renderer.md).

# Cell renderer

Content cells and header cells can be changed to custom React components. Spreadsheet uses `ReactKonva` internally to render canvas declaratively.

All [Konva](https://konvajs.org/) 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

```tsx
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 {
            fv: "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`

```tsx
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 {
          fv: "Hello world",
        };
      }
    }}
    getRowHeaderText={(rowIndex: number) => `Header: ${rowIndex}`}
    getColumnHeaderText={(columnIndex: number) => `Header: ${columnIndex}`}
  />
}
```