JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/plug-ins/1.10.12/features/searchHighlight/dataTables.searchHighlight.min.js"></script>
<script src="//bartaz.github.io/sandbox.js/jquery.highlight.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/plug-ins/1.10.12/features/searchHighlight/dataTables.searchHighlight.css">
<h2>DataTable child row search highlight example</h2>

<div class="panel panel-default">
  <div class="panel-heading">Search</div>
  <div class="panel-body">
    <table class="datatables-table table table-striped table-hover table-bordered">
      <thead>
        <tr><th></th>
          <th>Name</th>
          <th>Position</th>
          <th>Office</th>
          <th>Age</th>
          <th>Start date</th>
          <th>Salary</th>
          <th>Details</th>
        </tr>
      </thead>
      <tfoot>
        <tr><th></th>
          <th>Name</th>
          <th>Position</th>
          <th>Office</th>
          <th>Age</th>
          <th>Start date</th>
          <th>Salary</th>
          <th>Details</th>
        </tr>
      </tfoot>
      <tbody>
        <tr><td></td>
          <td>Tiger Nixon</td>
          <td>System Architect</td>
          <td>Edinburgh</td>
          <td>61</td>
          <td>2011/04/25</td>
          <td>$320,800</td>
          <td>Line 1 details</td>
        </tr>
        <tr><td></td>
          <td>Garrett Winters</td>
          <td>Accountant</td>
          <td>Tokyo</td>
          <td>63</td>
          <td>2011/07/25</td>
          <td>$170,750</td>
          <td>Line 2 details</td>
        </tr>
        <tr><td></td>
          <td>Ashton Cox</td>
          <td>Junior Technical Author</td>
          <td>San Francisco</td>
          <td>66</td>
          <td>2009/01/12</td>
     ...

CSS

body {
  margin: 15px;
}

div.search span {
  display: block;
}

div.panel {
  margin-bottom: 15px;
}

div.panel .panel-body p:last-child {
  margin-bottom: 0;
}

/**
 * Styles for datatables.mark.js
 */
mark {
  padding: 0;
  background: #f1c40f;
}


td.details-control {
    cursor: pointer;
}

td.details-control:Before {
    content: "+";
}

tr.shown td.details-control:Before {
    content: "-";
}

JavaScript

$(function() {

  // Initialize DataTables
 var table = $('.datatables-table').DataTable({
    // Enable mark.js search term highlighting
    "searchHighlight": true,
     "columns": [
		    {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            },
			{ "data": 0},
			{ "data": 1},
			{ "data": 2},
			{ "data": 3},
			{ "data": 4},
			{ "data": 5},
			{ "data": 6, "visible": false}
		  ]
  });

$('.datatables-table').on('click', 'td.details-control', function () {

        var tr = $(this).closest('tr');
        var row = table.row( tr );

        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
        
            row.child( row.data()[6] ).show();
            tr.addClass('shown');
            
            /*  Highlight matching text  */
			      row.child().highlight( $.trim( table.search().split(/\s+/) ));

        }
    } );


});