JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://cdn.datatables.net/v/dt/jq-3.3.1/jszip-2.5.0/dt-1.10.20/af-2.3.4/b-1.6.1/b-colvis-1.6.1/b-flash-1.6.1/b-html5-1.6.1/b-print-1.6.1/cr-1.5.2/fc-3.3.0/fh-3.1.6/kt-2.5.1/r-2.2.3/rg-1.1.1/rr-1.2.6/sc-2.0.1/sp-1.0.1/sl-1.3.1/datatables.min.css">
<script src="https://cdn.datatables.net/v/dt/jq-3.3.1/jszip-2.5.0/dt-1.10.20/af-2.3.4/b-1.6.1/b-colvis-1.6.1/b-flash-1.6.1/b-html5-1.6.1/b-print-1.6.1/cr-1.5.2/fc-3.3.0/fh-3.1.6/kt-2.5.1/r-2.2.3/rg-1.1.1/rr-1.2.6/sc-2.0.1/sp-1.0.1/sl-1.3.1/datatables.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<style>
.closed-class::before {
content: "closed";
}
.open-class::before {
content: "open";
}
</style>
<script>
$(document).ready(function () {
var table = $('#example').DataTable({
dom: 'Bfrtip',
buttons: ['colvis']
});
$('#example tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row(tr);
if (row.child.isShown()) {
row.child.hide();
var iconNode = row.node().childNodes[1];
$(iconNode).removeClass('open-class');
$(iconNode).addClass('closed-class');
}
else {
row.child(format(row)).show();
var iconNode = row.node().childNodes[1];
$(iconNode).removeClass('closed-class');
$(iconNode).addClass('open-class');
}
});
});
function format(row) {
var div = $('<div />')
.html('Example text.');
return div;
}
</script>
</head>
<body>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<td class="details-control"></td>
...