JSFiddle - React, Tailwind, and code Playground

by HarshaSridhar

HTML

<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/tabletools/2.2.4/css/dataTables.tableTools.css">
<script src="//cdn.datatables.net/tabletools/2.2.4/js/dataTables.tableTools.js"></script>
<div id="content_table">
    <table id="user_table">
        <thead>
            <tr>
                <th>S.No</th>
                <th>Category</th>
                <th>Product</th>
                <th>Price</th>
                <th>Status</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Clothing</td>
                <td>North Jacket</td>
                <td>$189.99</td>
                <td>In-stock</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Shoes</td>
                <td>Nike</td>
                <td>$59.99</td>
                <td>In-stock</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Electronics</td>
                <td>LED TV</td>
                <td>$589.99</td>
                <td>Out of stock</td>
            </tr>
            <tr>
                <td>4</td>
                <td>Sporting </td>
                <td>Ping Golf </td>
                <td>$159.99</td>
                <td>In-stock</td>
            </tr>
            <tr>
                <td>5</td>
                <td>Clothing</td>
                <td>Sweater</td>
                <td>$19.99</td>
                <td>In-stock</td>
            </tr>
            <tr>
                <td>6</td>
                <td>Clothing</td>
                <td>North Jacket</td>
                <td>$189.99</td>
                <td>In-stock</td>
            </tr>
            <tr>
                <td>7</td>
                <td>Shoes</td>
                <td>Nike</td>
                <td>$59.99</td>
                <td>In-stock</td>
            </tr>
            <tr>
                <td>8</td>
              ...

CSS

table{
    margin-top: 10px;
    margin-left: 10px;
   
}
td{
      padding-left: 10px;
      padding-right: 10px;
      text-align: center;
      height: 25px;
      width: 185px;
      font-size: 12px;
      font-family: Arial;
}

th{
        font-weight: bold;
        text-align: center;
        background-color: #E8A04D;
        font-family: Arial;
        color: #030303;
        font-size: 13px;
        height: 25px;
        width: 115px;
        padding-left: 10px;
        padding-right: 10px;

}

table, td, th{
    border: 1px solid #C79936;
    border-collapse: collapse;
}

JavaScript

$(document).ready( function () {
var table = $('#user_table').dataTable();
 var tableTools = new $.fn.dataTable.TableTools( table, {
 
     "buttons": [
         "copy",
         "csv",
         "xls",
         "pdf",
             { "type": "print", "buttonText": "Print me!" }
         ]
     } );
      
     $( tableTools.fnContainer() ).insertAfter('div.info');
} );