How to Control boolean field in react-bootstrap-table-next

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??

herlambang · Accepted Answer · 2021-06-03 01:29:23Z

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

answered Jun 3, 2021 at 1:29

herlambang

3181 gold badge2 silver badges7 bronze badges

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

Collectives™ on Stack Overflow

How to Control boolean field in react-bootstrap-table-next

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