Display data as html icon and alter background color

[jacob-crider]

Hello! I would like to alter way cells are being displayed in a certain column and I have not found a great method for accomplishing this.

This is how I am currently displaying the data:
{
Header: "Stat",
accessor: (sidebarResults) => sidebarResults.stat,
}

And this is how I would like to alter it:

<ReactTable
getCellProps={(cellInfo) => ({
style: {
backgroundColor:
cellInfo.value == "Carrier Claim"
?
: cellInfo.value == "Vendor"
?
: null,
},
})}
/>

DisplayDataAsHTML.txt

Any help is greatly appreciated!

[jacob-crider]

This can be closed! I solved the issue by creating a function to handle background color and displaying the icon rather than the data and passed it in my columns as the accessor -- this solution only worked for me because I did not need to filter the data by my "Stat" column.

Function to handle changes:

function CarrierStat(sidebarResults) {
if (
sidebarResults.stat == "Carrier Claim" ||
sidebarResults.stat == "On Hold" ||
sidebarResults.stat == "Do Not Load" ||
sidebarResults.stat == "Authority Inactive" ||
sidebarResults.stat == "Authority Date" ||
sidebarResults.stat == "Out Of Service"
) {
return (
<div
onClick={() => testFunc(sidebarResults.stat)}
style={{ width: "100%", backgroundColor: "var(--rejectColor)" }}
>


);
} else if (
sidebarResults.stat == "Vendor" ||
sidebarResults.stat == "OK To Load"
) {
return (
<div
onClick={() => testFunc(sidebarResults.stat)}
style={{ width: "100%", backgroundColor: "var(--confirmColor)" }}
>


);
} else {
<div
onClick={() => testFunc(sidebarResults.stat)}
style={{ width: "100%", backgroundColor: "var(--blackList)" }}
>

;
}
}

Small change to columns object:

{
Header: "Stat",
accessor: CarrierStat,
},