JSFiddle - React, Tailwind, and code Playground

by Anbu_04

HTML

<div class="box">
  <div class="box-header">
    <span style='float: right;' id="buttons"> </span>
  </div>
  <div class="box-body">
    <div class="table-responsive">
      <div class="table_wrapper">
        <table id="orderList" class="table table-bordered table-striped ">
          <thead>
            <tr>
              <th class="text-center">Department</th>
              <th class="text-center">Employee Name</th>
              <th class="text-center">value1</th>
              <th class="text-center">value2</th>
              <th class="text-center">value3</th>
              <th class="text-center">value4</th>
              <th class="text-center">Grand Total</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="text-center" style="font-size:75%;">ACE</td>
              <td class="text-center" style="font-size:75%;">Jack</td>
              <td class="text-center">99.98</td>
              <td class="text-center">34.08</td>
              <td class="text-center">109.00</td>
              v<td class="text-center">188.33</td>
              <td class="text-center" style="font-size:70%;">387.23</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

CSS

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic);
 
!*/html,body{min-height:100%}.layout-boxed html,.layout-boxed body{height:100%}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:'Source Sans Pro','Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:400;overflow-x:hidden;overflow-y:auto}.wrapper{min-height:100%;position:relative;}.wrapper:before,.wrapper:after{content:" ";display:table}.wrapper:after{clear:both}.layout-boxed .wrapper{max-width:1250px;margin:0 auto;min-height:100%;box-shadow:0 0 8px rgba(0,0,0,0.5);position:relative}.layout-boxed{background:url('../img/boxed-bg.jpg') repeat fixed}.content-wrapper,.right-side,.main-footer{-webkit-transition:-webkit-transform .3s ease-in-out,margin .3s ease-in-out;-moz-transition:-moz-transform .3s ease-in-out,margin .3s ease-in-out;-o-transition:-o-transform .3s ease-in-out,margin .3s ease-in-out;transition:transform .3s ease-in-out,margin .3s ease-in-out;margin-left:230px;z-index:820}.layout-top-nav .content-wrapper,.layout-top-nav .right-side,.layout-top-nav .main-footer{margin-left:0}@media (max-width:767px){.content-wrapper,.right-side,.main-footer{margin-left:0}}@media (min-width:768px){.sidebar-collapse .content-wrapper,.sidebar-collapse .right-side,.sidebar-collapse .main-footer{margin-left:0}}@media (max-width:767px){.sidebar-open .content-wrapper,.sidebar-open .right-side,.sidebar-open .main-footer{-webkit-transform:translate(230px, 0);-ms-transform:translate(230px, 0);-o-transform:translate(230px, 0);transform:translate(230px, 0)}}.content-wrapper,.right-side{min-height:100%;background-color:#ecf0f5;z-index:800}.main-footer{background:#fff;padding:15px;color:#444;border-top:1px solid #d2d6de}.fixed .main-header,.fixed .main-sidebar,.fixed .left-side{position:fixed}.fixed .main-header{top:0;right:0;left:0}.fixed .content-wrapper,.fixed .right-side{padding-top:50px}@media (max-width:767px){.fixed...

JavaScript

$(function () {


 var table = $("#orderList").DataTable({
        "order": [[ 0, "asc" ]],
       
    });
 var buttons = new $.fn.dataTable.Buttons(table, {
   buttons: [
      {
        extend:'excelHtml5',
        title:reportname,
        footer: true,
        exportOptions: {
       			columns: [ 0, 1, 2,3,4,5 ]
         },
         customize: function ( xlsx ) {
            var sheet = xlsx.xl.worksheets['sheet1.xml'];
            $('row c[r^='K']', sheet).each(function() {
              if ($('is t', this).text()) {
                  console.log(this);
                  //change the type to `str` which is a formula
                  $(this).attr('t', 'str');
                  //append the formula
                  $(this).append('<f>' + $('is t', this).text() + '</f>');
                  //remove the inlineStr
                  $('is', this).remove();
                  console.log(this);
              }
    })
        
        },
        customizeData: function(data){
            //Add a row.
            var desc = [
                ['Parcheggi Espositori',' ',' ',' ',' ',' ',' ',' ',' ','SUBTOTALE','SUBTOTAL(3,F3:F137)']
            ];
            data.body.unshift(data.header);
            for (var i = 0; i < desc.length; i++) {
                data.body.unshift(desc[i]);
            };
        },
      },
      {
        extend: 'csvHtml5',
        title: reportname,
        footer: true,
        exportOptions: {
           columns: count
         }
      },
      

  ]
}).container().appendTo($('#buttons'));
 
});