We Keep Coding

ANgular- Is it possible to add Mat-Paginator in regular table?

I made a regular HTML table in angular, whose data comes from API. I want to add mat-paginator in it.
This is my code:
<table class="table" style="text-align: center;">
<thead class="thead-light">
<tr>
<th></th>
<th style="font-weight: 800;">Points</th>
<th style="font-weight: 800;">Award Name</th>
<th style="font-weight: 800;">Country</th>
<th style="font-weight: 800;">Created At</th>
<th style="font-weight: 800;">Nominator</th>
<th style="font-weight: 800;">Visiblity</th>
<th></th>
</tr>
</thead>
<tbody *ngIf="newUserData">
<tr *ngFor="let data of newUserData; let i = index">
<td>
<div style="padding-left: 1.4rem;">
<input [(ngModel)]="radioSelected" class="form-check-input" type="radio" value="{{data.id}}">
</div>
</td>
<td>{{data.points}}</td>
<td>{{data.reason}}</td>
<td>{{data.countryName}}</td>
<td>{{data.createdAt | date : 'shortDate'}}</td>
<td>{{data.senderName}}</td>
<td>{{data.visibility}}</td>
<td>
<div class="d-flex" (click)="onRevoke(radioSelected)" style="cursor: pointer;" id="revoke" #revoke>
<svg-icon src="../../../../../assets/media/revoke_func.svg" [svgStyle]="{ 'width.px':18, 'height.px':12, 'fill':'#666666' }"></svg-icon>
<p style="color: #EB4987;">Revoke</p>
</div>
</td>
</tr>
</tbody>
</table>
Thanks in advance for the help

Yes it is possible with the help of MatTableDataSource, MatPaginator and Observable.
Please check the below stackblitz example I have created.
https://stackblitz.com/edit/angular-ivy-fauia1

How to have a scroll bar at top and bottom of angular md bootstrap table?

I have an angular MD bootstrap table where I want to have a horizontal scrollbar at the top and bottom of the table.
Following is the code,
<div layout="column" layout-align="center stretch" flex>
<div layout="row" style="margin: 20px;">
<div flex></div>
</div>
<md-table-container flex>
<table md-progress="vm.searchTablePromise" md-table single>
<thead md-sticky
style="background-color:#00a9da;"
md-head md-order="vm.query.order">
<tr md-row>
<th style="color: white;" md-column md-order-by="name">
Name
</th>
<th style="color: white;" md-column md-order-by="id">
ID
</th>
<th style="color: white;" md-column md-order-by="ein">
EIN
</th>
<th style="color: white;" md-column md-order-by="phNumber">
Ph. Number
</th>
</tr>
</thead>
<tbody md-body>
<tr md-row ng-repeat="item in vm.data">
<td md-cell>
<div style="min-width: 200px;">{{item.name}}</div>
</td>
<td md-cell>
{{item.id}}
</td>
<td md-cell>
<div style="min-width: 80px;">{{item.ein}}</div>
</td>
<td md-cell>
{{item.phNumber}}
</td>
</tr>
</tbody>
</table>
</md-table-container>
</div>
Now, I have a horizontal scroll at the bottom, I also want to have it at the top.
This link provides a solution here but I don't want to have a JS related code for scrolling.
Any help is much appreciated.

Unforunately, there is no way without javascript to have both a scrollbar on top and at the bottom.
It is possible to have a scroll bar on top with css, but that is still only one scrollbar:
md-table-container{
width: 100%;
overflow: scroll;
display: block;
transform: rotate(180deg) scaleX(-1);
}
table{
transform: rotate(180deg) scaleX(-1);
}
The only way to go is to use javascript. And the easiest way to implement it is to use the jQuery Doublescroll plugin
Download the file and include it as ds.js in your html. Here is a full example:
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="ds.js"></script>
<script>
$(function(){
$('#the-table').doubleScroll();
});
</script>
<div layout="column" layout-align="center stretch" style="width:100%; overflow:hidden" flex>
<div layout="row" style="margin: 20px;">
<div flex></div>
</div>
<md-table-container id="the-table" style="width:100%; overflow:scroll; display:block" flex>
<table style="width:100%" md-progress="vm.searchTablePromise" md-table single>
<thead md-sticky
style="background-color:#00a9da;"
md-head md-order="vm.query.order">
<tr md-row>
<th style="color: white;" md-column md-order-by="name">
Name
</th>
<th style="color: white;" md-column md-order-by="id">
ID
</th>
<th style="color: white;" md-column md-order-by="ein">
EIN
</th>
<th style="color: white;" md-column md-order-by="phNumber">
Ph. Number
</th>
</tr>
</thead>
<tbody md-body>
<tr md-row ng-repeat="item in vm.data">
<td md-cell>
<div style="min-width: 200px;">{{item.name}}</div>
</td>
<td md-cell>
{{item.id}}
</td>
<td md-cell>
<div style="min-width: 80px;">{{item.ein}}</div>
</td>
<td md-cell>
{{item.phNumber}}
</td>
</tr>
</tbody>
</table>
</md-table-container>
</div>

