JSFiddle - React, Tailwind, and code Playground

by Colin Marks

HTML

<head>    
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/r/dt/jszip-2.5.0,dt-1.10.9,b-1.0.3,b-flash-1.0.3,b-html5-1.0.3/datatables.min.css" />
    <link rel="stylesheet" type="text/css" href="~/Content/dataTables.bootstrap.css" /> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
   
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> 
    <script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> 
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js"></script> 
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js"></script> 
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.print.min.js"></script> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script> 
</head>

<table border="0" cellspacing="5" cellpadding="5">
    <tbody>
        <tr>
            <td style="margin: 10px; padding: 5px;">Start Date:</td>
            <td><input name="min" id="min" type="text"></td>
        </tr>
        <tr>
            <td style="margin: 10px; padding: 5px;">End Date:</td>
            <td><input name="max" id="max" type="text"></td>
        </tr>
    </tbody>
</table>

<table width="100%" class="display" id="reportTable" cellspacing="0">
        <thead>
            <tr>
                <th>Name</th>
               ...

JavaScript

$(document).ready(
    function() {
        $('#reportTable').DataTable({
            
            dom: 'Blfrtip',
            buttons: [{
                    extend: 'pdf',
                    className: 'green glyphicon glyphicon-file',
                    title: 'Report',
                    filename: 'Report',
                    exportOptions: {
                        columns: [0, 1, 2, 3, 4, 5, 6]
                    }
                },
                {
                    extend: 'excel',
                    className: 'green glyphicon glyphicon-list-alt',
                    title: 'Report',
                    filename: 'Report',
                    exportOptions: {
                        columns: [0, 1, 2, 3, 4, 5, 6]
                    }
                },
                {
                    extend: 'copy',
                    className: 'green glyphicon glyphicon-duplicate',
                    exportOptions: {
                        columns: [0, 1, 2, 3, 4, 5, 6]
                    }
                },
                {
                    extend: 'print',
                    className: 'green glyphicon glyphicon-print',
                    title: 'Report',
                    text: 'Print',
                    exportOptions: {
                        modifier: {
                            page: 'current'
                        }
                    }
                }
            ],
            "footerCallback": function(row, data, start, end, display) {
                var api = this.api(),
                    data;

                // Remove the formatting to get integer data for summation
                var intVal = function(i) {
                    return typeof i === 'string' ?
                        i.replace(/[\$,]/g, '') * 1 :
                        typeof i === 'number' ?
                        i : 0;
                };
                
                // ************NOT WORKING************ \\	
                // Total by...