I am currently working on my app. I am using vue v2
I'm trying to create a dynamic table where I can add rows and Sub rows on button click.
Currently i can insert row without problem but if 1 cell has long text that took 2 rows it messed up
I am trying to achieve this:
Here is my current result:
<button #click="addMe">add row</button>
<table>
<thead>
<tr title="first">
<th style="width:50px">cell1</th>
<th style="width:150px">cell2</th>
<th>cell3</th>
<th>cell4</th>
<th>cell5</th>
<th>cell6</th>
<th>cell7</th>
<th>cell8</th>
<th>cell9</th>
<th>cell10</th>
</tr>
</thead>
<tbody>
<tr v-for="item in data" :key="item.id">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.score }}</td>
<td>{{ item.profile }}</td>
<td class="new-td">
<tr v-for="item in list" :key="item">
<td>
row1
superlongtextcell5
</td>
</tr>
</td>
<td class="new-td">
<tr v-for="item in list" :key="item">
<td>
row1
cell6
</td>
</tr>
</td>
<td class="new-td">
<tr v-for="item in list" :key="item">
<td>
row1
cell7
</td>
</tr>
</td>
<td class="new-td">
<tr v-for="item in list" :key="item">
<td>
row1
cell8
</td>
</tr>
</td>
<td class="new-td">
<tr v-for="item in list" :key="item">
<td>
row1
cell9
</td>
</tr>
</td>
<td class="new-td">
<tr v-for="item in list" :key="item">
<td>
row1
cell10
</td>
</tr>
</td>
</tr>
</tbody>
</table>
data() {
return {
list: [1],
data: [
{ name: "row1 cell1" },
{ name: "row2 cell1" },
{ name: "row3 cell1" },
{ name: "row4 cell1" },
{ name: "row5 cell1" }
]
}
},
methods: {
addMe() {
this.list.push(1);
}
}
is it possible to do?
thank you
I don't think the problem lies in Vue, you may just have to vertically align the cells or whatever you prefer and clean up the HTML.
Vertical align
Replace vertical-align:bottom with vertical-align:top here to see:
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_td_valign_css
Use table for extra tr tags
You are mixing td and tr in an incorrect way. A tr tag may never be inside a td tag.
<td class="new-td">
<tr v-for="item in list" :key="item">
<td>
row1
superlongtextcell5
</td>
</tr>
</td>
If you need the rows for layout reasons, you should put a table inside the table:
<td class="new-td">
<table>
<tr v-for="item in list" :key="item">
<td>
row1
superlongtextcell5
</td>
</tr>
</table>
</td>
You can give the table inside the table a design with no borders, margins or paddings and that will create as many rows within the cell as you like.
thank you for you suggestion, i refactor it as per my need
i can achieve it by putting new table inside outer table
<table>
<thead>
<tr title="first">
<th>cell1</th>
<th>cell2</th>
<th>cell3</th>
<th>cell4</th>
<th>cell5</th>
<th>cell6</th>
</tr>
</thead>
<tbody>
<tr v-for="item in data" :key="item.id">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.score }}</td>
<td>{{ item.profile }}</td>
<template>
<table>
<td>vertically-align1</td>
<td>vertically-align2</td>
</table>
</template>
</tr>
</tbody>
</table>
Related
I have a table , when I will click on any of row when a new table should be stretched under the same . I tried to use accordian of ngx-bootrap but I failed.
Basically I need a expandable table inside table. When I will click to any of row I will call a service which will give data for expanding table.
Use this code to get the same table.
sample.component.html
<table class="table">
<tbody>
<ng-container *ngFor="let item of topItem; let i = index">
<tr>
<td width="5%" (click)="toggle(item, i)">
<i aria-hidden="true" class="fa fa-{{ i }}-icon" [ngClass]="{'fa-expand-icon': visible,'fa-compress-icon': !visible}"
></i>
</td>
<td width="20%">{{ item.Name }}</td>
<td width="15%">{{ item.mobile }}</td>
</tr>
<tr class="d-none row-num-{{ i }}">
<td *ngIf="showTable" colspan="2">
<div class="row">
<table class="table">
<tbody>
<tr *ngFor="let item of subsItem; let i = index">
<td>sample data</td>
<td>sample data</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</ng-container>
</tbody>
</table>
Use typescript file sample.component.ts
toggle(item, index) {
let selector = `.row-num-${index}`;
document.querySelector(selector).classList.toggle('d-none');
this.showTable = true;
}
I am generating a very simple table by binding a table to an array. And I use the contenteditable="true" so I can edit each cell data on the client side. Here is my code:
<table class="table">
<tr>
<th>Id</th>
<th>Value</th>
<th></th>
</tr>
<tr *ngFor="let item of keys">
<td>{{ item.id }}</td>
<td contenteditable="true">
{{ item.Value }}
</td>
<td>
<button type="button" (click)="printContent()" class="btn btn-primary">Print</button>
</td>
</tr>
</table>
How can I detect the text changes on the cell that has contenteditable set to true
I need to create a toggle button for my table (to show/hide) more details of selected row.
Given this is my table:
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr *ngFor='let c of companies'>
<td><button id="{{c.companyId}}" (click)="showDetail()">Details</button> </td>
<td>{{ c.company}}</td>
<td>{{ c.contact}}</td>
<td>{{ c.country }}</td>
</tr>
</table>
When I click on "Details" button, need to show details inline in the table. This is kind of master detail grid approach in Kendo Grid. Any better approach using Angular2 & typescript to show details in easy way?
A small change from birwin's answer, as you cannot use template here without a directive, so use ng-container instead.
<ng-container *ngFor='let c of companies'>
<tr>
<td><button id="{{c.companyId}}" (click)="c.details = !c.details">Details</button> </td>
<td>{{ c.company}}</td>
<td>{{ c.contact}}</td>
<td>{{ c.country }}</td>
</tr>
<tr *ngIf="c.details">
<td>Details</td>
</tr>
</ng-container>
Demo
You could try something like this:
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<ng-container *ngFor='let c of companies'>
<tr>
<td><button id="{{c.companyId}}" (click)="c.details = !c.details">Details</button> </td>
<td>{{ c.company}}</td>
<td>{{ c.contact}}</td>
<td>{{ c.country }}</td>
</tr>
<tr *ngIf="c.details">
<td>Details go here</td>
<td>More details</td>
<td>More details</td>
</tr>
</ng-container>
</table>
This my table data in html format:
<table>
<thead>
<form id="filterForm">
</form>
</thead>
<form id="studentsForm">
<tbody>
<tr class="sorted">
<td><span class="selected">WAHEED</span></td>
</tr>
<tr class="sorted">
<td><span class="selected">DON</span></td>
</tr>
<tr class="sorted">
<td><span class="rejected">JACK</span></td>
</tr>
<tr class="sorted">
<td><span class="selected">MARK</span></td>
</tr>
<tr class="sorted">
<td><span class="rejected">GATEES</span</td></tr>
</tbody>
</form>
</table>
This is the sorting javascript after ajax filter response.
var rows = document.querySelectorAll('table tbody tr.sorted');
for (i = 0; i < rows.length; i++) {
if (rows[i].querySelector('span.rejected')) {
rows[i].closest('tbody').appendChild(rows[i]);
}
}
SO when the sorting is done the students will be like this all selected on top and not selected on the bottom:
<tbody>
<tr>
<td><span class="selected">WAHEED</span></td>
</tr>
<tr>
<td><span class="selected">MARK</span></td>
</tr>
<tr>
<td><span class="selected">DON</span></td>
</tr>
<tr>
<td><span class="rejected">JACK</span></td>
</tr>
<tr>
<td><span class="rejected">GATEES</span></td>
</tr>
</tbody>
My issue is when i submit the form data with out soring the data is going fine But when i submit the form with Sort it the serialize of form is not working inside the for i have this feild for every <tr>
<input type="text" class="overrideStudentcomment" name="comment[<?php echo $gdScoreData['student_pid']; ?>]">
I think there is an issue in sorting unable to rectify it. may be the append is being done out side of form
can anyone help me out..?
I usually don't use form inside a table beacuse it will not work. If i want to redirect me somewhere I use the a tag.
Example:
#foreach($data as $card)
<tr style="text-align: center;">
<td>{{ $card -> id }}</td>
<td>{{ $card -> cardType }}</td>
<td>{{ $card -> cardValue }} RON</td>
<td>{{ $card -> createdBy }}</td>
<td>{{ $card -> created_at }}</td>
<td>
<form action="to somewhere">
<button type="submit">Submit</button>
</form>
</td>
#endforeach
Instead of this, use this :
#foreach($data as $card)
<tr style="text-align: center;">
<td>{{ $card -> id }}</td>
<td>{{ $card -> cardType }}</td>
<td>{{ $card -> cardValue }} RON</td>
<td>{{ $card -> createdBy }}</td>
<td>{{ $card -> created_at }}</td>
<td>
<a class="icon pencil-lg-icon" href="{{ route ( 'admin.catalog.giftcards.edit', $card->id ) }}" style="color: white; padding: 8px 10px;"></a>
<a class="icon trash-icon" href="{{ route ( 'admin.catalog.giftcards.delete', $card->id ) }}" style="color: white; padding: 8px 10px;"></a>
</td>
#endforeach
Or you can try this
#foreach($data as $card)
// Outside the table
<form action="to somewhere" id="idform"></form>
<tr style="text-align: center;">
<td>{{ $card -> id }}</td>
<td>{{ $card -> cardType }}</td>
<td>{{ $card -> cardValue }} RON</td>
<td>{{ $card -> createdBy }}</td>
<td>{{ $card -> created_at }}</td>
<td>
<button type="submit" form="idform">Submit</button>
</td>
#endforeach
I hope i helped you.
Helo,
i have a table with groupsand i want to know how i can collapse categories in my table
Plunker
My HTML:
<table border=1>
<thead>
<tr>
<th>Name</th>
<th>Gender</th>
</tr>
</thead>
<tbody ng-repeat="group in groups">
<tr>
<td style=" background-color: #006DCC;color: white;" colspan="2">{{group.name}}</td>
</tr>
<tr ng-repeat="member in group.members">
<td>{{ member.name }}</td>
<td>{{ member.age }}</td>
</tr>
</tbody>
</table>
Just wire in a variable to toggle it with ng-hide:
<tr>
<td style=" background-color: #006DCC;color: white;" colspan="2" data-ng-click="hideGroup = !hideGroup">{{group.name}}</td>
</tr>
<tr ng-repeat="member in group.members" data-ng-hide="hideGroup">
<td>{{ member.name }}</td>
<td>{{ member.age }}</td>
</tr>
Updated plunker: http://plnkr.co/edit/ABJ9It8qSqkPGzpYNyMp?p=preview