How to put event for column using react-bootstrap-table

I am working with table in my react application, I am using React bootstrap table2 for this, I am successfully rendering the table.

• I am facing issue in rendering the table data conditionally
• I have one column named as Availability so it is true and false, what I am trying to do is when it is true show tick mark (right) if false show cross one, I am able to insert new column but I am not able to update the existing one.

What I was doing to insert new column

let c = {
  dataField: "Class",
  text: "Class",
  editable: false,
  formatter: () => {
    return 12;
  },
};
d.push(c);
setColumnData(d);

Above d is columnData

But I am stuck here to update the existing one

My data

{
  column_data: [
    {
      dataField: "first_name",
      text: "Name",
      sort: true,
    },
    {
      dataField: "last_name",
      text: "Last Name",
      sort: false,
    },
    {
      dataField: "availability",
      text: "Available",
      sort: true,
    },
  ],
  tableData: [
    {
      first_name: "simon",
      last_name: "chaz",
      availability: true,
    },
    {
      first_name: "steve",
      last_name: "smith",
      availability: false,
    },
    {
      first_name: "michel",
      last_name: "gread",
      availability: true,
    },
    {
      first_name: "rimon",
      last_name: "class",
      availability: false,
    },
  ],
}

This is how I am rendering table:

<BootstrapTable
  bootstrap4
  keyField="certificate_Name"
  data={data.tableData}
  columns={data.column_data}
  wrapperClasses="table-responsive"
  classes="table-hover table-bordered"
  headerClasses="header-class"
/>;

• If Availability is true then I want to show <i className="ri-checkbox-circle-line"></i>.
• if Availability is false then <i class="ri-close-line"></i>

I am trying to show my cell data on specific condition

Here is my code sandbox

Edit

I have updated my code sandbox withe the above solution,

If it is true I am showing whatever I want to else What else I want to.

{
    dataField: "available",
    text: "Available",
    sort: true,
    formatter: columnFormatter  // this I am putting 
  }

And here is my function

 const columnFormatter = (cell, row, rowIndex, formatExtraData) => {
  if (row && row.availability) {
    return <a href="#">check this out</a>;
  } else {
    return row.availability;
  }
};

now in if condition I am trying to put an event onClick but I am not able to achieve that.

I was going through this link but this is for on each row click, I want to click on specific column to specific cell.

updated code sandbox

from How to put event for column using react-bootstrap-table