2

I've been struggling to find how I could display an icon in a Cell in a ReactTable (from the library react-table). All I could find is that it accepts HTML symbols. There's a lot of symbols, but what I'm looking for is to show flags...

Cell: () => (
  <span>&hearts;</span>
)

I already tried to use <i class='fa fa-cloud' /> for a test but I couldn't make it work.

Any ideas ?

Orlyyn
  • 2,296
  • 2
  • 20
  • 32

2 Answers2

1

I found a library https://www.npmjs.com/package/react-flag-kit that gives FlagIcons to be used this way :

Cell: () => (
    <FlagIcon code="FR" size={20} />
)

React Icons <Icon /> can also be used in the Cell, but it does not contain any flags.

Orlyyn
  • 2,296
  • 2
  • 20
  • 32
1

After some digging i found out that its about the columns.

SO in my case, these are my columns, I want to pass in a fontawesome ! icon, that changes color depending on the value to the first column ("red" would make a red exclamation, "yellow" would make a yellow exclamation, etc).
you grab the value through the props passed in, to change the css class and you render the icon by just returning the font awesome icon.

    columns: [
      {
        accessor: "color",
        Header: "",
        Cell: (props) => (
          <FontAwesomeIcon
            icon={faExclamationCircle}
            className={"icon__" + props.value}
          />
        ),
      },
      {
        accessor: "employeeId",
        Header: "Employee ID",
      },
      {
        accessor: "cvfs",
        Header: "CVFS Net Change",
      },
      {
        accessor: "totalAlerts",
        Header: "Total Alerts",
      },
    ],
    data: [
      {
        employeeId: "11192",
        cvfs: -42,
        totalAlerts: 12,
        color: "red",
      },
      {
        employeeId: "12372",
        cvfs: -38,
        totalAlerts: 9,
        color: "red",
      },
      {
        employeeId: "17829",
        cvfs: -31,
        totalAlerts: 8,
        color: "orange",
      },
      {
        employeeId: "97283",
        cvfs: -22,
        totalAlerts: 6,
        color: "orange",
      },
      {
        employeeId: "76363",
        cvfs: -10,
        totalAlerts: 2,
        color: "yellow",
      },
    ]
missTrekster
  • 11
  • 1