Estoy trabajando con una tabla que tiene dos filas: la fila del encabezado y luego la fila del cuerpo. En la fila del cuerpo, cada columna contiene otra tabla. Como esto:

 <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>

Tengo mi configuración de tabla de datos así:

 <script type="text/javascript"> const columns = [ { title: '' }, ] let table = $('#example').DataTable({ createdRow: function(row) { $(row).find('td table') .DataTable({ columns: columns, dom: 'tf' }) } }) </script>

El problema es que cuando busco algo, quiero que TODAS las tablas (incluidas las anidadas) filtren los resultados. Entonces, en mi código anterior, como ejemplo, si busco "Data2", esperaría que la segunda y la tercera columnas se vacíen y solo aparezca un resultado en la primera columna. Sin embargo, en la actualidad, dado que "Data2" se encuentra en esta fila (de los cuales solo hay uno en esta tabla), simplemente devuelve TODOS los datos.

Encontré un ejemplo REALMENTE bueno que está cerca de lo que quiero (en el que se basa mi código actual):

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

Si usamos el ejemplo de JSFiddle, puede ver que la búsqueda de "722" devuelve solo la última fila, pero aún así todos los resultados de cada tabla anidada dentro de esa fila están allí. Me gustaría que la búsqueda global de 722 arroje los resultados como si se buscara 722 individualmente en cada columna.

¿Cómo puedo ajustar el código para que se filtren todas las tablas anidadas, no solo la tabla principal?

¡Puntos de bonificación si podemos eliminar el cuadro de búsqueda en cada tabla de datos anidada!