reactgrid icon indicating copy to clipboard operation
reactgrid copied to clipboard

Can use function component to custom cell?

Open ww1724 opened this issue 1 year ago • 0 comments

Describe the bug I try create custom cell like insert row cell, but doc only has class component sample.

I trid below:

  1. define insertrowtemlate, then use useImperativeHandle export the interfaces
  2. create cell-map file, then add to reactgrid
  3. getRows function use the type cell
  4. 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)
            }
        }) || []
    }
}

ww1724 avatar Oct 20 '24 08:10 ww1724