JSFiddle - React, Tailwind, and code Playground

by margarette

HTML

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<table id="table_id">
    <thead>
        <tr>
            <th>ID</th>
            <th>Domaine</th>
            <th>Auteur</th>
            <th>Type de média</th>
            <th>Description</th>
            <th>Date de publication</th>
            <th>Date d'ajoût</th>
            <th class="hidden">Tags</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="center"><span>1</span></td>
            <td><span>🍲 Alimentation</span></td>
            <td><span>Louis Durand,Jean Delatour</span></td>
            <td><span>📀 Vidéo</span></td>
            <td><a href="https://www.youtube.com/watch?v=lXXp-PVQ0HQ" target="_blank" rel="noopener noreferrer nofollow">L’agroalimentaire vu de l’intérieur – intoxication ?</a></td>
            <td class="center">07/11/2019</td>
            <td class="center">12/02/2021</td>
            <td class="hidden"><span></span></td>
        </tr>
        <tr>
            <td class="center"><span>2</span></td>
            <td><span>💶 Economie</span></td>
            <td><span>Jean Martin, Louis Durand</span></td>
            <td><span>📹 Chaîne vidéo</span></td>
            <td><a href="https://www.youtube.com/c/HeurekaFinanceEco/featured" target="_blank" rel="noopener noreferrer nofollow">Si vous ne comprenez rien à la finance et à l'économie</a></td>
            <td class="center">18/10/2015</td>
            <td class="center">12/02/2021</td>
            <td class="hidden"><span>💶 Finance</span></td>
        </tr>
    </tbody>
</table>

JavaScript

$(document).ready(function() {
    $('#table_id').DataTable( {
        initComplete: function () {
            this.api().columns().every( function () {
                var column = this;
                var select = $('<select><option value=""></option></select>')
                    .appendTo( $(column.header()).empty() )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );
 
                        column
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                    } );
 
                column.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                } );
            } );
        }
    } );
} );