color a row in Details list in reach fluent UI

Question

How can i dynamically color a row if the value is greater than 100 and less than 1000.

here is my code

  <div> <DetailsList  items={this.state.IstateItems} 
  columns={[
    {key:"FirstName",name:"First Name",fieldName:"FirstName",minWidth:150},
    {key:"lastname",name:"Last Name",fieldName:"lastname",minWidth:150},
    {key:"Bdate",name:"Birth Date",fieldName:"Bdate",minWidth:100},
    {key:"Sal",name:"Salary",fieldName:"Sal",minWidth:100},
    {key:"Manager",name:"Boss",fieldName:"Manager",minWidth:200},
  ]} onRenderRow={(props,defaultrender)=>(
    <div className={styles.red}>
      {defaultrender({...props,className:'red'})}

    </div>

i wanted to color the row red if the salary is greater than 100 let's say

score -1 · Answer 1 · answered Jun 06 '23 at 08:29

You can refer to the following code

const MyDetailsList = () => {
  const items = [
    { id: 1, name: 'Item 1', color: 'red' },
    { id: 2, name: 'Item 2', color: 'blue' },
    { id: 3, name: 'Item 3', color: 'green' },
  ];

  const columns: IColumn[] = [
    { key: 'id', name: 'ID', fieldName: 'id', minWidth: 50 },
    { key: 'name', name: 'Name', fieldName: 'name', minWidth: 100 },
  ];

  const onRenderRow = (props, defaultRender) => {
    const rowClass = mergeStyles({
      backgroundColor: props.item.color, // Use the color property of the item to set the background color
    });

    return <div className={rowClass}>{defaultRender(props)}</div>;
  };

  return (
    <DetailsList
      items={items}
      columns={columns}
      selectionMode={SelectionMode.none}
      onRenderRow={onRenderRow}
    />
  );
};

color a row in Details list in reach fluent UI

1 Answers1