CODEWITHSUNDEEP
react-admin
Tanchi Fu
Tanchi Fu

Reputation: 23

How to conditionally change datagrid rows background color?

Depends on the the source (record's) field value (E.g. status column is 'active') I want to make the row background certain color in Datagrid. How do I do that? Thank you for any sample code to do that!

Upvotes: 2

Views: 4665

Answers (1)

François Zaninotto
François Zaninotto

Reputation: 7335

You can customize the datagrid row style (applied to the <tr> element) based on the record, thanks to the rowStyle prop, which expects a function.

For instance, this allows to apply a custom background to the entire row if one value of the record - like its number of views - passes a certain threshold.

const postRowStyle = (record, index) => ({
    backgroundColor: record.nb_views >= 500 ? '#efe' : 'white',
});
export const PostList = (props) => (
    <List {...props}>
        <Datagrid rowStyle={postRowStyle}>
            ...
        </Datagrid>
    </List>
);

This is documented in The React-admin Datagrid Documentation.

Upvotes: 6

Related Questions