JSFiddle - React, Tailwind, and code Playground

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: 'Blfript', // Blfrtip
            buttons:
            [
                {
                    extend: 'pdf',
                    footer: true,
                    className: 'green glyphicon glyphicon-file',
                    title: 'Report',
                    filename: 'Report',
                    orientation: 'landscape',
                    pageSize: 'LEGAL',
                    exportOptions:
                    {
                        columns: [0, 1, 2, 3, 4, 5]
                    }
                },
                {
                    extend: 'excel',
                    footer: true, 
                    className: 'green glyphicon glyphicon-list-alt',
                    title: 'Report',
                    filename: 'Report',
                    pageSize: 'LEGAL',
                    exportOptions:
                    {
                        columns: [0, 1, 2, 3, 4, 5]
                    }
                },
                {
                    extend: 'copy',
                    title: 'Report',
                    footer: true,
                    className: 'green glyphicon glyphicon-duplicate',
                    exportOptions:
                    {
                        columns: [0, 1, 2, 3, 4, 5]
                    }
                },
                    {
                        extend: 'print',
                        footer: true,
                        className: 'green glyphicon glyphicon-print',
                        text: 'Print',
                        title: ' ',
                        autoPrint: true,
                        orientation: 'landscape',
                        pageSize: 'LEGAL',
                        exportOptions:
                        {
                            columns: [0, 1, 2, 3, 4, 5]
                        },
                        // Format exported footer (NOT WORKING)
             ...