javascriptreactjsiconsreact-data-table-component

Add icon to react-data-table-component column on condition


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>;
                }
            })
        },

Solution

  • 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" }}/>