JSFiddle - React, Tailwind, and code Playground

by Édouard Hue

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.4/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
<table id="table" class="display">
    <thead>
    <tr>
        <th>#</th>
        <th>Nom binominal</th>
        <th>Nom vernaculaire</th>
        <th>Quantité</th>
        <th>Type</th>
        <th>Caractéristiques</th>
        <th>État du spécimen</th>
        <th>État du conditionnement</th>
        <th>Code barre</th>
        <th>Fichiers dans la catégorie</th>
        <th>Items</th>
    </tr>
    </thead>
    <tbody id="tablebody">
    </tbody>
</table>

CSS

tr.missing > td {
    background: Tomato;
}

tr.almostEmpty > td {
    background: SpringGreen;
}

JavaScript

var $tb = $("#tablebody");
var $table = $("#table").DataTable({
    paging: false,
    columnDefs: [{
        target: 9,
        type: "numeric"
    }]
});

var catLink = function(title) {
    return $("<a>").text(title).attr("href", "https://commons.wikimedia.org/wiki/Category:" + title).wrap("<div/>").parent().html();
}

var itemLink = function(id) {
    return $("<a>").text("Q" + id + " ").attr("href", "https://www.wikidata.org/wiki/Q" + id).wrap("<div/>").parent().html();
}

$.getJSON("https://gist.githubusercontent.com/edouardhue/ad5ae7bceb1fd912cfde/raw/38c1eab238f7e55378296d0d624e87758363003b/mammif", function(data) {
    $.each(data.rows, function(i, row) {
        var $newRow = $table.row.add([i, catLink(row["Nom binominal"]), row["Nom vernaculaire"], row["quantité"], row["type"], row["caractéristiques"], row["état du spécimen"], row["état du conditionnement"], row["code barre"], "", ""]);
        $newRow.draw();
        if (row["Nom binominal"] != "") {
            $.ajax({
                dataType: "jsonp",
                url: "https://commons.wikimedia.org/w/api.php",
                data: {
                    action: "query",
                    titles: "Category:" + row["Nom binominal"],
                    format: "json",
                    prop: "info",
                    inprop: "url",
                    indexpageids: "",
                    redirects: ""
                },
                cache: true,
                success: function(info) {
                    if (info.query.pageids[0] == "-1") {
                        $newRow.data()[9] = -1;
                        $newRow.nodes().to$().addClass("missing");
                        $newRow.invalidate();
                    } else {
                        $.ajax({
                            dataType: "jsonp",
                            url: "https://commons.wikimedia.org/w/api.php",
                            cache: true,
                            data: {
                           ...