I am trying to create easy HTML table with Vue.js. I would like to add easy Transition, but the animation does not show(it just waits for 2s) and I do not know why?
HTML:
`
<tr >
<td colspan="12">
<table style="background: rgb(188, 5, 131)" class="table table-responsive">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Character ID</th>
<th scope="col">Is alive?</th>
<th scope="col">Years</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
<tr class="child" v-for="child in item.children.has_nemesis.records" :key="child.data.ID">
<td>{{ child.data.ID }}</td>
<td>{{ child.data['Character ID'] }}</td>
<td>{{ child.data['Is alive?'] }}</td>
<td>{{ child.data.Years }}</td>
<td>
<button #click="removeItem(child, item)">
Remove
</button>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</template>
</transition>
`
whole code:https://jsfiddle.net/barabas/vzqLdxkb/2/
Related
<table class="table">
<thead>
<tr class="d-flex">
<th class="col-0">JOB ID</th>
<th class="col-0">JOB STATUS</th>
<th class="col-0">USER</th>
<th class="col-0">BG TASK STATUS</th>
<th class="col-2">BG TASK RESULT</th>
<th class="col-0">BG TASK CREATED TIME</th>
<th class="col-0">BG TASK COMPLETED TIME</th>
<th class="col-0">DETAIL LOG LINK</th>
</tr>
</thead>
<tbody>
<tr class="d-flex">
<td class="col-0">15</td>
<td class="col-0">success</td>
<td class="col-0">None</td>
<td class="col-0"></td>
<td class="col-2"></td>
<td class="col-0"></td>
<td class="col-0"></td>
<td class="col-0">Job Details</td>
</tr>
</tbody>
</table>
Delete the className="d-flex" in tr tag
You can add the class text-justify to the table so that the text will be aligned to center
I would love to change the background color on a row in a table when i click on the tr.
That's the code of the table:
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th><small class="text-muted">#</small></th>
<th>Name</th>
<th>Heading</th>
<th>Productor</th>
</tr>
</thead>
<tbody>
<tr
v-for="company in allCompanies"
:key="company.id"
role="button"
#click="selectCompany(company)"
>
<td class="text-primary">
<small>#{{ company.id }}</small>
</td>
<td class="fw-bold">{{ company.name }}</td>
<td>{{ company.heading }}</td>
<td>
{{ company.productor }}
</td>
</tr>
</tbody>
</table>
</div>
And here the code of the method I call on the click event:
selectCompany(company) {
this.storeSelectedCompamy(company);
this.fetchShows(company.id);
console.log("change css");
}
Any help would be appreciated.
Thank you in advance
Valerio
Have a look here:
https://v2.vuejs.org/v2/guide/class-and-style.html
It looks like each <tr> corresponds to a company, so my approach would be to attach each row's state to its corresponding company as a property, and then toggle that property in selectCompany. Something like:
selectCompany(company) {
allCompanies.forEach(_company => _company.isSelected = false);
company.isSelected = true;
}
<tr
v-for="company in allCompanies"
:key="company.id"
:class="company.isSelected ? 'selected' : ''"
role="button"
#click="selectCompany(company)"
>
I would like the first two columns to only occupy the width of their contents, and for the final 3rd column to be justified to the right with a gap (if any) between the 2nd and 3rd columns as immediately below. In the diagram I have marked this as a large empty column.
+-------+------+-------------------+------+
| Col1 | Col2 | | Col3 |
+-------+------+-------------------+------+
| Val 1 | Val2 | | Val3 |
+-------+------+-------------------+------+
Some restraints:
I can use only bootstrap.
I cant use any custom styles.
I've tried it as follows, but it's not working.
<table class="table table-bordered">
<thead>
<tr class="row">
<td class="col-md-1">col1</td>
<td class="col-md-1">col2</td>
<td class="col-md-9"></td>
<td class="col-md-1">col3</td>
</tr>
</thead>
<tbody>
<tr class="row">
<td class="col-md-1">val1</td>
<td class="col-md-1">val2</td>
<td class="col-md-9"></td>
<td class="col-md-1">val3</td>
</tr>
</tbody>
</table>
Bootstrap 4
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
</tbody>
</table>
Bootstrap 3
<table class="table table-bordered">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
Check which version you are using for bootstrap. If any of the above code is not working please check you imported the bootstrap properly or not.
I'm using wkhtmltopdf to generate a pdf from html.
In the html, there is a table with thead and tbody. I use Vue in order to generate the content:
<table class="data-table">
<thead>
<tr>
<th class="title" colspan="5">Control ##{{ index + 1 }}</th>
</tr>
<tr>
<th class="number">#</th>
<th>Tittel:</th>
<th>Kommentar:</th>
<th>Mangelpunkt<br> Registrert:</th>
<th>Mangelpunkt<br> Utbedret:</th>
</tr>
</thead>
<tbody v-for="(checkpoint, cpIndex) in control.checkpoints">
<tr>
<td class="number">#{{ cpIndex + 1}}</td>
<td>#{{ checkpoint.title }}</td>
<td>#{{ checkpoint.comment }}</td>
<td class="danger center">#{{ checkpoint.rejectedDate }}</td>
<td class="success center">#{{ checkpoint.approvedDate }}</td>
</tr>
<tr v-if="checkpoint.images.length > 0">
<td class="number">#{{ cpIndex + 1 }}</td>
<td class="images" colspan="4">
<img v-for="(image, imgIndex) in checkpoint.images" :key="imgIndex" :src="base64Images[image]" alt="print image">
</td>
</tr>
</tbody>
</table>
This works fine in the browser, but if one image is tall enough to not fit on the same page as the other images, it breaks to the next page (as wanted). However, the image is overlapping the thead..
I've tried to apply all sorts of hacks to this the last hours but I simply cannot get the image to respect the thead on the next print page..
Is there anything I'm doing wrong here?
i found the showFooter Property. but i do not get how to customize the Content for that.
i only need to fill three of total 8 in ...
so table Looks basically like this:
<div class="table-responsive">
<table class="table table-bordered" id="tblKontoauszug">
<thead>
<tr>
<th data-sortable="#sortable" data-sorter="dateSorter">Buchungsdat.</th>
<th data-sortable="#sortable">Belegnr.</th>
<th data-sortable="#sortable">BA</th>
<th data-sortable="#sortable" data-sorter="betragSorter">Betrag</th>
<th data-sortable="#sortable">Buchungstext</th>
<th data-sortable="#sortable">Gegenkontoart</th>
<th data-sortable="#sortable">Gegenkonto</th>
<th data-sortable="#sortable">Bezeichnung</th>
</tr>
<tr class="info text-bold">
<td>
#if ( Model.Zeilen.Count() > 0 )
{
<span>#Model.Zeilen.Min(b => b.Buchungsdatum).ToShortDateString()</span>
}
</td>
<td colspan="2">Anfangsbestand</td>
<td class="text-right">#Model.Anfangsbestand.ToString("N")</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</thead>
<tfoot>
<tr class="info text-bold">
<td>
#if ( Model.Zeilen.Count() > 0 )
{
<span>#Model.Zeilen.Max( b => b.Buchungsdatum ).ToShortDateString()</span>
}
</td>
<td colspan="2">Endbestand</td>
<td class="text-right #( Model.Endbestand < 0 ? "negative" : "")">#Model.Endbestand.ToString( "N" )</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
<tbody>
#foreach ( var zeile in Model.Zeilen )
{
<tr>
<td>#zeile.Buchungsdatum.ToShortDateString()</td>
<td>#zeile.Belegnummer</td>
<td title="#zeile.BelegartText">#zeile.Belegart</td>
<td class="text-right #( zeile.Betrag < 0 ? "negative" : "")">#zeile.Betrag.ToString("N")</td>
<td>#zeile.Buchungstext</td>
<td>#zeile.Gegenkontoart</td>
<td>#zeile.Gegenkonto</td>
<td>#zeile.Bezeichnung</td>
</tr>
}
</tbody>
</table>
</div>
You can customize content in the footer by adding the data-footer-formatter attribute to the column you want to add the footer to and setting that attribute equal to a defined javascript function. Here's an example:
HTML:
<table data-toggle="table" data-show-footer="true" data-footer-style="footerStyle" data-show-columns="true">
<thead>
<tr>
<th data-sortable="true" data-footer-formatter="totalText">Name</th>
<th data-sortable="true" data-footer-formatter="carsSum"># Cars</th>
</tr>
</thead>
<tbody>
<tr>
<td>Johnny</td>
<td>2</td>
</tr>
<tr>
<td>Zack</td>
<td>3</td>
</tr>
<tr>
<td>Timmy</td>
<td>2</td>
</tr>
</tbody>
</table>
Javascript:
function totalText(data) {
return 'TOTAL';
}
function carsSum(data) {
return '7';
}
function footerStyle(value, row, index) {
return {
css: { "font-weight": "bold" }
};
}
Notice I'm not using <tfoot> at all here. That is because <tfoot> won't work with the show columns dropdown list but this will (if I were to use the data-show-columns="true" attribute on the <table> element as I did in the example above). You can also style the footer using the data-footer-style attribute. In my example, I'm making all text in the footer bold.
You can see the code in action here: https://jsfiddle.net/3mou92px/9/