JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/v/dt/dt-1.10.12/datatables.min.css">
<script src="https://cdn.datatables.net/v/dt/dt-1.10.12/datatables.min.js"></script>
    <div style="color:green; margin-bottom: 10px;">
      <div style="display: inline-block; margin-right: 10px;">Sort <i>Info</i> column by:</div>
      <label class="radio-inline">
        <input style="margin-top: 0;" type="radio" name="infoFilterOptions" value=".info-price" checked> Price
      </label>
      <label class="radio-inline">
        <input style="margin-top: 0;" type="radio" name="infoFilterOptions" value=".info-customer-name"> Customer name
      </label>
    </div>
    <table id="the_table" class="stripe">
      <thead>
        <tr>
          <th>Id</th>
          <th>Info</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>
            <div>Customer name: <span class="info-customer-name" data-value="John">John</span></div>
            <div>Price: <span class="info-price" data-value="42.42">$42.42</span></div>
          </td>
        </tr>
        <tr>
          <td>3</td>
          <td>
            <div>Customer name: <span class="info-customer-name" data-value="Melvyn">Melvyn</span></div>
            <div>Price: <span class="info-price" data-value="9.0">$9.00</span></div>
          </td>
        </tr>
        <tr>
          <td>18</td>
          <td>
            <div>Customer name: <span class="info-customer-name" data-value="Aaaaardvark">Aaaaardvark</span></div>
            <div>Price: <span class="info-price" data-value="22.3">$22.30</span></div>
          </td>
        </tr>
      </tbody>
    </table>
    <button id="showStype">Show sType</button>

JavaScript

$(function() {
    var opts = {
        "columns": [{
            'searchable': false
        }, {
            'render': function(data, type, row, meta) {
                if (type === 'sort' || type === 'type') {
                    var sel = $("input[name=infoFilterOptions]:checked").val();
                    var val = $(sel, $(data)).data('value');
                    if (sel === '.info-price')
                        return val - 0;
                    return val;
                }
                return data;
            }
        }]
    };
    $("#the_table").DataTable(opts);

    $('input[type=radio][name=infoFilterOptions]').on('change', function() {
        $("#the_table").DataTable().rows().invalidate();
    });
    
    $("#showStype").on('click', function() {
        $("#the_table").DataTable().rows().invalidate();
    });
});