JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<table class="datatable display compact cell-border" id="servicetable">
    <thead>
        <th>Servicenr.</th>
        <th>Dato</th>
        <th>Mobil</th>
        <th>Pumpe</th>
        <th></th>
        <th></th>
        <th>Utført</th>
        <th>Fakturert</th>
    </thead>
    <tbody>
      
        <tr data-child-name="row9" data-child-value='a'>
            <td>999-15-03-14</td>
            <td>2015-03-02</td>
            <td>47501010</td>
            <td>RSG09LECA-ROG09LEC</td>
            <td> <i class=" vis_info fi-alert size-16" style="color: red;" title="Det mangler info. Klikk for å fylle ut!"></i> 
            </td>
            <td class="senter"><i class="fi-print size-16" style="color:#836F6F" title="Skriv ut serviceskjema"></i>
            </td>
            <td>
                <input type="text" name="service_dato" class="service_dato dato" value="" rel="14" />
                <input type="hidden" name="alt_dato" class="alt_dato" /> <i class="fi-check size-14" style="display:none"></i>
            </td>
            <td>
                <input type="text" name="fakt_mont" class="fakt_mont dato" value="" rel="14" />
                <input type="hidden" name="alt_dato" class="alt_dato" /> <i class="fi-check size-14" style="display:none"></i>
            </td>
        </tr>
    </tbody>
</table>

CSS

@import url('https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css');
@import url('//cdn.datatables.net/1.10.2/css/jquery.dataTables.css');
body {font-family: "Helvetia Neue",sans-serif;font-size:14px}
table {font-size:0.8rem}

JavaScript

function format(value) {
	    return '<div>' + value + '</div>';
	}
	var table = $('#servicetable').DataTable({
	    language: {
	        url: '//cdn.datatables.net/plug-ins/725b2a2115b/i18n/Norwegian.json',
	        // searchPlaceholder: "Søk i service..."
	    },
	    stateSave: true,
	    pageLength: 10,
	    aoColumnDefs: [{
	        'bSortable': false,
	        'aTargets': [4, 5,6]
	    }]
	});
	// $('.dataTables_filter input').attr("placeholder", "skriv inn søketekst...");
	// Add event listener for opening and closing details
	$('#servicetable tbody').on('click', 'i.vis_info', 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 {
	        // Open this row
	        row.child(format(row.data())).show();
	        tr.addClass('shown');
	    }
	});