I have a table that displays the properties from an object. I would want to know if there is an easy way of changing the text the cell display instead of the true/false that the value is set to.
Example. I have a column that informs if the object is open(true) or closed(false).
Instead of showing true/false I would like to show open/closed.
The column is "State". It is a boolean attribute.
Is it possible to make this only on the html or should I change something in the component file? (It's angular)
<table class="table table-dark table-condensed table-bordered table-striped table-hover">
<thead>
<tr>
<th scope="col">Id</th>
<th scope="col">Name</th>
<th scope="col">Description</th>
<th scope="col">State</th>
<th scope="col">Resolved By</th>
<th scope="col">Hours to resolve</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let bug of bugs">
<th scope = "row">{{bug.id}}
<td>{{bug.name}}</td>
<td>{{bug.description}}</td>
<td>{{bug.state}}</td>
<td>{{bug.resolvedBy}}</td>
<td>{{bug.hoursToResolve}}</td>
</tr>
</tbody>
</table>
</div>
Thanks!
Great example for a ternary operator:
<table class="table table-dark table-condensed table-bordered table-striped table-hover">
<thead>
<tr>
<th scope="col">Id</th>
<th scope="col">Name</th>
<th scope="col">Description</th>
<th scope="col">State</th>
<th scope="col">Resolved By</th>
<th scope="col">Hours to resolve</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let bug of bugs">
<th scope = "row">{{bug.id}}
<td>{{bug.name}}</td>
<td>{{bug.description}}</td>
<td>{{bug.state ? 'True Value Here' : 'False Value Here'}}</td>
<td>{{bug.resolvedBy}}</td>
<td>{{bug.hoursToResolve}}</td>
</tr>
</tbody>
</table>
</div>
Related
I am having issue trying to apply a CSS style to a sibling element after an input of checkbox has been checked. My goal is to apply the text-decoration of line-through and text-decoraction-color red to the sibling element.
DEMO: enter link description here
input:checked + td.p1Amount {
text-decoration: line-through;
text-decoration-color: red;
}
<table class="table table-striped table-bordered table-hover table-sm table-responsive">
<thead>
<tr>
<th scope="col">Item</th>
<th scope="col">Due Date</th>
<th scope="col">Paid</th>
<th scope="col">Amount</th>
<th scope="col">Notes</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Utility</th>
<td>05/15/2020</td>
<td><input type="checkbox"></td>
<td class="p1Amount">$1.00</td>
<td>Confirmation #5477ff59de</td>
</tr>
</tbody>
</table>
Am I not using the right CSS selector to select the sibling after the checkbox has been checked?
you can do it by vanilla js
document.querySelector(".checkbox").onchange = function(){
var check = document.querySelector("input").checked;
if(check == true){
document.querySelector(".p1Amount").style.textDecoration = "line-through";
document.querySelector(".p1Amount").style.textDecorationColor = "red";
}else {
document.querySelector(".p1Amount").style.textDecoration = null;
document.querySelector(".p1Amount").style.textDecorationColor = null;
}
} ;
<table class="table table-striped table-bordered table-hover table-sm table-responsive">
<thead>
<tr>
<th scope="col">Item</th>
<th scope="col">Due Date</th>
<th scope="col">Paid</th>
<th scope="col">Amount</th>
<th scope="col">Notes</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Utility</th>
<td>05/15/2020</td>
<td><input class="checkbox" type="checkbox"></td>
<td class="p1Amount">$1.00</td>
<td>Confirmation #5477ff59de</td>
</tr>
</tbody>
</table>
I used JQuery. Please Try this...
(function ($) {
$(document).ready(function(){
$(".check").click(function(){
if($(".check").prop('checked')){
$(".p1Amount").css("text-decoration","line-through");
$(".p1Amount").css("text-decoration-color","red");
}else{
$(".p1Amount").css("text-decoration","");
$(".p1Amount").css("text-decoration-color","");
}
});
});
}(jQuery));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-striped table-bordered table-hover table-sm table-responsive">
<thead>
<tr>
<th scope="col">Item</th>
<th scope="col">Due Date</th>
<th scope="col">Paid</th>
<th scope="col">Amount</th>
<th scope="col">Notes</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Utility</th>
<td>05/15/2020</td>
<td><input type="checkbox" class="check"></td>
<td class="p1Amount">$1.00</td>
<td>Confirmation #5477ff59de</td>
</tr>
</tbody>
</table>
I can't seem to align the table head with the table body.
This is for my project making a web-type student data-storing database.
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Id</th>
<th scope="col">NIM</th>
<th scope="col">Nama</th>
<th scope="col">Jenis Kelamin</th>
<th scope="col">Alamat</th>
<th scope="col">Nama Bapak</th>
<th scope="col">Nama Ibu</th>
<th scope="col">Jurusan</th>
<th scope="col">Prodi</th>
<th scope="col">IPK Terakhir</th>
<th scope="col">Hapus</th>
</tr>
</thead>
<tbody *ngFor="let mhs of mhss">
<a routerLink="/detail/{{mhs.id}}">
<tr>
<td>{{mhs.id}}</td>
<td>{{mhs.nim}}</td>
<td>{{mhs.name}}</td>
<td>{{mhs.jk}}</td>
<td>{{mhs.alamat}}</td>
<td>{{mhs.nama_bapak}}</td>
<td>{{mhs.nama_ibu}}</td>
<td>{{mhs.jurusan}}</td>
<td>{{mhs.prodi}}</td>
<td>{{mhs.ipk}}</td>
<td><button class="delete" title="delete mhs"
(click)="delete(mhs)">HAPUS</button></td>
</tr>
</a>
</tbody>
</table>
My image:
Your code is generating a new <tbody> for every item in your array. Add the *ngfor structural directive to your table rows (<tr>).
Can anyone please suggest the best way to implement sorting in angular 6 using botstrap. This is my table.
I need to sort the table using mrp , ssp ,ymp .
I tried to search for tutorials , but there is angularjs implementation all over the internet .
Can anyone suggest a proper angular 6 implemetation using data table
<table id="myTable" class="table table-striped table-bordered table-dark" #myTable>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Id</th>
<th scope="col">Image</th>
<th scope="col">Name</th>
<th scope="col">Seller</th>
<th scope="col">Category</th>
<th scope="col">Status</th>
<th scope="col" sortable="mrp.value" class="sortable">MRP
</th>
<th scope="col" class="sortable">SSP
</th>
<th scope="col" class="sortable" >YMP
</th>
<th scope="col" class="sortable">Date Added
</th>
</tr>
</thead>
<tbody *ngFor ="let tempProduct of products">
<tr>
<th scope="row"><input type="checkbox" name="cbProducts"
value=`${{tempProduct.id}}`></th>
<td>{{tempProduct.id}}</td>
<td>
<img
src="http://localhost:8080/YourMart-PMP-Admin-
Panel/resources/images/{{tempProduct.primaryImg}}"
height="50" width="50">
</td>
<td>{{tempProduct.name}}</td>
<td>{{tempProduct.seller.name}}</td>
<td>{{tempProduct.category.name}}</td>
<td>{{tempProduct.status}}</td>
<td >{{tempProduct.mrp}}</td>
<td >{{tempProduct.ssp}}</td>
<td >{{tempProduct.ymp}}</td>
<td >{{tempProduct.created}}</td>
</tr>
</tbody>
</table>
I have a problem with bootstrap table, on phone resolution, my table in phone resolution will appear like this:
Here is my code:
<table class="table table-hover table-dark mt-3 table-bordered">
<thead>
<tr>
<th scope="col" >#</th>
<th scope="col" >Value</th>
<th scope="col" >Action</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Username</th>
<td><?=$Username?></td>
<td></td>
</tr>
<tr>
<th scope="row">Email</th>
<td><?=$Email?></td>
<td></td>
</tr>
</tbody>
</table>
If you look the text of the photo you will see that the text "go out" from the screen, how can I fix it?
Add table-responsive class to the table. You can also make is specific to view breakpoints.
More details here
I have the following problem in HTML.
I have this table that contains only a thead:
<table border="1" class="table_legenda" width="100%">
<thead>
<tr>
<th width="8.33%">Codice</th>
<th width="2%">Stato</th>
<th width="8.33%">Creazione<</th>
<th width="8.33%">Registrazione</th>
<th width="6.33%">Autore Cr</th>
<th width="6.33%">Autore Con</th>
<th width="6.33%">Autore Acq</th>
<th width="8.33%">Totale Imponibile</th>
<th width="24.66%">Fornitore</th>
<th width="4.33%">RM riserva</th>
<th width="8.33%">Errore</th>
<th width="8.33%">Azione</th>
</tr>
</thead>
</table>
Now, as you can see, every th cell have setted a percentual width and contains a textual value.
My problem is that if the textual value of a cell is longer than the available space of the cell it will be automatically hidden. I want that the text is automatically wrapped to a new line.
How can I do to obtain this behavior?
Tnx
You need to set the table to have a table-layout:fixed and the th elements to be overflow-wrap:break-word
.table_legenda {
table-layout: fixed;
}
.table_legenda th {
overflow-wrap: break-word;
}
<table border="1" class="table_legenda" width="100%">
<thead>
<tr>
<th width="8.33%">Codice</th>
<th width="2%">Stato</th>
<th width="8.33%">Creazione</th>
<th width="8.33%">Registrazione</th>
<th width="6.33%">Autore Cr</th>
<th width="6.33%">Autore Con</th>
<th width="6.33%">Autore Acq</th>
<th width="8.33%">Totale Imponibile</th>
<th width="24.66%">Fornitore</th>
<th width="4.33%">RM riserva</th>
<th width="8.33%">Errore</th>
<th width="8.33%">Azione</th>
</tr>
</thead>
</table>
demo at http://jsfiddle.net/ma4bc7zj/