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

Question

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

@MohammedMalek, I have. I don't receive any error for unknown modules. — norimicy
– norimicy, Commented Mar 15, 2023 at 16:44

Mohammed Malek · Accepted Answer · 2023-03-15 16:44:55Z

0

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

answered Mar 15, 2023 at 16:44

Mohammed Malek

1651 gold badge1 silver badge13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related