How to fit the page into landscape while print

I need to print a page, while giving to print it is splitting to two pages. The page is splitting after the second table, is there any way to fit it to one page.
I am providing the code below
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>View JTC</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style type="text/css" media="print">
#media print {
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
table {
page-break-inside: avoid;
}
#page {
size: A4 landscape;
}
}
</style>
</head>
<body>
<section class="container-fluid">
<table class="table table-sm table-bordered table-condensed">
<tr>
<th style="width: 30%; vertical-align: middle; text-align: center;">logo</th>
<th colspan="2" style="text-align: center; width: 70%">company</th>
</tr>
<tr>
<th rowspan="2" style="text-align: center; vertical-align: middle;">Job
Travel Card</th>
<th style="width: 10%;">JTC No:</th>
<th></th>
</tr>
<tr>
<th>Date</th>
<th></th>
</tr>
</table>
<table class="table table-sm table-bordered table-condensed">
<tr>
<td style="width: 10%; text-align: left;">Project Number</td>
<td style="width: 15%; text-align: left;" colspan="2"></td>
<td style="width: 10%; text-align: left;">Unit No. / Tag No.</td>
<td style="width: 15%; text-align: left;" colspan="4"></td>
</tr>
<tr>
<td>Area Number</td>
<td colspan="2"></td>
<td>Material Class</td>
<td colspan="4"></td>
</tr>
<tr>
<td style="width: 15%; text-align: left;">Drawing No: / ISO
Number</td>
<td style="width: 15%; text-align: left;"></td>
<td style="width: 15%; text-align: left;">JC No:</td>
<td style="width: 15%; text-align: left;"></td>
<td style="width: 10%; text-align: left;">Sheet No</td>
<td style="width: 15%; text-align: left;"></td>
<td style="width: 10%; text-align: left;">Rev. No.</td>
<td style="width: 15%; text-align: left;"></td>
</tr>
<tr>
<td style="width: 15%; text-align: left;">Item Description</td>
<td style="width: 15%; text-align: left;" colspan="2"></td>
<td style="width: 15%; text-align: left;">ITP Stage Nos.</td>
<td style="width: 15%; text-align: left;" colspan="4"></td>
</tr>
</table>
<!-- Fitup data table-sm -->
<table class="table table-bordered table-condensed">
<tr>
<th rowspan="12" style="text-align: center; vertical-align: middle;">
<span class="verticaltext"> Fabrication Assembly Fit-Up </span>
</th>
<th style="text-align: center; vertical-align: middle;" rowspan="2">Weld/joint
No</th>
<th style="text-align: center; vertical-align: middle;" rowspan="2">Item/Position
No.</th>
<th colspan="2">Material Spec Grade</th>
<th style="text-align: center; vertical-align: middle;" rowspan="2">Size</th>
<th style="text-align: center; vertical-align: middle;" rowspan="2">Thickness</th>
<th colspan="2">Heat/Plate/TestNo</th>
<th style="text-align: center; vertical-align: middle;" rowspan="2">Welder
No. for tracking</th>
<th colspan="2">Fitup Result</th>
<th style="text-align: center; vertical-align: middle;" rowspan="2">Date</th>
<th style="text-align: center; vertical-align: middle;" rowspan="2">Sign</th>
</tr>
<tr>
<th>Material 1</th>
<th>Material 2</th>
<th>Material 1</th>
<th>Material 2</th>
<th>Accept</th>
<th>Reject</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="4">Name & Signature of fabrication foreman</td>
<td colspan="2">Released to</td>
<td colspan="2"><input type="checkbox"> QC/NDE/DIM.</td>
<td colspan="2"><input type="checkbox"> Welding</td>
<td colspan="4"><input type="checkbox">
Fabrication/Assembly</td>
</tr>
<tr>
<td colspan="7">Date</td>
<td colspan="7">Date</td>
</tr>
</table>
<!-- welding data -->
<table class="table table-bordered table-condensed">
<tr>
<th rowspan="13" style="text-align: center; vertical-align: middle;">
<span class="verticaltext"> Welding Details </span>
</th>
<th style="text-align: center; vertical-align: middle;" rowspan="3">Joint
No</th>
<th style="text-align: center; vertical-align: middle;" rowspan="3">WPS
No.</th>
<th colspan="3" class="text-center">Welding Process</th>
<th colspan="3" class="text-center">Welder/Operation No.</th>
<th colspan="2" rowspan="2" class="text-center">Visual
Inspection</th>
<th style="text-align: center; vertical-align: middle;" rowspan="3">Date</th>
<th style="text-align: center; vertical-align: middle;" rowspan="3">Sign</th>
</tr>
<tr>
<th colspan="3" class="text-center">Passes</th>
<th colspan="3" class="text-center">Passes</th>
</tr>
<tr>
<th class="text-center">Root/Hot</th>
<th class="text-center">Fill</th>
<th class="text-center">Cap</th>
<th class="text-center">Root/Hot</th>
<th class="text-center">Fill</th>
<th class="text-center">Cap</th>
<th class="text-center">Accept</th>
<th class="text-center">Reject</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="4">Name & Signature of fabrication foreman</td>
<td colspan="3">Released to</td>
<td colspan="2"><input type="checkbox"> QC/NDE/DIM.</td>
<td colspan="1"><input type="checkbox"> Welding</td>
<td colspan="4"><input type="checkbox">
Fabrication/Assembly</td>
</tr>
<tr>
<td colspan="14">Name & Signature of QC Personel</td>
</tr>
<tr>
<td colspan="7">Date</td>
<td colspan="7">Date</td>
</tr>
</table>
</section>
</div>
</body>
</html>
There are 10 rows in each table, due to stack overflow limitations I short the code. Can any one help me with this Thank you in advance.

