React-data-table -Adding a CSS class to row dynamically

Question

I am using an datatable of react-data-table-component, my table is generated from the API response data. I want to dynamically add a class to each of the rows generated based on the condition. How can I acheive this ?

https://www.npmjs.com/package/react-data-table-component

I am using the above datatable.

let  columns= [
            {
                name: "ID",
                selector: "ID",
                sortable: true,
                cell: row => <div>{row.ID}</div>
            }];

<Datatable
columns={columns}
data={this.state.mydata} />

I want to add a custom CSS class to the entire row of this data table based on a condition.

Anton Bks · Accepted Answer · 2019-08-20 12:01:42Z

3

I think you might be looking for the getTrProps callback in the table props:

getTrProps={ rowInfo => rowInfo.row.status ? 'green' : 'red' }

It's a callback to dynamically add classes or change style of a row element

Should work like this if I remember correctly:

getTrProps = (state, rowInfo, instance) => {
  if (rowInfo) {
    return {
      className: (rowInfo.row.status == 'D') ? "status-refused" : "", // no effect
      style: {
        background: rowInfo.row.age > 20 ? 'red' : 'green'
      }
    }
  }
  return {};
}

render() {

  <Datatable
  columns={columns}
  data={this.state.mydata} 
  getTrProps={this.getTrProps}
  />

}

edited Aug 20, 2019 at 12:01

answered Aug 20, 2019 at 11:47

Anton Bks

4923 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

user11951305 Over a year ago

can you give an example ?

Anton Bks Over a year ago

Im checking the docs now; the name of this props seems to have changed, give me a sec to update my answer

Anton Bks Over a year ago

Also added the className property that allows you to conditionally assign a class

user11951305 Over a year ago

Sorry but this didnt work for me. Do you have any alternative for the same? I want to add a custom class to the row with the class name as rdt_TableRow of the row.

Anton Bks Over a year ago

What is your condition for adding the class? Can you post the updated code with what you have tried from the above please?

|

Yixuan HUANG · Accepted Answer · 2020-07-10 10:06:12Z

3

example:

...
const conditionalRowStyles = [
  {
    when: row => row.calories < 300,
    style: {
      backgroundColor: 'green',
      color: 'white',
      '&:hover': {
        cursor: 'pointer',
      },
    },
  },
];
 
const MyTable = () => (
  <DataTable
    title="Desserts"
    columns={columns}
    data={data}
    conditionalRowStyles={conditionalRowStyles}
  />
);

more info check here :) https://www.npmjs.com/package/react-data-table-component#conditional-row-styling

answered Jul 10, 2020 at 10:06

Yixuan HUANG

311 bronze badge

Collectives™ on Stack Overflow

React-data-table -Adding a CSS class to row dynamically

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related