5

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

1 Answer 1

8
<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.

  1. First is passing a regular className and have it override the default styles. If you need to override the hover states or anything else you would have to inspect in dev tools and target the appropriate classes.
  2. Second is what is actually recommended and used internally to apply the default styles. With this method when you want to override the hover states or anything else, you would need to provide styles to each style area (in the example 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

1
  • 1
    @kirill_igum One thing to mention is if you go with the first method where you target some global classNames, make sure to target the ones that start with ms-ComponentName-... and not the ones that have some hashes at the end (ex: root-224). Dec 5, 2018 at 19:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.