I did try with 10 rows in the two tables and this configuration seems to have worked out for me.
<style type="text/css" media="print">
#media print {
html, body {
height: 100%;
width: 100%;
}
table:nth-of-type(2) {
margin-top:-90px;
margin-bottom: 0;
}
#page {
size: A4 landscape;
margin: 0;
}
}
</style>
table:nth-of-type(2) is used to specifically work on the 2nd table, in your case the Fabrication Assembly Fit-Up Table.
Hope this helped.

How to remove text overlapping in table?

The responsive table with a border has been designed. The problem is wraptexting, even when included th.nowrap in css, where data is overlapping and two horizontal lines appear when I look into the mobile view.
I had declared nowrap text in css and even td and th but its not working.
How can I solve this wraptext error?
<div class="row">
<div class="panel panel-default">
<!-- /.panel-heading -->
<div class="panel-body pn">
<div style="overflow-x:auto;">
<br>
<div class="table-responsive">
<table class="table table-bordered mbn">
<div class="panel-heading">
<span class="panel-title">
<span class="fa fa-table"></span>
<font color="blue">Se</font>
</span>
</div>
<thead>
<tr>
<th style="width:7.8%;white-space:nowrap;">
<font color="grey">Enq</font>
</th>
<th style="width:7.8%;white-space:nowrap;" nowrap="nowrap">
<font color="grey">Da</font>
</th>
<th style="width:9.9%;white-space:nowrap;">
<font color="grey">Bu</font>
</th>
<th style="width:9.9%;white-space:nowrap;">
<font color="grey">Prop</font>
</th>
<th style="width:17.9%;white-space:nowrap;">
<font color="grey">Pr</font>
</th>
<th style="width:9.8%;white-space:nowrap;">
<font color="grey">District</font>
</th>
<th style="width:9.9%;white-space:nowrap;">
<font color="grey">City</font>
</th>
<th style="width:9.8%;white-space:nowrap;">
<font color="grey">Bedrooms</font>
</th>
<th style="width:7.9%;white-space:nowrap;">
<font color="grey">Details</font>
</th>
<th style="width:7.8%;white-space:nowrap;">
<font color="grey">Update</font>
</th>
</tr>
</thead>
<tr>
<td style="width:8%;white-space:nowrap;"></td>
<td style="width:8%;white-space:nowrap;"></td>
<td style="width:10%;white-space:nowrap;"></td>
<td style="width:10%;white-space:nowrap;"></td>
<td style="width:18%;white-space:nowrap;"></td>
<td style="width:10%;white-space:nowrap;"></td>
<td style="width:10%;white-space:nowrap;"></td>
<td style="width:10%;white-space:nowrap;"></td>
<td style="width:8%;white-space:nowrap;"><a>Det </a></td>
<td style="width:8%;white-space:nowrap;"><a> ed </a></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
table {
width: 100%;
white-space: nowrap;
}
thead, tbody, tr, td, th {
display: block;
}
tr:after {
content: ' ';
display: block;
visibility: hidden;
clear: both;
white-space: nowrap;
}
thead th {
height: 40px;
white-space: nowrap;
/*text-align: left;*/
}
tbody {
height: 40px;
overflow-y: auto;
white-space: nowrap;
}
thead {
/* fallback */
}
tbody td, thead th {
width: 19.2%;
float: left;
white-space: nowrap;
}

