I'm trying to add a warning icon next to the data within a react-data-table-component field. There would be other another value driving this function that is not the selector listed in the field.
The format of the column is as follows:
{
name: 'Problems',
selector: 'problems.length',
maxWidth: '80px',
sortable: true,
},
and there would be an associated warning level value that would indicate whether or not this flag would need to show.
I have tried using both React-Icons and FontAwesomeIcon from FortAwesome. I haven't been able to successfully get an icon to appear next to the value with either libraries, or at all within the field. This is the first major React application I have worked on so any help would be appreciated.
The following compiles but replaces every row with 0 nor does it display any sort of icon.
{
name: 'Problems',
selector: 'problems.length',
maxWidth: '80px',
sortable: true,
cell: ((row) => {
if (row.problemStatusWarningLevel > 0) {
return <div>{row.problems.length}<FontAwesomeIcon icon="fa-triangle-exclamation" /></div>;
} else {
return <div>{row.problems.length}</div>;
}
})
},
You can use this example :
//Make sure you imported this
import "@fortawesome/fontawesome-svg-core/styles.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faShare } from "@fortawesome/free-solid-svg-icons";
//usuage
<FontAwesomeIcon icon={faShare}style={{ fontSize: "1.4rem", color: "white" }}/>