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="splitForPrint">
<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 {
font-size: 12pt;
font-family: Times, "Times New Roman", serif;
margin: 0;
padding: 0;
background-color: #ffffff;
background-image: none;
margin-left: 10mm;
margin-right: 10mm; }
#printnotice {
display: block;
visibility: visible;
font-size: 12pt;
border-bottom: 1mm #000000 solid; }
#content {
position: relative;
clear: both;
width: 100%;
margin-left: auto;
margin-right: auto;
font-size: 12pt; }
#printnotice img {
float: left; }
#printnotice p {
margin-left: 125px; }
#maintext {
border: none;
width: 100%;
margin-left: 0px;
background-color: #ffffff;
color: #000000;
margin-right: 0em;
font-size: 12pt; }
h1, h2, h3, h4, h5, h6 {
color: #000000;
padding-left: 10px;
page-break-after: avoid; }
h1 {
color: #000000;
border-bottom: none;
margin-top: 0%;
padding-top: 4px;
padding-bottom: 4px;
margin-bottom: 0%;
text-shadow: none;
font-size: 16pt;}
h2 {
border-left: none;
font-size: 14pt;
margin-top: 0em;
margin-bottom: 0em;
padding-top: 4px;}
h3 {
font-size: 12pt;
margin-top: 10px;
margin-bottom: 10px;
text-decoration: underline; }
h4 {
font-size: 12pt;
font-style: italic; }
ul {
page-break-inside: avoid; }
#maintext ul li ol li {font-size: inherit;
line-height: 1.6em; }
a:link, a:visited {
text-decoration: none;
color: #000000;
border: none; }
.forward-back {
display: none; }
code {
font-size: 1em; }
#maintext p, #maintext ul, #maintext ol, #maintext table {
padding-left: 10px;
padding-right: 10px;
font-size: 12pt;
line-height: normal;
margin-top: 13px;
margin-bottom: 13px;}
#maintext ul, #maintext ol {
margin-left: 20px;
}
#header {
display: none; }
#sidepanel {
display: none; }
#footer {
display: none;
}
}
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.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: "Abc defg sddddddddd sasasasa aaaaaaaaaaaaaaaaaaaaaad",
age: 50,
place: "Abc defg sddddddddd sasasasa aaaaaaaaaaaaaaaaaaaaaad",
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: "Abc defg sddddddddd sasasasa aaaaaaaaaaaaaaaaaaaaaad",
contact: "9876543210",
postion: "Engineer"
}, {
name: "Abc defg sddddddddd sasasasa aaaaaaaaaaaaaaaaaaaaaad",
age: 34,
place: "Abc FDF defg",
contact: "9876543210",
postion: "Engineer"
}, {
name: "Tiancum",
age: 43,
place: "Abc defg sddddddddd sasasasa aaaaaaaaaaaaaaaaaaaaaad",
contact: "9876543210",
...