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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.rowsncolumns.app/configuration/features/cell-renderer.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.