I have this table:
<table class="table table-striped">
<thead>
<tr>
<td *ngFor="let col of columns">{{col.descr}}</td>
</tr>
</thead>
<tbody>
<tr *ngFor="let row of rows">
<td *ngFor="let col of columns">
<input type="checkbox" [(ngModel)]=row[col.name] (ngModelChange)="changeCheck($event)"/>
{{row[col.name]}}
</td>
</tr>
</tbody>
</table>
<div>
<button mat-raised-button (click)="addColumn()"> Add column </button>
</div>
and I need to add a column enter data and save.
How can insert a new column using html and typescript?
Related
I have a Html Table
<div class="clearfix">
<table class="table table-contract-module">
<thead>
<tr>
<th>Group Name</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="cli in creativeGroupMarket">
<td>{{cli.GroupName}}</td>
<td>
<a>Edit</a>
<a ng-click="deleteCreativeMarket(cli.GroupID)">Delete</a>
</td>
</tr>
</tbody>
</table>
</div>
The Table Format Looks Like
Now When I Click Edit Button here I need user to be able to edit Group Name in textbox and Edit button should be replaced by Update.
After I Click Edit button on 1st row of the table the table should Look Like :-
How Can I do this?
<tr ng-repeat="cli in creativeGroupMarket">
<td ng-show="cli.edit_mode">{{cli.GroupName}}</td>
<td ng-show="!cli.edit_mode"><input ng-model="cli.GroupName"></td>
<td>
<a ng-click=cli.edit_mode=true>Edit</a>
<a ng-click="deleteCreativeMarket(cli.GroupID)">Delete</a>
</td>
</tr>
I've got a table that I need three different links to show up on the specific row that the mouse is hovering over. The links are "View", "Edit", and "Trigger Now".
I need this event to happen only on the sessions table.
Here's my current HTML:
<div>
<h1>Manage Workflows</h1>
</div>
<div class="tablez">
<table class="table table-hover" id = "groups">
<thead>
<tr>
<th scope="col">Groups</th>
</tr>
</thead>
<tbody>
<tr *ngFor = "let row of rows" (click) = "onRowClick(row.id)">
<td class="data">{{row.group}}</td>
</tr>
</tbody>
</table>
<table class="table" id = "sessions">
<thead>
<tr>
<th scope="col">Sessions</th>
<th scope="col" id = "trigger">Next Trigger</th>
</tr>
</thead>
<tbody>
<tr *ngFor = "let row of tableTwo">
<td scope="row">{{row.session}}</td>
<td scope="row" id = "trigger" >{{row.nextTrigger}}</td>
</tr>
</tbody>
</table>
</div>
You can use mouseover event of the angular
<tr *ngFor = "let row of tableTwo" (mouseover)="showLinks=true" (mouseout)="showLinks=false" >
<td scope="row">{{row.session}}</td>
<td scope="row" id = "trigger" >{{row.nextTrigger}} </td>
<td *ngIf="!showLinks" scope="row"> View Edit Trigger Now links </td>
</tr>
I have the following table:
<div>
<table class="table-alignment table table-striped">
<tr class="text text-center">
<th>Symbol</th>
<th>Quantity</th>
<th>Timestamp</th>
<th>Amount</th>
</tr>
<div *ngIf="loading == true" class="loader loader-alignment"></div>
<div *ngIf="loading == false">
<tr *ngFor="let s of stats" class="text text-center" [ngClass]="{'text-success' : s.transaction_type=='BUY', 'text-danger' : s.transaction_type=='SELL'}">
<td>{{s.tradingsymbol | formatSymbol}}</td>
<td>{{s.filled_quantity}}</td>
<td>{{s.order_timestamp}}</td>
<td>{{s.average_price}}</td>
</tr>
</div>
</table>
</div>
The problem here is that the entire tr is rendered in 1st column. How do i fix this?
Consider using the basic HTML elements thead and tbody.
Also, for example you don't have to write loading == false, write !loading instead.
<div>
<table class="table-alignment table table-striped">
<thead>
<tr class="text text-center">
<th>Symbol</th>
<th>Quantity</th>
<th>Timestamp</th>
<th>Amount</th>
</tr>
</thead>
<div *ngIf="loading" class="loader loader-alignment"></div>
<tbody *ngIf="!loading">
<tr *ngFor = "let s of stats" class = "text text-center" [ngClass]="{'text-success' : s.transaction_type=='BUY', 'text-danger' : s.transaction_type=='SELL'}">
<td>{{s.tradingsymbol | formatSymbol}}</td>
<td>{{s.filled_quantity}}</td>
<td>{{s.order_timestamp}}</td>
<td>{{s.average_price}}</td>
</tr>
</tbody>
</table>
</div>
I have a table in which the last column has a clickable arrow to display a nested table underneath.
<table class="table table-hover table-striped">
<thead>
<tr>
<th>1</th>
<th>2</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr *ngFor="let dData of dDatas;>
<td>{{dData.Name}}</td>
<td>{{dData.Desc}}</td>
<td>
<div (click)="onClick()"><span class="glyphicon" [ngClass]="{'glyphicon-chevron-up': dcData.opendPanel , 'glyphicon-chevron-down': !dcData.opendPanel }"></span></div>
<div [hidden]="!dData.opendPanel">
//another table
</div>
</td>
</tr>
</tbody>
</table>
My problem is the inner table comes in the last <td> and the formatting isn't correct. I want to make the inner table to appear in a new row and span over the width of the outer table.
If I understand you correctly, you should utilise <ng-container>. This allows you you include multiple <tr> tags in each iteration of your for loop, giving your inner table a whole row and the ability to span the width of the table.
<ng-container *ngFor="let dData of dDatas>
<tr >
<td>{{dData.Name}}</td>
<td>{{dData.Desc}}</td>
<td>
<div (click)="onClick()">
<span class="glyphicon" [ngClass]="{'glyphicon-chevron-up': dcData.opendPanel , 'glyphicon-chevron-down': !dcData.opendPanel }"></span>
</div>
</td>
</tr>
<tr>
<td colspan="3">
<div [hidden]="!dData.opendPanel">
//another table
</div>
</td>
</tr>
</ng-container>
<ng-container> is a logical container that can be used to group nodes but is not rendered in the DOM tree as a node.
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.