I want to highlight a specific row in Material UI DatagridPro for a few seconds (not permanently). For this I tried using animation but I am not sure how to make it work
To apply the change to a specific row, I am using getRowClassName property of DataGridPro
So, it looks something like:
<code>getRowClassName={(params) => {
return params.row.id === xxx ? 'my-animation 10s' : 'my-animation 10s'
}}
</code>
<code>getRowClassName={(params) => {
return params.row.id === xxx ? 'my-animation 10s' : 'my-animation 10s'
}}
</code>
getRowClassName={(params) => {
return params.row.id === xxx ? 'my-animation 10s' : 'my-animation 10s'
}}
In my DataGridPro, I have defined animation in sx as:
<code>sx={{
'@keyframes my-animation': {
from: { background: '#EAEAEA' },
'99%': { background: '#EAEAEA' },
to: { background: '' }
}
}}
</code>
<code>sx={{
'@keyframes my-animation': {
from: { background: '#EAEAEA' },
'99%': { background: '#EAEAEA' },
to: { background: '' }
}
}}
</code>
sx={{
'@keyframes my-animation': {
from: { background: '#EAEAEA' },
'99%': { background: '#EAEAEA' },
to: { background: '' }
}
}}
I am just not sure how to apply this animation only for that specific row with a xxx id
I think my getRowClassName is incorrect, but am also not sure about the right way to do this. Any help would be appreciated