JSFiddle - React, Tailwind, and code Playground

HTML

<div class="panel-body">
  <table id="data-table" class="table table-striped table-bordered nowrap" width="100%">
    <thead>
      <tr>
        <th>IO</th>
        <th>Signals</th>
        <th>
          <input name="select_all" value="1" type="checkbox">
        </th>
      </tr>
    </thead>
    <tbody>
      <tr class="odd gradeX">
        <td>1</td>
        <td>Ambient Temperature</td>
      </tr>
      <tr class="odd gradeX">
        <td>2</td>
        <td>Analog Input 1</td>
      </tr>
      <tr class="odd gradeX">
        <td>3</td>
        <td>Analog Input 2</td>
      </tr>
      <tr class="odd gradeX">
        <td>4</td>
        <td>Backup Battery</td>
      </tr>
      <tr class="odd gradeX">
        <td>5</td>
        <td>Main Power</td>
      </tr>
      <tr class="odd gradeX">
        <td>6</td>
        <td>Signal Strength</td>
      </tr>
    </tbody>
  </table>
</div>

JavaScript

$("tbody>tr").append("<input type='checkbox' />");