Change style of an element of a column by comparing it with a value of other column of the same row.

[dhairav-shah]

I have data having two columns A and B. Now i want to set the color of ith element of B to green if B[i] > A[i] , else set it to red.

Any idea how it can be achieved using MUI Datatables ?

[RyanEwen]

I believe you can do something similar to my example here:
#1038 (comment)

Except that instead of customBodyRender returning a <Select /> or <TextField />, you'll just want to return a <span /> or something with your custom styling applied to it, and the original value inside of it.

For example:

customBodyRender = (value, tableMeta, update) => {
    let color = tableMeta.rowData[1] > tableMeta.rowData[0] ? 'green' : 'red'

    return (
        <span style="color: {color}">{value}</span>
    )
}

But be warned that the way in which you'll refer to your A[i] an B[i] data is by numerical index (column #). So if you add or rearrange columns your application will break until you figures out what the proper indexes should be.

Shameless plug: If the suggestions from #1038 and #1040 become implemented then you could refer to your other data points by key instead of numerical index. And accessing related data points that weren't pushed into the table would also be trivial. Eg tableMeta.originalRowData.otherDataPoint

[dhairav-shah]

Okay got it. Thanks

[acroyear]

I have a similar situation - i have, within the table's raw data, modified the data, but it isn't "committed" - The application of the change to the file system is something I want a confirmation for on a single click (updating ID3 info in a collection of files, and/or moving the files based on that info and other data).

Re: #1038 this is a frustration in that it sometimes is there. It is the raw data if the table is sorted, but is the processed row otherwise. And i'm pretty sure that IS a bug. :D

my data is 'flat' - i just want to read from a different raw value. E.g., row['year'] unless row['year.modified'] exists, then instead render modified (with a BG color in the span to indicate it is changed).

To solve consistently, I basically have to put the render method into the component so it gets the raw table data in the closure, then I match rows by a key column (column 0 is the full file path, which will be unique) to find the modified property to render instead.

I can't just map a column to 'modfied' for each one - there's just too many columns that way and the table is unreadable. I mean, potentially I could, with the modified column hidden (And can't be added) and then the renderer for the main looks up the modified one (which means it has to iterate around column order to find it - already that's a risk with my key column 0 approach as it is - and then render that value instead with the styles if it is not undefined. But that's getting to be a lot more work. Granted, if the key column and the modified columns are all first, then theoretically their indexes shouldn't change as other columns are sorted, but i haven't gotten far enough to confirm that.