Specify a className for a row based on the contents of the row

[Susan123456789]

I need the ability to add a className to a row based on the contents of the row (for example, to change the color of the row based on the value in a specific column). Similar to the cellProps but for adding a className to the row instead of the column. Is this possible?

Thanks!

[imballinst]

Hi @Susan123456789, thanks for using this library!

That is not possible at the moment, but I think I can work on this... some times today or tomorrow. I will get back to this issue after I finish it and let you know. Cheers!

[imballinst]

Hi @Susan123456789, please take a look at react-bs-datatable@3.3.0. We can now add custom props to table rows, something like this:

<TableBody
  rowProps={(row) => {
    return {
      style: {
        background: `rgba(128, 0, 0, ${row.score / 200})`
      }
    };
  }}
/>

Example sandbox: https://codesandbox.io/s/react-bs-datatable-3-3-conditional-row-props-832ze3?file=/src/App.js. Example in Storybook: https://imballinst.github.io/react-bs-datatable/?path=/story/uncontrolled--custom-table-row-props.

Let me know if there are anything more that I can help with!

[Susan123456789]

Works perfectly!! Thank you so much for the prompt response!!

[pullelakalyani]

Hey @imballinst does it work for column too?

[imballinst]

Yes @pullelakalyani, absolutely. But it's not rowProps prop to TableBody, rather, it's cellProps inside each of the column definition. Example: https://codesandbox.io/s/react-bs-datatable-3-3-conditional-row-props-832ze3?file=/src/App.js. Oh, and it's only limited to style and className for now (in case for the columns).

Let me know if you need further enhancement in this!

{
  prop: "score",
  title: "Score",
  cellProps: {
    style: (row) => {
      if (row.score > 50) {
        return {
          border: "4px solid black"
        };
      }

      return undefined;
    }
  }
}

[pullelakalyani]

@imballinst Kudos! I need the same thaway it has i.e the styles one for the column and it works like a charm 😍

[imballinst]

Sure, I'm glad to help! 😄 @pullelakalyani

[pullelakalyani]

Hey @imballinst can we add spinner for the rowProps based on some conditions?

[imballinst]

@pullelakalyani I don't think we can add the moment... what is the use-case?

[pullelakalyani]

Ohh okay, So its an ML usecase where the data take sometime to complete its tasks and update the records in the DB so when the ML process executes its tasks we can have the spinner spinning on a particular row based on the ML status

[imballinst]

Ah, I see. Yes, that makes sense. It requires quite a bit of API change, I think. Something like this:

<TableBody>
  {data.map(row => {
    if (row.status === 'loading') {
      return <tr><td colSpan={headers.length}><Spinner /></td></tr>
    }

    return <TableRow row={row} />
  })}
</TableBody>

Not sure if it makes sense... but it's an option. What do you think?