Custom formatting
There are 3 ways to add custom formatting to your Grid
Formatter
SpreadSheet Grid exposes formatter
prop, which can be used to modify the value that is rendered
import { format as defaultFormatter } from '@rowsncolumns/spreadsheet'
const Sheets = [
{
name: 'Sheet 1',
cells: {
1: {
1: {
type: 'email',
text: 'support@rowsncolumns.app'
}
}
}
}
]
const formatter = (value, datatype, cellConfig) => {
if (cellConfig.type === 'email') {
return 'This is an email'
}
return defaultFormatter(value, datatype, cellConfig)
}
<SpreadSheet formatter={formatter} />
Demo
Type hello
and hello world
will be rendered
fx
Sheet1
Custom Cell Renderer
You can render your own Cell to fully custom formatting and style
import { DefaultCell } from '@rowsncolumns/spreadsheet'
import { Rect, Text } from 'react-konva'
const CellRenderer = (props) => {
if (props.text === 'hello') {
const { x, y, height, width } = props
return (
<>
<Text
x={x}
y={y}
width={width}
height={height}
text='Hello world'
/>
</>
)
}
return <DefaultCell {...props} />
}
return (
<SpreadSheet
CellRenderer={CellRenderer}
/>
)
Demo
Type hello
and hello world
will be rendered
fx
Sheet1
Extending DefaultCell
Coming soon