Hi Stefan,

You are correct that it does have a 'style' property, however it typed as a HTML DOM style property and not as a React CSSProperties - which is what is should be. In this case I think the names are the same so might not matter. Possibly a bigger problem is that I could not correctly subscribe to events as per below.

This is what happens if I restore the original bindings. I've just highlighted the detected type of my copy of row.props.

(Note that row.props is typed as a HTMLTableRowElement when it is expected to be a props object.)

onDoubleClick is correct (and works perfectly) - but I am offered instead the DOM event handler names:

If I debug one step higher to where GridRow calls the function:

defaultRendering.props is not a DOM element, it is a React Props.

Having a play to see why you are not getting the error, I tried this:

It seems that when you use JSX to create the tr, the type it gives you is:

Which is basically React.ReactElement<any> which will silently convert to React.ReactElement<HTMLTableRowElement>:

Anyhoo - in my case the workaround is to cheat the type system with an 'as any', but I thought it would be good to update at the source. I hope my comments make sense and there isn't something I'm missing.

Warm Regards,

Stuart

Hi Stefan,

I believe for basic use cases the incorrect type bindings would not cause a problem.

As I wanted to modify the associated styles for the row, I was not able to as row.styles did not exist in the 'current' bindings.

I have pasted my code below if it is any interest to you guys.

Cheers,

----

    private renderRow(row: ReactElement<React.HTMLProps<HTMLTableRowElement>>, props: GridRowProps): React.ReactNode {
        const trProps: React.HTMLProps<HTMLTableRowElement> = {
            ...row.props
        };

        if (this.props.onRowDoubleClick) {
            trProps.onDoubleClick = (evt: React.MouseEvent<HTMLTableRowElement>) => {
                evt.preventDefault();

                if (this.props.idField && this.props.onRowDoubleClick) {
                    let id = props.dataItem[this.props.idField];

                    this.props.onRowDoubleClick(id);
                }
            };
        }

        if (this.props.onRowClick) {
            if (!trProps.style) {
                trProps.style = {};
            }

            trProps.style.cursor = 'pointer';
        }

        return React.cloneElement(row, trProps, row.props.children);
    }