JSFiddle - React, Tailwind, and code Playground

by nilakshibhosale

HTML

<html>

<body>
<table id="example" class="table table-hover table-bordered display" style="width:100%">
        <thead>
            <tr>
                <th value="Teams">Teams</th>
                <th value="Environment">Environment</th>
                <th value="Host">Host</th>
                <th value="Owner">Owner</th>
            </tr>
            </thead>
            <tbody>
              <tr>
                <td>dev</td>
                <td>dev</td>
                <td>abc</td>
                <td>jack</td>
              </tr>
              <tr>
                <td>dev</td>
                <td>dev</td>
                <td>abc</td>
                <td>jack</td>
              </tr>
              <tr>
                <td>dev</td>
                <td>dev</td>
                <td>abc</td>
                <td>jack</td>
              </tr>
              <tr>
                <td>dev</td>
                <td>dev</td>
                <td>abc</td>
                <td>jack</td>
              </tr>
            </tbody>
            </table>
</body>

<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>

</html>

CSS

.dataTables_wrapper .dataTables_filter {
float: left;
padding-right: 10px;
}

.dataTables_wrapper .dt-buttons {
float: right;
}

.dataTables_wrapper .dataTables_info {
    clear: none;
    float: none;
    padding-top: unset;
}

.dataTables_wrapper .dataTables_length {
    padding-top: 8px;
}

.sorting {
    text-align: center;
}

JavaScript

$(document).ready(function() {
$('#example').DataTable( {
        "dom": 'Bfirtlp',
        buttons: [

                {
                extend: 'excelHtml5',
                exportOptions: {
                    columns: ':visible'
                }
                },
            {
                extend: 'pdfHtml5',
                orientation: 'landscape',
                pageSize: 'A3',
                exportOptions: {
                    columns: [ 0, 1, 2,3,4,5,6,7,8],
                },
            customize: function (doc) {
            var tblBody = doc.content[1].table.body;
                for(var i=0;i<tblBody[0].length;i++){
                  tblBody[0][i].fillColor = '#FFFFFF';
                  tblBody[0][i].color = 'black';
                }
            var now = new Date();
		    var jsDate = now.toGMTString();
		    doc['footer']=(function(page, pages) {
							return [
							{canvas: [ { type: 'line', x1: 10, y1: 15, x2: 1190-10, y2: 15, lineWidth: 1,color:'black' } ]},
							{
							columns: [

									 {
										alignment: 'left',
										fontSize:'7',
										text: ['Version: 1.0'],
									},
									{
										alignment: 'center',
										fontSize:'7',
										text: ['page ', { text: page.toString() }]
									},
									{
										alignment: 'right',
										fontSize:'7',
					 					text: ['Generated on: ', { text: jsDate}]
									},

								],
								margin:10

							},
							]
						});

						var objLayout = {};
						objLayout['hLineWidth'] = function(i) { return .5; };
						objLayout['vLineWidth'] = function(i) { return .5; };
						objLayout['hLineColor'] = function(i) { return '#aaa'; };
						objLayout['vLineColor'] = function(i) { return '#aaa'; };
						objLayout['paddingLeft'] = function(i) { return 4; };
						objLayout['paddingRight'] = function(i) { return 4; };
						doc.content[1].layout = objLayout;
                        doc.content[1].margin = [ 5, 0, 15, 5 ];
            }
            }
  ...