JSFiddle - React, Tailwind, and code Playground

by Faisal Pathan

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.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.bootstrap.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/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.colVis.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.5.2/css/buttons.bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="//cdn.datatables.net/buttons/1.1.2/js/buttons.flash.min.js"></script>
<table id="example" class="table table-striped table-bordered">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
     ...

CSS

.buttons-collection,
.dt-button-collection,
.dropdown-menu {
    min-width:100px;
    max-width:100px;
}
.dt-button-collection li.dt-button{
    min-width:98px;
    max-width:98px;
}
.dataTables_length,.dataTables_info{
  float:left;
}
.dataTables_filter,.dataTables_paginate
{
  float:right;
}
.dataTables_wrapper{
  padding:10px;
}
div.dt-buttons{
  padding-bottom:10px;
}

JavaScript

$(document).ready(function() {
  var table = $('#example').DataTable({
  	dom:"<'row'<'col-xs-12 text-right'B>><'row'<'col-xs-6'l><'col-xs-6'f>><'row'<'col-xs-12't>><'row'<'col-xs-6'i><'col-xs-6'p>><'row'<'col-xs-12 text-right'r>>",
    //dom: 'Blftipr',
    buttons: [{
      extend: 'collection',
      text: '<i class="fa fa-bars"></i> Export',
      className:'btn btn-default pull-right',
      buttons: [{
          extend: 'copy',
          text: '<i class="fa fa-files-o text-info"></i> Copy',
          title: 'Data export',
          titleAttr: 'Copy'
        },
        {
          extend: 'excel',
          text: '<i class="fa fa-file-excel-o text-success"></i> Excel',
          title: 'Data export',
          titleAttr: 'Excel'
        },
        {
          extend: 'csv',
          text: '<i class="fa fa-file-text-o text-success"></i> CSV',
          title: 'Data export',
          titleAttr: 'CSV'
        },
        {
          extend: 'pdf',
          text: '<i class="fa fa-file-pdf-o text-danger"></i> PDF',
          title: 'Data export',
          titleAttr: 'PDF'
        },
        {
          extend: 'print',
          text: '<i class="fa fa-print text-primary"></i> Print',
          title: 'Data export',
          titleAttr: 'Print'
        }
      ]
    }]
  });

  table.buttons().container()
    .appendTo('#example_wrapper .col-sm-6:eq(0)');
});