如何控制 react-bootstrap-table-next 中的 boolean 字段

Question

Suppose in an API I have a boolean value eg. mission_status: true, or mission_status: false. And I use react-bootstrap-table2 to create table. Since it copies whatever data is there in the array of object into a table row.
I want to display "Success" in the Table if the mission_status is true and "Failure" if mission_status is false. Right now it only displays true and false.

const columns = [
    { dataField:"flight_number", text:"No." };
    { dataField:"mission_name", text:"Mission" },
    { dataField:"mission_status", text:"Mission Status" },
    { dataField:"rocket.rocket_name", text:"Rocket" }
]

And this is the jsx part:

<BootstrapTable 
            keyField="flight_number"
            data={launch}
            columns={columns}
            pagination={paginationFactory()}

        />

I want mission Status as "Success" if it is true in the table and vice-versa.
How to achieve it Please help??

Answer 1

You can use formatter to achieve that

// Add formatter properties to the cell
const columns = [
    ...,
    { 
        dataField:"mission_status", 
        text:"Mission Status", 
        formatter: statusFormatter 
    },
    ...
]

// Process the returned data in the formatter
function statusFormatter(cell, row, rowIndex, formatExtraData) {
    return cell ? 'Success' : 'Failure'
}

formatter will have 4 arguments available. cell is the data passed to the formatter, and row is the whole data object for that row.

You can read more about it on the docs: https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columnformatter-function