title: How to put event for column using react-bootstrap-table
body: <p>I am working with table in my react application, I am using <a href="https://react-bootstrap-table.github.io/react-bootstrap-table2/" rel="nofollow noreferrer">React bootstrap table2</a> for this, I am successfully rendering the table.</p>
  <p><strong>Please do check the edited part</strong></p>
  <ul>
  <li>I am facing issue in rendering the table data conditionally</li>
  <li>I have one column named as <code>Availability</code> 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.</li>
  </ul>
  <p><strong>What I was doing to insert new column</strong></p>
  <pre><code>let c = {
    dataField: &quot;Class&quot;,
    text: &quot;Class&quot;,
    editable: false,
    formatter: () =&gt; {
      return 12;
    },
  };
  d.push(c);
  setColumnData(d);
  </code></pre>
  <p>Above <code>d</code> is columnData</p>
  <p>But I am stuck here to update the existing one</p>
  <p><strong>My  data</strong></p>
  <pre><code>{
    column_data: [
      {
        dataField: &quot;first_name&quot;,
        text: &quot;Name&quot;,
        sort: true,
      },
      {
        dataField: &quot;last_name&quot;,
        text: &quot;Last Name&quot;,
        sort: false,
      },
      {
        dataField: &quot;availability&quot;,
        text: &quot;Available&quot;,
        sort: true,
      },
    ],
    tableData: [
      {
        first_name: &quot;simon&quot;,
        last_name: &quot;chaz&quot;,
        availability: true,
      },
      {
        first_name: &quot;steve&quot;,
        last_name: &quot;smith&quot;,
        availability: false,
      },
      {
        first_name: &quot;michel&quot;,
        last_name: &quot;gread&quot;,
        availability: true,
      },
      {
        first_name: &quot;rimon&quot;,
        last_name: &quot;class&quot;,
        availability: false,
      },
    ],
  }
  </code></pre>
  <p>This is how I am rendering table:</p>
  <pre><code>&lt;BootstrapTable
    bootstrap4
    keyField=&quot;certificate_Name&quot;
    data={data.tableData}
    columns={data.column_data}
    wrapperClasses=&quot;table-responsive&quot;
    classes=&quot;table-hover table-bordered&quot;
    headerClasses=&quot;header-class&quot;
  /&gt;;
  </code></pre>
  <ul>
  <li>If <code>Availability</code> is true then I want to show <code>&lt;i className=&quot;ri-checkbox-circle-line&quot;&gt;&lt;/i&gt;</code>.</li>
  <li>if <code>Availability</code> is false then <code>&lt;i class=&quot;ri-close-line&quot;&gt;&lt;/i&gt;</code></li>
  </ul>
  <p><strong>I am trying to show my cell data on specific condition</strong></p>
  <p><a href="https://codesandbox.io/s/nervous-shadow-vke5u?file=/src/App.js" rel="nofollow noreferrer">Here is my code sandbox</a></p>
  <p><strong>Edit</strong></p>
  <p>I have updated my code sandbox withe the above solution,</p>
  <p>If it is true I am showing whatever I want to else What else I want to.</p>
  <pre><code>{
      dataField: &quot;available&quot;,
      text: &quot;Available&quot;,
      sort: true,
      formatter: columnFormatter  // this I am putting 
    }
  </code></pre>
  <p>And here is my function</p>
  <pre><code> const columnFormatter = (cell, row, rowIndex, formatExtraData) =&gt; {
    if (row &amp;&amp; row.availability) {
      return &lt;a href=&quot;#&quot;&gt;check this out&lt;/a&gt;;
    } else {
      return row.availability;
    }
  };
  </code></pre>
  <p>now in if condition I am trying to put an <code>event</code> <code>onClick</code> but I am not able to achieve that.</p>
  <p><a href="https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/basic-row.html" rel="nofollow noreferrer">I was going through this link</a> but this is for on each row click, I want to click on specific column to specific cell.</p>
  <p><a href="https://codesandbox.io/s/nervous-shadow-vke5u?file=/src/App.js" rel="nofollow noreferrer">updated code sandbox</a></p>