I'm trying to hide whole column with all elements in that column when the checkbox is clicked. I'm wondering what's the best approach to solve that using Angular.
<table class="table">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Email</th>
<th scope="col">Date</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let user of Items" >
<td>{{user.Name}}</td>
<td>{{user.Email}}</td>
<td>{{user.Date}}</td>
</tr>
</tbody>
</table>
Above the table I have 3 checkboxes:
Name | Email | Date
I want to press one of them and then whole column disappears including <th> element and <td> element.
What could be the best idea for this problem?
To hide columns when a checkbox is selected.
In your .ts create 3 variables set to true for each column.
showName = true;
showEmail = true;
showDate = true;
in your respective checkboxes you need to add checked and change calls for each and match it to the 3 booleans above:
<input type="checkbox" [checked]="!showName" (change)="showName=!showName"/>
<input type="checkbox" [checked]="!showEmail" (change)="showEmail=!showEmail"/>
<input type="checkbox" [checked]="!showDate " (change)="showDate =!showDate "/>
And then add *ngIf in each related th and td for example for the name td and th:
<th scope="col" *ngIf="showName">Name</th>
<td *ngIf="showName">{{user.Name}}</td>
declare class
export class ColumnVisible{
public nameVisible:boolean=true;
public emailVisible:boolean=true;
public dateVisible:boolean=true;
constructor(){}
}
call it in component
columnVisible:ColumnVisible;
in costructor initialize it with
this.columnVisible=new ColumnVisible();
inhtml write as class and give click event
<input [(ngModel)]="columnVisible.nameVisible" type="checkbox"(change)="columnVisible.nameVisible=!columnVisible.nameVisible" />
<input [(ngModel)]="columnVisible.emailVisible" type="checkbox"(change)="columnVisible.emailVisible=!columnVisible.emailVisible" />
<input [(ngModel)]="columnVisible.dateVisible" type="checkbox"(change)="columnVisible.dateVisible=!columnVisible.dateVisible" />
<table class="table">
<thead>
<tr>
<th ngIf="columnVisible.nameVisible" scope="col">Name</th>
<th ngIf="columnVisible.emailVisible" scope="col">Email</th>
<th ngIf="columnVisible.dateVisible" scope="col">Date</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let user of Items" class="{{user.IsShown}}" >
<td ngIf="columnVisible.nameVisible" >{{user.Name}}</td>
<td ngIf="columnVisible.emailVisible">{{user.Email}}</td>
<td ngIf="columnVisible.dateVisible">{{user.Date}}</td>
</tr>
</tbody>
</table>
Here's a little bit of code. stackblitz. You just need three different models for different checkboxes or use 1 property but with different types
Related
I have designed dynamic input matrix table. In that need to add select all option for each column. How to do that?
Here code:
<table [ngClass]="{'isDisplay': hasACLAccess}" class="responsive-table-input-matrix" id="matrixTable">
<thead>
<tr>
<th>Features/Roles</th>
<th *ngFor="let column of TableConfiguration.columns;">
{{column.title}}
<th>
</tr>
</thead>
<tbody *ngFor=" let feature of featureNameList">
<tr>
<td>{{feature.name}}</td>
<td *ngFor="let a of feature.roles">
<input name="access" [(ngModel)]="a.access" type="checkbox"
(change)="accessArrayList($event)">
</td>
</tr>
</tbody>
</table>
Thanks in advance.
In this, if checkbox of HR checked, then all checkboxes belongs to HR column should select, likewise for unchecked state also.
I have implemented a responsive table with the help of footable jquery library. Now i have placed input tags, select box in it. Footable js removes all these tags and make it an empty <td>.
<table id="accordion-example-1" class="table" data-paging="true" data-filtering="false" data-sorting="false">
<thead>
<tr>
<th></th>
<th data-breakpoints="xs">Date Created</th>
<th>Source</th>
<th>Type</th>
<th data-breakpoints="xs">Status</th>
<th data-breakpoints="xs sm"> </th>
<th data-breakpoints="xs sm md" > </th>
<th data-breakpoints="xs sm md"> </th>
</tr>
</thead>
<tbody>
<tr data-expanded="true">
<td></td>
<td>6/11/16</td>
<td>Mr. Cooper - Request Info</td>
<td>Buying</td>
<td>
<select class="nobrdr">
<option>Offer</option>
</select>
</td>
<td><input type="text" class="nobrdr" placeholder="Value"/></td>
<td><input type="text" class="nobrdr" placeholder="Date" /></td>
<td><button class="nobrdr m-l-1" type="button" ><b>+ Add</b></button><br>Forms/Docs</td>
</tr>
</tbody>
</table>
jquery function :
$(function($){
$('#accordion-example-1,#accordion-example-2').footable({
});
});
You need to change the data type of the column(s) where the form elements are to "html", otherwise FooTable assumes the column contains only text and formats it as such - i.e. it will strip out all HTML markup from the cell contents, and not just form elements.
For example in your case:
<th data-type="html" data-breakpoints="xs">Status</th>
will tell it to respect HTML markup within any cells in the Status column.
The possible column types supported are "text", "number", "html" and "date". "text" is the default if no type is specified.
For more detailed discussion I suggest you read the guide at http://fooplugins.github.io/FooTable/docs/getting-started.html and find the "Column options" section.
I have quite big table with many columns. Many columns have attribute "ng-show". Also i have created a functionality which hides or displays some table columns (with "ng-show").
When i trying to apply table columns visibility change ir takes 2-3 seconds for angular to update the table. Is it possible to add loading spinner on the table while it happens?
Simplified table structure:
<table class="classesList" id="tableId">
<thead>
<tr>
<th ng-show="tableColumns[0].show" >
<span>Header1</span>
</th>
<th ng-show="tableColumns[1].show" >
<span>Header1</span>
</th>
<th ng-show="tableColumns[2].show" >
<span>Header1</span>
</th>
...
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rows">
<td ng-show="tableColumns[0].show">
<span>Data1</span>
</td>
<td ng-show="tableColumns[1].show">
<span>Data2</span>
</td>
<td ng-show="tableColumns[2].show">
<span>Data3</span>
</td>
...
</tr>
</tbody>
I started using datatables for my tables.
I now have a table with customers.
The first row is the table header. The second row is for a button to add a new customer.
The rest of the rows is the list of customers.
I want datatables to sort everything but not the "new customer" row. How to lock this row / exclude it from sorting?
Tried this:
<table class="muitable" border="0" cellpadding="0" cellspacing="3" id="customertable">
<thead>
<tr>
<th>
</th>
<th>
</th>
<th class="muitable bluehover hand" >
Name
</th>
<th class="muitable bluehover hand" >
Created
</th>
<th class="muitable bluehover hand" >
Status
</th>
</tr>
<tr>
<th width="16">
</th>
<th class="muitable hovernextcell" onclick="newcustomer()">
<img src="/common/images/plus.png" width="16" height="16" class="hand">
</th>
<th class="muitable bluecell">
New customer
</th>
<th colspan="2"> </th>
</tr>
</thead>
<tbody>
--contents--
</tbody>
</table>
The problem that arises now is that the "sorting buttons" are all over the place. When there is a value in the cell on the second row, this becomes the button, if theres not, it uses the first row for making a sorting button.
How to tell datatables to leave the second th row alone and just use the first row as headers?
You can put the "Add Customer" button in the header. Something like this:
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>etc</th>
</tr>
<tr>
<th colspan="3">
<button>Add Customer</button>
</th>
</tr>
</thead>
Now dataTables will not sort the row.
jsFiddle: http://jsfiddle.net/Fd3ED/
Fixed it by by using two header rows and using the option http://datatables.net/ref#bSortCellsTop
I have a table which I search (show/hide rows) using quicksearch jQuery plugin. In same table I have to show/hide all the rows where checkbox (first column in table) is checked, if user click toggle row button ( button is outside table).
When I search data in table the hidden rows (checkbox checked) become visible. How can I achieve both functionality.
Where all the hidden rows (where checkbox is checked and user has clicked 'toggle rows') will remain hidden when user search data in table and vice versa.
Following is my jQuery:
$(function () {
$('input#gridSearch').quicksearch('#<%=gvActivities.ClientID %> tbody tr');
$('.showhiderows').click(function () {
$('#<%=gvActivities.ClientID %>').find("input[type=checkbox]:checked").closest('tr').toggle();
});
});
Checkbox is the first column in GridView.
Button to show/hide selected rows:
<input type="button" id="btnShowHide" class="showhiderows" value="Toggle Selected Rows" />
Table Structure, Just header and first row:
<table class="gvv1" id="MainContent_gvActivities">
<tr style="background-color: buttonface;">
<th scope="col">
</th>
<th scope="col">
Cluster
</th>
<th scope="col">
Activity
</th>
<th scope="col">
Data
</th>
<th scope="col">
Target
</th>
<th scope="col">
Achieved
</th>
</tr>
<tr>
<td>
<input id="longIdGeneratedByCode" type="checkbox"/>
</td>
<td style="width: 50px;">
ER.
</td>
<td style="width: 250px;">
Establishment
</td>
<td style="width: 460px;">
Number of
</td>
<td style="width: 70px;">
Text
</td>
<td style="width: 70px;">
Text2
</td>
</tr>
</table>
I think I can solve it,
$("#showhidetr").on("click", function(){
if($(this).is(':checked')){
$("#myTable").find("input[type='checkbox']").each(function(){
if($(this).is(':checked')){
$(this).parent().parent().hide();
}
})
} else {
$("#myTable").find("input[type='checkbox']").each(function(){
if($(this).is(':checked')){
$(this).parent().parent().show();
}
})
}
})
<input type='checkbox' id="showhidetr">
<table id="myTable">
<tr>
<td><input type='checkbox'></td>
<td>Mary</td>
</tr>
<tr>
<td><input type='checkbox'></td>
<td>John</td>
</tr>
<tr>
<td><input type='checkbox'></td>
<td>Michael</td>
</tr>
</table>
When you click showhidetr checkbox, the script looks for a checked checkbox in the table and hide its tr.