Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Can use function component to custom cell? #447

Open
ww1724 opened this issue Oct 20, 2024 · 2 comments
Open

Can use function component to custom cell? #447

ww1724 opened this issue Oct 20, 2024 · 2 comments

Comments

@ww1724
Copy link

ww1724 commented Oct 20, 2024

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)
            }
        }) || []
    }
}
@webloopbox
Copy link
Contributor

@ww1724 In version 4, cells should be created as class components. In version 5, which we've recently released, you can create cell templates as functions: Docs

@ww1724
Copy link
Author

ww1724 commented Oct 29, 2024

got it

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants
@ww1724 @webloopbox and others