JSFiddle - React, Tailwind, and code Playground

by Anbu_04

HTML

<div class="box">
 
  <div class="box-body">
    <div class="table-responsive">
      <div class="table_wrapper">
        <table id="example" 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 () {

$('#example').DataTable({
		dom: 'Bfrtip',
		buttons: [{
			extend: 'excelHtml5',
			customize: function(xlsx) {
				var sheet = xlsx.xl.worksheets['sheet1.xml'];
				// Loop over the cells in column `M` 
				$('row c[r^="M"]', sheet).each(function() {
					// Get the value and strip the non numeric characters 
					//var cellFormula = "=SUM(C2:L2)";       
					//theNewSheet.range("M2:M10").formula(cellFormula);
					var cellFormula = "=SUM(C2:L2)";
					sheet.range("M2:M10").formula(cellFormula);
					$(this).range("M2:M10").formula(cellFormula);
					$('is t', this).range("M2:M10").formula = cellFormula;
					if($('is t', this).text().replace(/[^\d]/g, '')  >= 0) {
						$(this).attr('s', '20');
					}
				});
			}
		}]
	}); 
});