JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Example</title>
    <meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	
	<!-- favicon
    <link rel="shortcut icon" type="image/x-icon" href="Include/img/favicon.ico"> -->

	<!-- Bootstrap  -->	
	<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"/>

	<!-- Datatable  -->	
	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css"/>
	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/autofill/2.3.5/css/autoFill.dataTables.css"/>
	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css"/>
	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedcolumns/3.3.2/css/fixedColumns.dataTables.min.css"/>
	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.1.7/css/fixedHeader.dataTables.min.css"/>
	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/keytable/2.5.3/css/keyTable.dataTables.min.css"/>
	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.7/css/responsive.dataTables.min.css"/>
	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/rowgroup/1.1.2/css/rowGroup.dataTables.min.css"/>
	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/rowreorder/1.2.7/css/rowReorder.dataTables.min.css"/>
	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/scroller/2.0.3/css/scroller.dataTables.min.css"/>
	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/searchbuilder/1.0.1/css/searchBuilder.dataTables.min.css"/>
	<link rel="stylesheet" type="text/css"...

CSS

table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child:before {
   background-color: black !important;
}
table.dataTable.dtr-inline.collapsed > tbody > tr.row-highlight > td:first-child:before {
   background-color: Black !important;
}

JavaScript

$(document).ready(function (){
    var dtOptions = {
   /*responsive: {
        details: {
            type: 'column',
            target: 'tr'
        }
    }, */
		responsive: true,
		scrollX: true
    };
    
    var table = $('#example').DataTable(dtOptions);
    
    $('#ctrl-select').on('change', function(){
        dtOptions.responsive = ($(this).val() === "1") ? true : false;
        
        $('#example').DataTable().destroy();
        $('#example').removeClass('dtr-inline collapsed');
        
        table = $('#example').DataTable(dtOptions);
        table.rows(':not(.parent)').nodes().to$().find('td:first-child').trigger('click');
    });
	
	// Handle click on "Expand All" button
    $('#btn-show-all-children').on('click', function(){
        // Expand row details
        table.rows(':not(.parent)').nodes().to$().find('td:first-child').trigger('click');
    });

    // Handle click on "Collapse All" button
    $('#btn-hide-all-children').on('click', function(){
        // Collapse row details
        table.rows('.parent').nodes().to$().find('td:first-child').trigger('click');
    });
});