I'm new to typescript and have started to working with DetailsList
in Fluent UI.
https://developer.microsoft.com/en-us/fluentui#/controls/web/detailslist.
I am looking into the prop onRenderRow
which is of type IRenderFunction
.
https://github.com/microsoft/fluentui/blob/master/packages/utilities/src/IRenderFunction.ts
Here, I understand that props
is of the generic type P
and defaultRender
is a function with props
as argument and returns JSX.Element or null
type. But what does parentheses around both of these mean? Is it a function type? How should an implementation of this interface look like?
(props?: P, defaultRender?: (props?: P) => JSX.Element | null)
This as a whole is also returning JSX.Element or null
type.
This is a function with two parameters props
and defaultRender
.
But what does parentheses around both of these mean? Is it a function type?
Yes! Return value of that function is JSX.Element or null
.
First parameter props
is generic type P
and the second one defaultRender
is a function with one parameter props
generic type P
which returns JSX.Element | null
.
Here you are an example how to change a background color of row:
<DetailsList
...
onRenderRow={(props, defaultRender) => {
// props and defaultRender could be undefined
if (props && defaultRender) {
return defaultRender({
...props,
styles: {
...props.styles,
root: {
backgroundColor: '#f00',
}
}
})
}
return null;
}}
/>
Codepen working example.