I think this is what you wanted. I removed all the nowrap code, as you didn't need it to achieve the responsive layout.
The key here is to give the tables parent element position:relative;, float:left; and a width width:100%; so the table's width:100%; has a meaning. (100% of what?).
You also don't need to give every column a width. It's enough to provide widths for one row and the rest of the table will use those rules.
There was a <div> inside the table which I removed to above the table.
Here is the code: (run the snippet)
Note: the borders on the th are there just to show the width of each. I also changed the width of the widest column from 18% to 14% and gave the 4% to the last two columns (2% each).
.table-responsive
{
position:relative;
float:left;
width:100%;
}
table
{
width: 100%;
}
th
{
color:grey;
border:1px solid #000;
}
td
{
text-align:right;
}
<div class="row">
<div class="panel panel-default">
<!-- /.panel-heading -->
<div class="panel-body pn">
<div style="overflow-x:auto;">
<br>
<div class="table-responsive">
<div class="panel-heading">
<span class="panel-title">
<span class="fa fa-table"></span><font color="blue">Se</font></span>
</div>
<table class="table table-bordered mbn">
<tr>
<th style="width:8%;">Enq</th>
<th style="width:8%;">Da</th>
<th style="width:10%;">Bu</th>
<th style="width:10%;">Prop</th>
<th style="width:14%;">Pr</th>
<th style="width:10%;">District</th>
<th style="width:10%;">City</th>
<th style="width:10%;">Bedrooms</th>
<th style="width:10%;">Details</th>
<th style="width:10%;">Update</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Det</td>
<td>ed</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>

Please Use this code
<div class="panel panel-default">
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>Some default panel content here.</p>
</div>
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
</tr>
</tbody>
</table>
</div>

Please use below code
<div class="row">
<div class="panel panel-default">
<!-- /.panel-heading -->
<div class="panel-body pn">
<div style="overflow-x:auto;">
<br>
<div class="table-responsive">
<table class="table table-bordered mbn">
<div class="panel-heading">
<span class="panel-title">
<span class="fa fa-table"></span><font color="blue">Se</font></span>
</div>
<thead>
<tr>
<th style="width:8%;white-space:nowrap;"><font color="grey">Enq</font></th>
<th style="width:8%;white-space:nowrap;" nowrap="nowrap"><font color="grey">Da</font></th>
<th style="width:10%;white-space:nowrap;"><font color="grey">Bu</font></th>
<th style="width:10%;white-space:nowrap;"><font color="grey">Prop</font></th>
<th style="width:18%;white-space:nowrap;"><font color="grey">Pr</font></th>
<th style="width:10%;white-space:nowrap;""><font color="grey">District</font></th>
<th style="width:10%;white-space:nowrap;"><font color="grey">City</font></th>
<th style="width:10%;white-space:nowrap;"><font color="grey">Bedrooms</font></th>
<th style="width:8%;white-space:nowrap;"><font color="grey" >Details</font></th>
<th style="width:8%;white-space:nowrap;"><font color="grey">Update</font></th>
</tr>
</thead>
<tr>
<td style="width:8%;white-space:nowrap;"></td>
<td style="width:8%;white-space:nowrap;"></td>
<td style="width:10%;white-space:nowrap;"></td>
<td style="width:10%;white-space:nowrap;"></td>
<td style="width:18%;white-space:nowrap;"></td>
<td style="width:10%;white-space:nowrap;"></td>
<td style="width:10%;white-space:nowrap;"></td>
<td style="width:10%;white-space:nowrap;"></td>
<td style="width:8%;white-space:nowrap;">Det </a></td>
<td style="width:8%;white-space:nowrap;"> ed </a></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>

