HTML
<div>
<nav class="navbar">
<a class="navbar-brand">Checkout-Reports</a>
</nav>
<div>
<label>From </label>
<input type="date" class="mx-3" />
<label>To </label>
<input class="mx-3" type="date" />
</div>
</div>
<div id="table-scroll" class="table-scroll table-bordered">
<div class="table-wrap" id="checkouts">
<table class="main-table">
<thead>
<tr>
<th class="fixed-side" scope="col">Name</th>
<th scope="col">M-No</th>
<th scope="col">Check-in Date</th>
<th scope="col">Sharing Type</th>
<th scope="col">Bed</th>
<th scope="col">Advance</th>
<th scope="col">Monthly Rent</th>
<th scope="col">Checkouted Date</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let checkout of pgCheckOutList">
<th class="fixed-side">
{{ checkout.firstName }} {{ checkout.lastName }}
</th>
<td>{{ checkout.mNumber }}</td>
<td>{{ checkout.checkOutDate | date: "dd-MM-yyyy" }}</td>
<td>4</td>
<td>420</td>
<td>{{ checkout.balAmt }}</td>
<td>5000</td>
<td>{{ checkout.roomNo }}</td>
</tr>
</tbody>
</table>
</div>
</div>
TS!!
@Component({
selector: "app-checkout-list-report",
templateUrl: "./checkout-list-report.component.html",
styleUrls: ["./checkout-list-report.component.scss"]
})
export class CheckoutListReportComponent implements OnInit {
pgCheckOutList: CheckOut[] = [];
constructor(
private tenantService: TenantService,
private activatedRoute: ActivatedRoute,
private router: Router,
private checkOutService: CheckOutService
) {}
ngOnInit() {
this.checkOutService
.getCheckOuts()
.subscribe((checkouts: CheckOut[]) => {
this.pgCheckOutList = checkouts;
});
}
CSS
.table-scroll {
position: relative;
margin: auto;
overflow: hidden;
}
.table-wrap {
width: 100%;
overflow: auto;
}
.table-scroll table {
width: 100%;
margin: auto;
border-collapse: separate;
border-spacing: 0;
}
.table-scroll th,
.table-scroll td {
padding: 5px 10px;
white-space: nowrap;
vertical-align: top;
}
I need to filter the items by a specified start and end date range.
I am working on implementing a filtering functionality for a data array that corresponds to a list of checkouts based on the user's input start and end dates in TypeScript for my Angular application.
I need to filter the items by a specified start and end date range. I am currently developing a feature to filter a data array of checkouts based on the user's provided from-date and to-date inputs in TypeScript for my Angular Application.
I need to filter the items by a specific start date and end date range. Working on filtering a data array of checkout lists based on user input start and end dates in TypeScript for my Angular application.