I am working with a table that has two rows: the header row and then the body row. In the body row, each column contains another table. Like this:

<table id="example">
    <thead>
        <tr>
            <td>Col A</td>
            <td>Col B</td>
            <td>Col C</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td valign="top">
                <table>
                    <tr>
                        <td>Data</td>
                        <td>Data2</td>
                    </tr>
                </table>
            </td>
            <td valign="top">
                <table>
                    <tr>
                        <td>Data3</td>
                        <td>Data4</td>
                    </tr>
                </table>
            </td>
            <td valign="top">
                <table>
                    <tr>
                        <td>Data5</td>
                        <td>Data6</td>
                    </tr>
                </table>
            </td>
        </tr>
    </tbody>
</table>

I have my datatable setup like this:

<script type="text/javascript">

    const columns = [
      { title: '' },
    ]

    let table = $('#example').DataTable({
      createdRow: function(row) {
        $(row).find('td table')
          .DataTable({
            columns: columns,
            dom: 'tf'
          })
      }
    })
</script>

The problem is that when I search for something, I want ALL the tables (including the nested ones) to filter out the results. So in my code above, as an example, if I search for "Data2", I would expect the second and third columns to become empty and just one result appear in the first column. However, at present, since "Data2" is found in this row (of which there is only one in this table), it simply returns ALL the data.

I found a REALLY good example that is close to what I want (which I what my current code is based on):

http://jsfiddle.net/davidkonrad/8pzkr6yn/

If we use the example from the JSFiddle, you can see searching for "722" returns only the last row, but still all the results from each nested table from within that row are there. I'd like it so that searching 722 globally will return the results as if 722 was searched individually in each column.

How can I adjust the code to make it so that all the nested tables get filtered out, not just the main table?

Bonus points if we can eliminate the search box in every nested datatable!