Add Horizontal Scroll in Jquery Mobile Table?

I have the following markup,
<table class="ui-responsive table-stroke ui-table ui-table-columntoggle"
data-mode="columntoggle" data-role="table" style=
"overflow-x: scroll !important;">
<thead>
<tr>
<th class="ui-table-priority-6" data-colstart="1"
data-priority="6" style="font-weight: bold;">SL</th>
<th class="ui-table-priority-6" data-colstart="2"
data-priority="6" style="font-weight: bold;">Cat</th>
<th class="ui-table-priority-6" data-colstart="3"
data-priority="6" style="font-weight: bold;">Brand</th>
<th class="ui-table-priority-6" data-colstart="4"
data-priority="6" style="font-weight: bold;">Product</th>
<th class="ui-table-priority-persist" data-colstart="5"
data-priority="persist" style="font-weight: bold;">Item
Code</th>
<th class="ui-table-priority-persist" data-colstart="6"
data-priority="persist" style="font-weight: bold;">Model
Number</th>
<th class="ui-table-priority-6" data-colstart="7"
data-priority="6" style="font-weight: bold;">Bundle Value</th>
<th class="ui-table-priority-persist" data-colstart="8"
data-priority="persist" style="font-weight: bold;">Old RSP</th>
<th class="ui-table-priority-persist" data-colstart="9"
data-priority="persist" style="font-weight: bold;">Promo
RSP</th>
<th class="ui-table-priority-6" data-colstart="10"
data-priority="6" style="font-weight: bold;">Reduced %age</th>
<th class="ui-table-priority-6" data-colstart="11"
data-priority="6" style="font-weight: bold;">Start Date</th>
<th class="ui-table-priority-6" data-colstart="12"
data-priority="6" style="font-weight: bold;">Vendor End
Date</th>
</tr>
</thead>
<tbody>
<tr>
<td class="ui-table-priority-6">
<p>A115</p>
</td>
<td class="ui-table-priority-6">
<p>SDA</p>
</td>
<td class="ui-table-priority-6">
<p>Panasonic</p>
</td>
<td class="ui-table-priority-6">
<p>Blender</p>
</td>
<td class="ui-table-priority-persist">
<p>11651099</p>
</td>
<td class="ui-table-priority-persist">
<p>MXAC400</p>
</td>
<td class="ui-table-priority-6">
<p>GV 50</p>
</td>
<td class="ui-table-priority-persist">
<p><strong> 399</strong></p>
</td>
<td class="ui-table-priority-persist">
<p>
<strong> 399</strong></p>
</td>
<td class="ui-table-priority-6">
<p>0%</p>
</td>
<td class="ui-table-priority-6">
<p>Feb 26th</p>
</td>
<td class="ui-table-priority-6">
<p>Mar 8th</p>
</td>
</tr>
<tr>
<td class="ui-table-priority-6">
<p>C073</p>
</td>
<td class="ui-table-priority-6">
<p>SDA</p>
</td>
<td class="ui-table-priority-6">
<p>Tefal</p>
</td>
<td class="ui-table-priority-6">
<p>Fryer</p>
</td>
<td class="ui-table-priority-persist">
<p>11480473</p>
</td>
<td class="ui-table-priority-persist">
<p>FZ700072</p>
</td>
<td class="ui-table-priority-6">
<p>PB</p>
</td>
<td class="ui-table-priority-persist">
<p><strong>999</strong></p>
</td>
<td class="ui-table-priority-persist">
<p><strong> 749</strong></p>
</td>
<td class="ui-table-priority-6">
<p>25%</p>
</td>
<td class="ui-table-priority-6">
<p>Mar 1st</p>
</td>
<td class="ui-table-priority-6">
<p>Will Revert</p>
</td>
</tr>
</tbody>
</table>
Can I add a horizontal markup? So that users can easily scroll right and left

You can wrap your table with div like:
<div style="width: 100%; height: 400px; overflow: auto">
<table>
<!-- table content -->
</table>
</div>

If table > window width scroll will be visible dy default.
Check CSS styles and js (jQuery Mobile can fixed the table to window width)
Also you can use div container, for example:
<div style="width:300px;overflow:auto">
<table>...</table>
</div>

The answers above worked for me; however, I didn't want to specify explicit widths or heights, so the following solved the problem even better:
<div style="overflow-x: auto;">
<table [...] </table>
</div>