I am trying to make table in which there are two show/hide buttons for two columns say A and B.. button a and b separately are functioning properly but If i use both in table ... only one of them functions properly other doesn't do anything.. pls hlp me i am new to this
<table datatable="ng" class="row-border hover table table-condensed no-margin">
<thead>
<tr>
<th>#</th>
<th>Username</th>>
<th>Profile</th>
<th>Points</th>
<th>Forcasts Won/Lost</th>
<th>Invites</th>
<th>Referrals</th>
<th>Activity</th>
<th>Most Used Redeemption Gateway</th>
<th>Most Read FAQ</th>
<th>Promo Codes used</th>
<th>Suspend/Unsuspend</th>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="person in showCase.persons">
<td>{{person.id}}</td>
<td>{{person.uname}}</td>
<td>
<button type="button" class="btn btn-primary" ng-if="person.Profexpanded" ng-click="person.Profexpanded = false;person.Invexpanded=false">Hide</button>
<button type="button" class="btn btn-primary" ng-if="!person.Profexpanded" ng-click="person.Profexpanded = true;person.Invexpanded=false">Show</button>
</td>
<td>{{person.points}}</td>
<td>{{person.forcasts}}</td>
<td style="padding:5px">
<table><tbody>
<tr><td><b>sent: </b></td> <td>{{person.invites[0].sent}}</td></tr>
<tr><td><b>accepted:</b></td> <td>{{person.invites[0].accepted}}</td></tr>
</tbody></table>
</td>
<td>{{person.referrals}}</td>
<td>
<button type="button" class="btn btn-primary" ng-if="person.Invexpanded" ng-click="person.Invexpanded = false;person.Profexpanded = false">Hide</button>
<button type="button" class="btn btn-primary" ng-if="!person.Invexpanded" ng-click="person.Invexpanded = true;person.Profexpanded = false">Show</button>
</td>
<td>{{person.muredempt}}</td>
<td>{{person.mfaq}}</td>
<td>{{person.promocodes}}</td>
<td>{{person.isSuspended}}</td>
</tr>
<tr ng-if="person.Profexpanded" ng-repeat-end="">
<td class = "profile" colspan="5">
Hello A
</td>
</tr>
<tr ng-if="person.Invexpanded" ng-repeat-end="">
<td>Hello B</td>
</tr>
</tbody>
</table>
<!--end .card-body -->
</div>`
Maybe try ng-show instead ng-if <tr ng-show="person.Invexpanded" ng-repeat-end="">
Use
<tr ng-if="person.Profexpanded">
instead of
<tr ng-if="person.Profexpanded" ng-repeat-end="">
Related
This is my HTML code for my table to display list of users:
<table class="table m-table m-table--head-bg-metal">
<thead>
<tr>
<th>
Nom
</th>
<th>
Prénom
</th>
<th>
Email
</th>
<th>
Action
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Jhon
</td>
<td>
Stone
</td>
<td>
jhonStone#gmail.com
</td>
<td>
<button class="btn btn-outline-danger m-btn m-btn--icon btn-sm m-btn--icon-only m-btn--pill m-btn--air" (click)="onDisableUser()">
<i class="fa fa-close"></i>
</button>
</td>
</tr>
</tbody>
This is typescript method:
onDisableUser(){
//this is the method to disable the table row..
}
What I want is when I click () on the action button, the table row will be disabled.
Thanks in advance.
What do you mean with disable?
If you want to remove the list item do this on the html :
<table class="table m-table m-table--head-bg-metal">
<thead>
<tr>
<th>
Nom
</th>
<th>
Prénom
</th>
<th>
Email
</th>
<th>
Action
</th>
</tr>
</thead>
<tbody>
<tr *ngIf="!isDisable">
<td>
Jhon
</td>
<td>
Stone
</td>
<td>
jhonStone#gmail.com
</td>
<td>
<button class="btn btn-outline-danger m-btn m-btn--icon btn-sm m-btn--icon-only m-btn--pill m-btn--air" (click)="onDisableUser()">
<i class="fa fa-close"></i>
</button>
</td>
</tr>
</tbody>
</table>
And on the typescript:
isDisable = false;
onDisableUser(){
this.isDisable = true;
}
If you want to disable it with css use this in html:
<tr [ngClass]="{'disabled': isDisable}>
You can use the css method to disable the table row.
Set the disabled to true when clicked and set the class to the <tr> if disabled=true
.disable{
cursor: not-allowed;
}
<table>
<tr class="disable">
<td> akjsd </td>
</tr>
<tr >
<td> akjsd </td>
</tr>
</table>
isDisable = false;
onDisableUser(){
this.isDisable = true;
}
I'm attempting to return two tr elements from a single component v-design-row. I know vue requires the template elements to be wrapped in a div, but I cannot wrap them in a div because of the tag structure html tables require. When I add the second tr in the v-design-row component then vue doesn't render anything.
Can anyone suggest the best method for accomplishing this?
main.vue
<table class="table">
<thead>
<th>Image</th>
<th>Name</th>
<th>Description</th>
<th>Status</th>
<th>Order</th>
<th>Edit</th>
<th>Delete</th>
</thead>
<tbody v-for="catagory in catagories">
<v-catagory-row :catagory="catagory"></v-catagory-row>
<v-design-row v-for="design in catagory.designs" :design="design"></v-design-row>
</tbody>
</table>
v-design-row.vue
<template>
<tr>
<td><img :src="design.image_directory" :alt="design.name"></td>
<td>{{ design.name }}</td>
<td>
<button class="btn btn-secondary" type="button" data-toggle="collapse" :data-target="'#' + design.identifier" aria-expanded="false" :aria-controls="design.identifier">
<i class="fa fa-plus" aria-hidden="true"></i> Show
</button>
</td>
<td>
<div class="switch">
<input :id="'active'+design.id" v-model="design.active" class="btn-toggle btn-toggle-round-flat" type="checkbox">
<label :for="'active'+design.id"></label>
</div>
</td>
<td>
<button class="btn btn-secondary" type="button">
<i class="fa fa-caret-up" aria-hidden="true"></i>
</button>
<button class="btn btn-secondary" type="button">
<i class="fa fa-caret-down" aria-hidden="true"></i>
</button>
{{ design.sort_order }}
</td>
<td>
<button class="btn btn-secondary" type="button">
<i class="fa fa-pencil" aria-hidden="true"></i>
</button>
</td>
<td>
<button class="btn btn-secondary" type="button">
<i class="fa fa-trash" aria-hidden="true"></i>
</button>
</td>
</tr>
<tr>
<td class="p-0" colspan="7">
<div class="collapse" :id="design.identifier">
<div class="p-3">
{{ design.description }}
</div>
</div>
</td>
</tr>
</template>
You are allowed to group row using multiple <tbody> sections like this:
<table>
<thead>
<tr> ... </tr>
</thead>
<tbody>
<tr> ... </tr>
<tr> ... </tr>
</tbody>
<tbody>
<tr> ... </tr>
<tr> ... </tr>
</tbody>
</table>
You can use this in templates by using a <tbody> as the root element:
<template>
<tbody>
<tr> ... </tr>
<tr> ... </tr>
</tbody>
</template>
Since second tr in your v-design-row contains description of design, I'd suggest that this is whole element and it should occupy one row and have its own layout.
Alternatively, you can have a description separately and all other data in component.
Also, statement
vue requires the template elements to be wrapped in a div
is not quite correct. Template can have any root element while it is a single element. So you can have
<template>
<tr>
</tr>
</template>
or even
<template>
<tr v-if="condition == 1">
</tr>
<tr v-else-if="condition == 2">
</tr>
<tr v-else>
</tr>
</template>
You can use vue-fragment library. It allows you to have wrapper that wont actually be rendered.
https://www.npmjs.com/package/vue-fragment
I am trying to prepare a simple mark sheet [as an example to demonstrate my requirement]. Am planning to have a collapsible div which will render all the mark details once it is expanded.
<div class="well">
<table class="table table-bordered"
style="background:#fff; margin-bottom:10px;">
<tbody>
<tr class="inverse">
<th> ID</th>
<th colspan="2"> Name</th>
</tr>
<tr>
<td>1</td>
<td>ABC</td>
<td>
<a class="btn btn-primary" data-toggle="collapse" href="#ID_1"
aria-expanded="false" >
Hide/Unhide
</a>
</td>
</tr>
<tr>
<td colspan="3">
<div class="collapse" id="ID_1">
<div class="well">
<table class="table table-hover table-bordered" style="background:#fff; margin-bottom:10px;">
<thead>
<tr class="inverse">
<th>Subject</th>
<th>Mark</th>
</tr>
</thead>
<tbody>
<tr>
<td>Physics </td>
<td>100</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
<tr class="inverse">
<th> ID</th>
<th colspan="2"> Name</th>
</tr>
<tr>
<td>2</td>
<td>PQR</td>
<td>
<a class="btn btn-primary" data-toggle="collapse" href="#ID_2"
aria-expanded="false" >
Hide/Unhide
</a>
</td>
</tr>
<tr>
<td colspan="3">
<div class="collapse" id="ID_2">
<div class="well">
<table class="table table-hover table-bordered" style="background:#fff; margin-bottom:10px;">
<thead>
<tr class="inverse">
<th>Subject</th>
<th>Mark</th>
</tr>
</thead>
<tbody>
<tr>
<td>Chemistry</td>
<td>100</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
fiddle
But in this approach, when a section is not expanded, the row which encloses the collapsible div appears like a blank row in the table - which is quite misleading.
I am sure this is not the best way to render this sort of details.Would like to know what are the alternate UI options to render these details.
Use this CSS:
td[colspan="3"] {
padding: 0;
}
Fiddle
I have a table I decorated with bootstrap.
Here is the simple table view (collapsed).
Each table row has two horizontal sets of data. So the expanded view for each row shows up when the "Details" button is clicked. Here's the expanded view.
The first set of data of each row has 4 columns. While I'd like the second set of data of the same row to fully occupy the whole table width.
The problem is that the way I did it doesn't feel the best way to do it.
I pretty much used Angular loop construct to repeat the <tr>. I then embedded two tables per <tr> so that I can display the first data set in the first table and the expanded view in the second table. Clicking on the "Details" button shows the second set (table) of data of row.
<table class="table-hover table-condensed">
<!--<table class="table">-->
<thead>
<tr>
<th align="left" class="span2">Date</th>
<th align="left" class="span2">Title</th>
<th align="left" class="span2">Bill Total</th>
<th align="left" class="span4">Options</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="ibill in user.groups[0].bills | filter:query | orderBy:'date'">
<td colspan="4">
<table>
<tr>
<td class="span2">{{ ibill.billDate | date:'MM/dd/yyyy'}}</td>
<td class="span2">{{ ibill.title }}</td>
<td class="span2">${{ ibill.billTotal }}</td>
<td class="span4">
<!-- <a ng-click='deleteBill(ibill.id)'><i class="icon-trash "></i></a>
<i class="icon-pencil "></i>--> <a ng-click='deleteBill(ibill.id)' class="btn btn-mini" ng-init="ibill.isCollapsed = 'true'" ng-click="ibill.isCollapsed = !ibill.isCollapsed"><i class=" icon-trash"></i></a>
<i class="icon-edit"></i>
<a class="btn btn-mini" ng-init="ibill.isCollapsed = 'true'" ng-click="ibill.isCollapsed = !ibill.isCollapsed"><i class="icon-eye-open"></i> details</a>
<!--<a class="btn" ng-init="ibill.isCollapsed=' true'" ng-click="ibill.isCollapsed=! ibill.isCollapsed"><i class="icon-folder-open "></i> Details</a>-->
</td>
</tr>
</table>
<table>
<tr>
<td colspan="4">
<div collapse="ibill.isCollapsed">
<div>
<p ng-repeat="simplecost in ibill.billSimpleEntry.simpleUserIdAndLiableCost">{{simplecost.user.fName}} owes ${{simplecost.liableCost}}</p>
</div>
</div>
</td>
</tr>
</table>
</td>
<!--<td>{{ibill}}</td>-->
</tr>
<!-- <tr>
<td><div collapse="ibill.isCollapsed">
<div class="well well-large">Some content</div>
</div></td>
</tr>-->
</tbody>
</table>
I'm pretty much e
<table>
<thead></thead>
<tbody>
<tr>
<td></td>
</tbody>
</table>
Is it possible to do the same with a table-less design (eliminating two tables per row)
You could just use the colspan attribute on a td to achieve the same effect without the tables. Ex:
<table>
<tbody>
<tr> <!--normal row stuff-->
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan='4'><!--details stuff here--></td>
</tr>
</tbody>
</table>
In this example, the td with colspan='4' will be a single cell that is the same width as the 4 cells in the previous row.
I have three tables. When they are all filled with data (10 rows) they look fine. See picture
When, however, the max capacity (i.e. 10 rows) hasn't been reached, the tables gets centered.
I want to keep the alignment top as in the first picture and also the buttons on the bottom. Is there any simple style to do this? My HTML looks like this
<table width="100%">
<tr>
<td>
<table id="SomeTableContainer">
<tr>
<th>Name</th>
</tr>
</table>
<button id="prev1"><<</button>
<button id="next1">>></button>
<button id="create1">Create</button>
</td>
<td>
<table id="SomeOtherTableContainer">
<tr>
<th>Name</th>
</tr>
</table>
<button id="prev2"><<</button>
<button id="next2">>></button>
<button id="create2">Create</button>
</td>
<td>
<table id="OtherTableContainer">
<tr>
<th>Name</th>
</tr>
</table>
<button id="prev3"><<</button>
<button id="next3">>></button>
</td>
</tr>
</table>
Hi now add td valign="top"
As like this
<td valign="top">
or
Used in
css
td{
vertical-align:top;
}
Simply add this to your first TR:
<tr valign="top"></tr>
add style
td { vertical-align: top;}
try this
<td valign="top">
<table id="SomeOtherTableContainer">
<tr>
<th>Name</th>
</tr>
</table>
<button id="prev2"><<</button>
<button id="next2">>></button>
<button id="create2">Create</button>
</td>