JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.angularjs.org/1.2.0-rc.3/angular.js"></script>
<script src="http://bazalt-cms.com/assets/ng-table/0.3.1/ng-table.js"></script>
<div ng-controller="DemoCtrl"> <a href="javascript:void(0)" ng-click="printData('myTable','My Table')"> Print</a>

    <table id="myTable" ng-table="tableParams" class="table">
        <tr ng-repeat="user in $data">
            <td data-title="'Name'" sortable="'name'">{{user.name}}</td>
            <td data-title="'Age'" sortable="'age'">{{user.age}}</td>
            <td data-title="'Place'" sortable="'place'">{{user.place}}</td>
            <td data-title="'Contact'" sortable="'contact'">{{user.contact}}</td>
            <td data-title="'Postion'" sortable="'postion'">{{user.postion}}</td>
        </tr>
    </table>
</div>

CSS

table th, table td {
    border-color: black;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
}
th, table th {
    -moz-user-select: none;
    text-align: center;
}
table {
    border-collapse: collapse;
}
@media screen {
    #printSection {
        display: none;
    }
}
@media print {
    body * {
        visibility: hidden;
    }
    div {
        page-break-inside: avoid;
    }
    table {
        page-break-after: always;
        page-break-inside: auto;
    }
    tr {
        page-break-inside: avoid;
        page-break-after: auto;
    }
    td {
        page-break-inside: avoid;
        page-break-after: auto;
    }
    thead {
        display: table-header-group;
    }
    tfoot {
        display: table-footer-group;
    }
    #printSection * {
        visibility: visible;
    }
    #printSection {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        margin: 0 auto;
        width: 100%;
    }
}

JavaScript

var app = angular.module('app', ['ngTable']).
controller('DemoCtrl', function ($scope, $filter, ngTableParams) {

    $scope.printData = function (tableId, tableTitle) {
        var tableObject = document.getElementById(tableId);
        tableObject = $(tableObject).clone()[0];
        var mainDiv = document.createElement('div');
        var htmlDiv = document.createElement('div');
        htmlDiv.style.fontWeight = 'bold';
        htmlDiv.style.fontSize = '20px';
        htmlDiv.style.paddingBottom = '20px';
        htmlDiv.style.paddingTop = '20px';
        htmlDiv.appendChild(document.createTextNode(tableTitle));
        mainDiv.appendChild(htmlDiv);
        mainDiv.appendChild(tableObject);
        var domClone = mainDiv.cloneNode(true);
        var $printSection = document.getElementById("printSection");
        if (!$printSection) {
            $printSection = document.createElement("div");
            $printSection.id = "printSection";
            document.body.appendChild($printSection);
        }
        $printSection.innerHTML = "";
        $printSection.appendChild(domClone);
        window.print();
    };


    var data = [{
        name: "Moroni",
        age: 50,
        place: "Abc defg",
        contact: "9876543210",
        postion: "Manager"
    }, {
        name: "Tiancum",
        age: 43,
        place: "Abc defg",
        contact: "9876543210",
        postion: "Engineer"
    }, {
        name: "Jacob",
        age: 27,
        place: "AbcFGF  defg",
        contact: "9876543210",
        postion: "Staff"
    }, {
        name: "Nephi",
        age: 29,
        place: "FDFD Abc defg dsds",
        contact: "9876543210",
        postion: "Engineer"
    }, {
        name: "Enos",
        age: 34,
        place: "Abc FDF defg",
        contact: "9876543210",
        postion: "Engineer"
    }, {
        name: "Tiancum",
        age: 43,
        place: "DFHH Abc defg sdsdsds",
        contact: "9876543210",
        postion: "Manager"
    }, {
  ...