I want to highlight the whole row of the react mantine table on given condition for example if a value is mismatch in a cell I want to highlight the whole row.
my code looks like
this is I tried
const getRowStyle = (row) => {
// return hasMismatch(row)
// ? { backgroundColor: 'rgba(255, 0, 0, 0.1)' }
// : {};
return { backgroundColor: 'red' }
};
<MantineTable
columns={columns}
initialData={skus}
enableRowSelection={false}
loading={loading}
showSelectedToggle={false}
hideSelectColumn={true}
showResetAll={false}
pageSize={10}
enableColumnFilter={false}
enableFilters={false}
columnFilterDisplayMode={false}
getRowProps={(row) => ({
style: getRowStyle(row),
})}
/>
I tried to do it in the < Cell > but no help.
If anyone can help me with some doc or code that will be huge help
What you could do is create a function to apply your mismatch condition or whatever logic you would like to make sure you are passing the correct codition and try using getRowProps for styling. Here is a small example of what you could do:
const hasMismatch = (row) => {
return row.someCellValue !== expectedValue; //Replace with your condition
};
const getRowStyle = (row) => {
return hasMismatch(row)
? { backgroundColor: 'rgba(255, 0, 0, 0.1)' } //Highlight the row if mismatch
: {};
};
const MyTable = ({ columns, skus, loading }) => (
<MantineTable
columns={columns}
initialData={skus}
enableRowSelection={false}
loading={loading}
getRowProps={(row) => ({
style: getRowStyle(row), //Apply row mismatch style by the condition
})}
/>
);
1