reactgrid
reactgrid copied to clipboard
Can use function component to custom cell?
Describe the bug I try create custom cell like insert row cell, but doc only has class component sample.
I trid below:
- define insertrowtemlate, then use
useImperativeHandleexport the interfaces - create
cell-mapfile, then add to reactgrid - getRows function use the type cell
- got
o2.getCompatibleCell is not a function (rowId: 'footer', columnId: '0')
export const InsertRowCellTemplate = forwardRef((props, ref) => {
const getCompatibleCell = (cell) => {
const text = getCellProperty(uncertainCell, 'text', 'string');
return { ...uncertainCell, text, value: text };
}
const handleKeyDown = ( cell, keyCode: number, ctrl: boolean, shift: boolean, alt: boolean) => {
if (!ctrl && !alt && isAlphaNumericKey(keyCode))
return { cell, enableEditMode: true };
return {
cell,
enableEditMode: keyCode === keyCodes.POINTER || keyCode === keyCodes.ENTER
};
}
useImperativeHandle(ref, () => ({
getCompatibleCell,
handleKeyDown,
}))
return (
<>
InsertRowCell
</>
)
})
export const cellsMap = {
[Cell_InsertRowCellToken]: InsertRowCellTemplate
}
<ReactGrid
rows={rows}
columns={columns}
highlights={highlight}
stickyTopRows={1}
stickyLeftColumns={1}
onCellsChanged={onChangeHandler}
onColumnResized={columnResizehandler}
customCellTemplates={cellsMap}
enableFillHandle
enableFullWidthHeader
enableRangeSelection
enableGroupIdRender
enableColumnSelection
/>
export function getFooterRow(datas, fields) {
return {
rowId: "footer",
cells: fields?.map(field => {
return {
type: Cell_InsertRowCellToken,
text: JSON.stringify(field)
}
}) || []
}
}