JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.10/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.1.0/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.1.0/js/buttons.bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.1.0/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.1.0/js/buttons.print.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.10/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.1.0/css/buttons.bootstrap.min.css">
<table id="example" width="100%" border="0" cellspacing="0" cellpadding="0" >
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div class="myclass"><a href="javascript:void(0)">Company name</a>
        </div>
      </td>
      <td>
        <div class="flagimg" style="background-image: url(http://icons.iconarchive.com/icons/custom-icon-design/all-country-flag/32/Canada-Flag-icon.png)">
          <div class="flagtext">
            <p>Country name</p>
          </div>
        </div>
      </td>
      <td>
        <div class="myclass">Product sold</div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="myclass"><a href="javascript:void(0)">Company name</a>
        </div>
      </td>
      <td><div...

CSS

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
}
td {text-align:left;}

.flagimg {
  text-align: left;
  width: 120px;
  padding: 2px 0px 2px 0px;
  margin: 0px;
  background-position: center left;
  background-repeat: no-repeat;
}

.flagtext {
  margin: 0 auto;
  /* using top/bottom margins here triggers collapsing margins in Moz hence using padding on the outer box instead */
  padding: 0;
  text-align: left;
  width: 120px;
}

.flagtext p {
  margin: 0;
  padding: 5px 0px 5px 42px;
}

JavaScript

var buttonCommon = {
  exportOptions: {
    format: {
      body: function(data, column, row) {
        data = data.replace(/<.*?>/g, "");
        return $.trim(data);
      }
    }
  }
};
$('#example').DataTable({
  dom: 'Bfrtip',
  buttons: [
    $.extend(true, {}, buttonCommon, {
      extend: 'copyHtml5'
    }),
    $.extend(true, {}, buttonCommon, {
      extend: 'excelHtml5'
    }),
    $.extend(true, {}, buttonCommon, {
      extend: 'pdfHtml5'
    })
  ],
});