I would like to sort specific columns of a table using Angular PrimeNG component. I added the following code based on the documentation but isn't working as expected. https://www.primefaces.org/primeng/table/sort
<p-table [value]="tablename" [paginator]="true" [columns]="cols" [rows]="10">
<ng-template pTemplate="header" let-columns>
<tr>
<th>Heading1</th>
<th pSortableColumn="name">Heading2<p-sortIcon field="name"></p-sortIcon></th>
<th pSortableColumn="duedate">Heading3<p-sortIcon field="duedate"></p-sortIcon></th>
<th pSortableColumn="amount">Heading4 <p-sortIcon field="amount"></p-sortIcon></th>
<th pSortableColumn="username">Heading5<p-sortIcon field="username"></p-sortIcon></th>
<th>Heading6</th>
</tr>
</ng-template>
Out of these 6 headers, I am performing a sort on 4 columns, some of them work as expected but some don't. I am not sure what I am missing here. Is it because of pagination? Any help is greatly appreciated. Thank you in advance.
Related
I have a table where its second column consists of multiple subheaders. For each row in the table, its data under the second column can consist of multiple rows. I’m having trouble syncing those multiple rows under the subheaders.
http://jsfiddle.net/jkkvy86x/
<table>
<thead>
<tr>
<th>col 1</th>
<th colspan="3">col2</th>
</tr>
<tr>
<th></th>
<th>h1</th>
<th>h2</th>
<th>h3</th>
</tr>
</thead>
<tbody>
<tr>
<td>row1</td>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
<td>data5</td>
<td>data6</td>
</tr>
<tr>
<td>row2</td>
<td>data1</td>
<td>data2</td>
<td>data3</td>
</tr>
</tbody>
</table>
For row1, I want data4, data5, data6 to also be under h1, h2, h3, respectively.
I'm doing this in AngularJS/Bootstrap so the data/formatting is important. I don't think adding another row with a blank data for its first column would work although I'm open to solutions.
This is not angular. BTW, can you use <br/>?
I was working on a plnkr: http://plnkr.co/edit/XNQPnHM1z58XB5usioZA?p=preview
But with the structure I can do a better suggestion.
I'm having an issue where lining up a table isn't working properly and I was wondering if anyones dealt with something like this before. I looked it up, but couldn't find anything addressing it. I'm using AngularJS and nested ng-repeats which is why I'm having some trouble with this (and need to nest them inside a table). My code is below:
<table class="table table-condensed table-hover table-responsive">
<thead><tr>
<th class="col-sm-4">1</th>
<th class="col-sm-3">2</th>
<th class="col-sm-3">3</th>
</tr></thead>
<tbody ng-repeat="blah in blah">
<tr ng-repeat="blah2 in blah">
<td>......</td>
</tr>
</tbody>
<!--This is the end of "Table 1" in the diagram below-->
<tbody ng-repeat="blah3 in blah4">
<tr ng-repeat="blah5 in blah6">
<td>.........</td>
</tr>
</tbody>
<!--This is the end of "Table 2" in the diagram below-->
</table>
I'm ending up with a result like this (note, I had to draw it due to the fact that the table data I'm using is sensitive information):
How can I pull the second tbody (the smaller one) next to the first?
Thanks
If I understood you correctly, you can simply use Bootstrap's columns as containers for your tables. For instance:
div.col-md-6
Will render two columns together until the screen collapse.
https://jsfiddle.net/DTcHh/11692/
Why not use the grid system of bootstrap ?
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
I don't know what you want to put in the table but you can probably put it into the grid system. link to doc
I'm using angular v1.3.15. I'm fetching data by hitting an api and passing it through the scope to the smart table like so
Here is the data format of the 'scope.rowCollection' as seen on the console
Data populates fine but When i'm trying to click on the table-header and sort it using st-sort method, the table values go blank clearly not sorting the column. Here is a view of my html snippet
Can you please tell me what exactly am i doing wrong. The moment i use my own data collection set(NOT hard coded) the whole table values go haywire.
I have a feeling its something to do with the variable names that i'm using on the angular end.
Any help is much appreciated....Thanks
Following your comment Nikhil. Use st-safe-src like so:
HTML
<table st-table="displayedCollection" st-safe-src="rowCollection">
<thead>
<tr>
<th st-sort="firstName">First Name</th>
<th st-sort="lastName">Last Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in displayedCollection">
<td>{{row.firstName}}</td>
<td>{{row.lastName}}</td>
</tr>
</tbody>
</table>
JS
app.controller('Ctrl', function($scope, service) {
$scope.displayedCollection = [];
service.all.then(function(list) {
$scope.rowCollection = list;
$scope.displayedCollection = list;
});
});
That's it.
If you are bringing in data asynchronously (from a remote database, restful endpoint, ajax call, etc) you must use the stSafeSrc attribute. You must use a seperate collection for both the base and safe collections or you may end up with an infinite loop.
Since I am getting data from restful service
st-table="displayedCollection" st-safe-src="rowCollection"
solve my issue
I think it is trying to sort on row.name in the way that you code it. Try the following to see if it works:
st-sort="employee.name"
I have a table that uses ng-repeat-start and ng-repeat-end every two table rows, like this:
<table>
<tr>... // other <tr>'s without ng-repeat
<tr ng-repeat-start="parameter in ctrl.parameters">
<td>Name</td>
<td>{{parameter.name}}</td>
</tr>
<tr ng-repeat-end>
<td>Value</td>
<td>{{parameter.value}}</td>
</tr>
</table>
This AngularJS application is deployed in Karaf as a Hawtio plugin and ng-repeat-start-end part doesn't work. Maybe because it's a plugin. Other table rows (without ng-repeat) works and shows the data binded. The odd thing is, a single entry for the label Name and Value still appears, but without the expression evaluated, whether there is or no data bound to the two element rows. What's the reason behind this?
I'm considering to use a custom directive in the js module instead of placing ng-repeat-start and ng-repeat-end in the html. Could someone show how to do this the custom directive way?
Thanks.
I have solved my own question. Karaf's Hawtio uses AngularJS version 1.1.5 (as of this writing), which do not have ng-repeat-start and ng-repeat-end yet. So, what I did is to enclose the repeating two rows in another <tbody> (multiple <tbody>s is working in HTML5) and put ng-repeat directive there. Like this:
<tbody>
.
.
.
</tbody>
<tbody ng-repeat="entry in data.entries">
<tr>
<td>Name</td>
<td>{{entry.name}}</td>
</tr>
<tr>
<td>Value</td>
<td>{{entry.value}}</td>
</tr>
</tbody>
angular-tablesort is saving me a lot of time, but i'm hitting a bug where I can't get the header to become sortable even though I am following the examples and adding the classes. My code looks like this:
<table class="table" ts-wrapper>
<thead>
<tr>
<th class="tablesort-sortable" ts-criteria="Name|lowercase" ts-default>Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items" ts-repeat>
<td>{{item.data.title}}</td>
</tr>
</tbody>
</table>
Solved!
As I was working through how best to present this to you guys I realized that this was an RTFM problem. I was confused by the fact that the example matches the ts-criteria with the div contents and didn't match the ng-repeat contents fully. angular-table actually lets you pass in item.data.title or data.title to get a sortable table.
A little embarrassing, but I'm still going to post this in case someone else comes across the same issue. This has nothing to do with bootstrapped angular applications, which was my first hunch. Changed the title to be more generic (from Angular-tablesort breaks when angular is bootstrapped to Angular-tablesort breaks).