JSFiddle - React, Tailwind, and code Playground

by philliad

HTML

<script src="https://cdn.datatables.net/r/bs/dt-1.10.9,b-1.0.3,b-colvis-1.0.3,cr-1.2.0/datatables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/r/bs/dt-1.10.9,b-1.0.3,b-colvis-1.0.3,cr-1.2.0/datatables.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="https://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,500,500italic,700,700italic&#39; rel=&#39;stylesheet"></script>
<div class="table-responsive">
    <table class="table table-condensed table-hover" id="table_buyers">
        <thead>
            <tr>
                <th>User ID</th>
                <th>Name</th>
                <th>Phone</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>101</th>
                <th>Batman</th>
                <th>09876 543 321</th>
            </tr>
            <tr>
                <th>102</th>
                <th>Spiderman</th>
                <th>0800 0800 088</th>
            </tr>
            <tr>
                <th>103</th>
                <th>Superman</th>
                <th>01234 567 890</th>
            </tr>
        </tbody>
    </table>
</div>

CSS

body{
    font-family: 'Roboto';
}
.dt-button-collection li.buttons-columnVisibility a:before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  transform: translate(0,0);
  content: "\f00d";
  margin-right: 13px;
}

.dt-button-collection li.buttons-columnVisibility.active a:before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  transform: translate(0,0);
  content: "\f00c";
  margin-right: 10px;
}

JavaScript

var tableBuyers = $('#table_buyers').DataTable({
                dom:    "<'row'<'buyerButtons col-sm-4 dataTableButtons'><'col-sm-4 dataTablesPageLength'l><'col-sm-4'f>>" +
                        "<'row'<'col-sm-12'tr>>" +
                        "<'row'<'col-sm-5'i><'col-sm-7'p>>",
                columnDefs:[
                    {
                        className:'',
                        orderable: true,
                        targets:1,
                    }
                ],
                order: [
                    [1, "asc"]
                ],
                autoWidth: false,
                colReorder: true/*,
                stateSave: true*/,
    			language: {
                    search: ""
                },
                initComplete: function(settings, json) {
                    $('.dataTables_filter label input').attr('placeholder','Type here to search');
                }
            });

new $.fn.dataTable.Buttons( tableBuyers, {
                buttons: [
                    {
                        extend: 'colvis',
                        text: '<i class="fa fa-bars"></i>',
                        className: 'btn-primary'
                    }
                    /*,
                    {
                        extend: 'colvisGroup',
                        text: 'Original View',
                        show: [ 1, 4, 7, 10, 13, 14, 15 ],
                        hide: [0, 2, 3, 5, 6, 8, 9, 11, 12, 16, 17]
                    }*/
                ]
            } );

            tableBuyers.buttons().container().appendTo( $('.buyerButtons'));