How can I display an Icon in react-tabulator?

Question

I'm new to tabulator and I'm trying to add a font-awesome icon in react tabulator to a column along with some text written next to it (like running or stopped). Here's my code

    <ReactTabulator
                        ref={ref => (this.ref = ref)}
                        columns= {[
                            {formatter:"rowSelection", titleFormatter:"rowSelection", align:"center", headerSort:false,
                                cellClick:function(e, cell){
                                cell.getRow().toggleSelect();
                                }, width: 30},
                    { title: "Name", field: "name",},
                    { title: "Space", field: "space" },
                    { title: "Service Name", field: "service",  },
                    { title: "Status", field: "status", width: 130, formatter:function(){
                       return <FontAwesome icon={faCircle} color="green/> }},
                    { title: "Last Refreshed", field: "refresh",},
                    ]}

But its not displayed. I get output like this.

Answer 1

you'll need to import and use reactFormatter instead of "formatter" example:

https://github.com/ngduc/react-tabulator/blob/master/src/ReactTabulatorExample.tsx#L23