I'm looking at customitemrows but there isn't much documentation.
I have a table and if a row was created by a current user, I want to change the color from black to grey. I can do that with style
. I understand how to conditionally change color in customitemcolumns but can't extrapolate it to rows.
I got to:
_onRenderRow = (props) => {
return props.item['creatorUid'].match("QDN6k4pLXkea2qRM9mS7vM6whBE3")?
<DetailsRow {...props} style={{color:"#FF0000"}}/>
:
<DetailsRow {...props}/>
}
but the color doesn't change
<DetailsList
items={ items }
columns={ columns }
onRenderRow={ (props, defaultRender) => (
<div className='red'>
{defaultRender({...props, className: 'red'})}
</div>
) }
/>
<DetailsList
items={ items }
columns={ columns }
onRenderRow={ (props, defaultRender) => (
<div className='red'>
{defaultRender({...props, styles: {root: {background: 'red'}}})}
</div>
) }
/>
https://codepen.io/vitalius1/pen/pQmpVO
Here you can see 2 methods achieve what you ask for.
root
is one of them). For a list of style areas available to each row follow this link. For an example on usage of the selectors for hover states follow this link.Note: With the second method you can also pass a style function to make use of the IDetailsRowStyleProps
as seen here. This way you can have a very dynamic style depending on the state of the component
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With