mattiash / angular-tablesort Goto Github PK

Do you have any suggestion on how to trigger the same sorting, using a button separate from the table, as you would by clicking on the table headers? I didn't see anything similar in the demo.

Hey Mattiash,

I came a crossed another small bug and was wondering if I can get your opinion on it. I am using this directive for a fairly complex table and I needed to create additional filter buttons, so I added an angular OrderBy property to the ng-repeat, on top of the ts-repeat code that's already there for the directive.

Example code:
"< tr ng-repeat="parameter in parameters.response | orderBy:'Value':true | filter:paramquery" ts-repeat >"

This works perfectly in every browser except for Chrome. And chrome will render the results correctly if reverse=false, but once I try to sort with reverse=true, the sort order gets all mixed up. So for a test I removed the ts-repeat line from the code above and the sorting issue was fixed (though it broke the directive, I at least figured out what my issue was). That my new orderBy property is conflicting with the angular-tablesort directive in some way.

Do you have any suggestions on how to fix this? Is there a built-in orderBy variable in the directive that I should target instead of creating a new one?

Thanks again for all your help,
Steve

Hi

Foer some reason I cannot use the ts-repeat-start ts-repeat-end tags.

I get the following error:
Error: [$compile:uterdir] http://errors.angularjs.org/1.4.2/$compile/uterdir?p0=ts-repeat-start&p1=ts-repeat-end

And the relevant code is:

<table class="table table-condensed table-bordered table-striped" ts-wrapper>
    <thead>
        <tr>
            <th></th>
            <th ts-criteria="id">Transaction #</th>
            <th ts-criteria="completionDate|date">Date</th>
            <th ts-criteria="userId">User</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat-start="row in ctrl.exchangeTransactions | filter:ctrl.searchString" ts-repeat-start>
            <td>
              <button ng-if="row.expanded" ng-click="row.expanded = false">-</button>
              <button ng-if="!row.expanded" ng-click="row.expanded = true">+</button>
            </td>
            <td>{{row.id}}</td>
            <td ng-bind="row.completionDate | date"></td>
            <td>{{row.userId}}</td>
        </tr>
        <tr ng-if="row.expanded" ng-repeat-end=""  ts-repeat-end>
            <td colspan="4">We shall see this</td>
        </tr>
    </tbody>
</table>

Could you help me out here ?

Thanks

Hi, I was just wondering if would be possible to use this lib along with this library. I tried differnt things, but couldn't get it working. Any ideas?

Hi,
i just came across your lib. Works really nice, thanks!

Could you supply an example on how to default desc sort a column?

Cheers,
Daniel

Please if not implemented to considerate it as a new feature, thanks

Hi, is there an easy way to get access to the sorted data by tablesort module? From my understanding, the module will make a copy of the original collection and manipulate that copy. If the module can also provide a way to getSortedData(), that will be awesome

Heya,

Thanks for the lib, works well!!

I was wondering how you go about setting the ts-criteria to get UK date format sorting correctly?

dd/mm/yyyy is the format (25/12/2013) for example.

Cheers,

Is there a function I can call that is the equivalent of clicking one of the columns names?

For instance, clicking a button outside of the table could call the function to change which column the sorting is based on.

My use case is that I have a UI outside the table that changes what data the table contains and it makes more sense for some data to be sorted by one column and others by a different one. I'd like to programatically change which column the table is sorted by when the user clicks to change the table data.

Hi, ts-repeat directive thorws error when used with dirPagination's dir-paginate directive. Throws this error. cannot read property 'match' of undefined(line no 167). Seems like empty objet is sent to regex match.

Thanks for the effort btw,

logesh

It would be cool to add ability to save current order state in cookies and restore it after page refresh.

I'm using a simple text input as filter for my rows in the table.
The rows are filtered correctly with tablesort, but the temporary variable I use for counting filtered/total is empty now.

Example:

<input type="search" ng-model="search" placeholder="Filter"/>
<span>Count: ({{filtered.length}}/{{projects.length}})</span>
<tr ng-repeat="project in filtered = (projects | filter: search)" ts-repeat>...

filtered.length should give me the amount of rows left (It does without tablesort).

Intl.Collator should use numeric option when it is comparing numeric values. Now Intl.Collator casts numeric values to strings before comparison. I'm not sure if "numeric: true" works as expected with strings so maybe there should be two different collators

As soon as I add the ts-repeat attribute my data disappears. I'm using firebase and the data is loaded via AJAX.

Anyone seen this behaviour?

    <table class="table table-striped table-hover " id="player-list"  ts-wrapper=>
      <thead>
      <tr width="90%">
        <th><span class="glyphicon glyphicon-edit"></span></th>
        <th ts-criteria="playerJersey" ts-default>Jersey</th>
        <th ts-criteria="playerName">Name</th>
        <th ts-criteria="notes" >Notes</th>
      </tr>
      </thead>
      <tbody>
        <tr width="80%" ng-repeat="player in currentPlayers track by player.playerID "  ts-repeat>
          <td><span ng-click="editPlayer(player)" class="glyphicon glyphicon-edit"></span></td>
          <td>{{player.playerJersey}}</td>
          <td>{{player.playerName}}</td>
          <td>{{player.notes}}</td>
        </tr>
      </tbody>
    </table>

Is is possible to change sorting algorithm. I need to override javascripts default sorting to handle some special cases.

I think it's better if the pagination is an optional feature you can enable if you want instead of having to explicitly disable it when you don't want it.

I use ng-repeat in tbody (becouse my table have many nested layers), and when add ts-repeat, my rows show correct and sorting correct, but in top add row with 'No items' content.

Allow custom interpolation symbols.

var startSym = $interpolate.startSymbol();
var endSym = $interpolate.endSymbol();

https://docs.angularjs.org/api/ng/service/$interpolate
https://docs.angularjs.org/api/ng/provider/$interpolateProvider#

Sometimes, there are "ng-repeat-start" and "ng-repeat-end" attributes instead of the "ng-repeat"
https://docs.angularjs.org/api/ng/directive/ngRepeat
http://jsfiddle.net/NameFILIP/k66Za/37/

Currently Intl is not enough widely supported (my opinion), because for example Safari 9 is lacking the support caniuse.com. Safari 10 has support and it has been released 2 months ago, so 9 is still widely used.

Also IE 10 does not have support for Intl.

I did look for the polyfill, but there is no support for Intl.Collator that is required by this library.

Providing an Intl.Collator implementation is no longer a goal of this project. There are several reasons, including:

• The CLDR convertor does not automatically convert collation data to JSON
• The Unicode Collation Algorithm is more complicated that originally anticipated, and would increase the code size of Intl.js too much.
• The Default Unicode Collation Element Table is huge, even after compression, and converting to a native JavaScript object would probably make it slightly larger. Server-side JavaScript environments will (hopefully) soon support Intl.Collator, and we can't really expect client environments to download this data.

Hey. Compiling the ts-wrapper, ts-default, and ts-repeat doesn't work because the attributes need to have a value (ts-wrapper="something"). Is there a work around to this? Thank you in advance.

Maybe null should be treated the same as undefined when sorting elements.

workaround: custom filter:

tableSortModule.filter( 'handleNull', function(){
    return function(input) {
        return input || '';
    };
} );

I have a show more button, that appends my table data, after I added this module to my table, it does some type of paging and only displays recent results and hides old one. How can I disable the pagination? And allow it to append the results

Getting this error when trying to build my project:

Error TS2656: Exported external package typings file 'SOMEPATH/node_modules/angular-tablesort/typedefs/angular-tablesort.d.ts' is not a module. Please contact the package author to update the package definition.

hi, great tool btw.

i want to get notified when the sorting changes. how can i do this?

thanks

We would like to have the possibility to apply some kind of defaults to this directive.
We have solved this manually for now by adding a function inside the script to add default lowercase sorting:

this.addDefaultLowerCase = function (sortexpr) { var expr = sortexpr ? sortexpr.toLowerCase() : sortexpr; if (expr && expr.indexOf("lowercase") < 0) { if (expr.indexOf("parseint") < 0 && expr.indexOf("parsefloat") < 0) { sortexpr += "|lowercase"; } } return sortexpr; }

And then call sortexpr = this.addDefaultLowerCase(sortexpr); inside both setSortField and addSortField.

Do you have any other input on adding such a feature ?

when installing using bower the following warning appears:

bower angular-tablesort#~1.1.0     invalid-meta angular-tablesort is missing "ignore" entry in bower.json
bower angular-tablesort#*          invalid-meta angular-tablesort is missing "ignore" entry in bower.json

ng-repeat supports an alias_expression that can be used (for example) to find the length of a filtered object outside of ng-repeat. However when using tablesort, the alias_expression object is empty.

Example alias_expression usage:

<tr ng-repeat="item in items | filter:search as filteredItems">
    <td>{{ item.id }}</td>
</tr>

<p>Number of items shown: {{ filteredItems.length || 0 }}

Example: http://plnkr.co/edit/zObDQ7YY1VEGBwdStWCT?p=preview

My ng-repeat element is an attribute directive. Can it be that the table-sorting can't work? I get the following error:

Error: [$compile:ctreq] Controller 'browseContent', required by directive 'browseContentItem', can't be found!
http://errors.angularjs.org/1.4.3/$compile/ctreq?p0=browseContent&p1=browseContentItem
    at REGEX_STRING_REGEXP (http://localhost:3000/assets/javascripts/main.js:6298:779)
    at getControllers (http://localhost:3000/assets/javascripts/main.js:10120:255)
    at nodeLinkFn (http://localhost:3000/assets/javascripts/main.js:10137:162)
    at compositeLinkFn (http://localhost:3000/assets/javascripts/main.js:10035:964)
    at publicLinkFn (http://localhost:3000/assets/javascripts/main.js:10014:376)
    at link (http://localhost:3000/assets/javascripts/main.js:21093:45)
    at invokeLinkFn (http://localhost:3000/assets/javascripts/main.js:10223:317)
    at nodeLinkFn (http://localhost:3000/assets/javascripts/main.js:10137:70)
    at compositeLinkFn (http://localhost:3000/assets/javascripts/main.js:10035:964)
    at compositeLinkFn (http://localhost:3000/assets/javascripts/main.js:10035:1073) <tr browse-content-item="" ng-repeat="item in items" item="item" ng-class="{'odd': ng-class-odd, 'even': ng-class-even}" ts-repeat="">

Consider the following code:

<table ts-wrapper>
    <tr>
        <th ts-criteria="startdate">Start date
        <th ts-criteria="startdate">Start time
        <th ts-criteria="other">Other column
        <th ts-criteria="something">Something else
    <tr ng-repeat="row in rows" ts-repeat>
        <td>{{ row.startdate | date }}
        <td>{{ row.startdate | date:'shortTime' }}
        <th>{{ row.other }}
        <th>{{ row.something }}
</table>

We use this to display a bunch of rows with varying start dates. We first had it without the ts-criteria on the "Start time" column.
However, when only one day is shown, some users found it confusing they had to click "Start date" to sort by start time, since the date was the same everywhere. So we wanted to add a sortable "Start time" column, which sorts by the same data as "Start date"

This works fine, as long as you don't sort by "start date" first, then by " start time", or the other way around. What you get then is this:

Is this something that can be fixed, or is there some way to work around this?
Thanks!

This is my element {{organic['Average vol.']}}

I've tried:
ts-criteria="['Average vol.']|parseInt"
ts-criteria="'Average vol.'|parseInt"
ts-criteria="Average|parseInt"

but it doesn't work

Can you make a new release with this commit?

cf35329

Please, tag v1.2 release to use this version with bower.

Thanks and good job!

Hi,
I noticed that if nulls are part of the data array, sorting has unexpected results.
Here is a plunker with the example, but substituting some nulls into the data:
http://plnkr.co/qkXsfCAj61cNnshxTvh4

Love the tablesorter! This is really good work and I really appreciate it!

Maybe this is my inexperience with angular but is there a good way to sort by a computed value? For example I have a column that uses one of two dates depending on which is more recent.

<table class="table table-striped" ts-wrapper>
        <thead>
            <tr>
                <th ts-criteria="lastContact" ts-default>Last Contacted</th>
                <th>Followup</th>
                <th ts-criteria="Notes">Notes</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="customer in customers" ts-repeat>
                <td>{{lastContacted(customer)  | date}}</td>
                <td><input class="form-control hiddenInput" type="date" ng-model="customer.Followup" ng-change="changeFollowup(customer, $index)" /></td>
                <td><span class="fa" ng-class="customer.Notes ? 'fa-comments': 'fa-comment-o'" ng-click="openNotes(customer)"></span></td>
            </tr>
        </tbody>
    </table>

So...is there a great way to sort by the value that comes of my lastContact(customer)? Thanks again!

Refering this for pagination: http://code.ciphertrick.com/2015/06/01/search-sort-and-pagination-ngrepeat-angularjs/

With angular-tablesort above pagination is not working.

Is there any other way we could implment pagination along with this sorting?

Hi, I'm not sure if this is a bug or expected feature but here is what I found in the demo examples:
Presume you are showing 10 items per page
Step 1: go to the last pagination page (e.g. page 6)
Step 2: change to show 100 items per page
Step 3: you see nothing

Expected: you should see (at least) 100 items or all. I suspect the model="ITEMS_PER_PAGE" doesn't reset model="CURRENT_PAGE_NUMBER" to 1 if (total_items <= ITEMS_PER_PAGE)

Is there a method for specifying a default sort that spans multiple columns?

Like all angular modules: http://blog.npmjs.org/post/114584444410/using-angulars-new-improved-browserify-support

Would be a nice feature to be able to specify a default sort column when the columns are being rendered via an ng-repeat:

Given the following controller

$scope.columns = ['foo', 'bar', 'biz'];
$scope.collection = [
  {
    'foo': 0,
    'bar': 7,
    'biz': 4
  },
  {
    'foo': 2,
    'bar': 9,
    'biz': 3
  },
  {
    'foo': 1,
    'bar': 1,
    'biz': 99
  }
  //, ...
]

Be able to specify 'bar' as the default sort key, as such

<table ts-wrapper ts-default-key="'bar'">
  <thead>
    <tr>
      <th ng-repeat="column in columns" ts-criteria="{{ column }}">{{ column }}</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="row in collection" ts-repeat>
      <td ng-repeat="column in columns">{{ row[column] }}</td>
    </tr>
  </tbody>
</table>

Adding ts-repeat to the with ng-repeat resulted in a duplicate being generated. The duplicate generated an empty td with a colspan inside of it as well.

It's odd enough that I wanted to bring it up.

Hi,

I looked in to the new createDefaultComparer() and noticed that

var collator = new Intl.Collator(undefined, { sensitivity: 'case' });

is created inside a scope of createDefaultComparer() function. This means that collator.compare used in line 332 should be undefined, am I right?

compResult = collator.compare(aval, bval);

Is this on purpose?

I use wiredep, and that looks for files to include in the "main" property - cf. https://github.com/taptapship/wiredep

Best regards,
Anders

Hi Matt, can you update the versioning tag? The current version (i.e. 1.3.1) is out-of-date with recent merges. I think everybody is looking forward to the next tag version

So i found you guys product and i think i found a great product.
The problem is: i can't use it.
Am I missing something?
I'm getting tabular data from a service which returns me a JSON.
I pass it to scope normally using my controller but angular-tablesort don't seems to work with it.
Here's my html
::
`

Add "angular-tablesort": "^1.1.0" in bower.json but this version not support "no-data" feature.
Master version is OK.

I have table and I am using pagination to page my data, and lets say I have 300 records in 30 pages.
ts criteria only sorts my 1st page because I will have that paginated array in my ng-repeat. How do I solve this ?
Here is an example pagination I am using : http://plnkr.co/edit/RhdnAW?p=preview
data is a subset of myData in this example.

So i would like to limit number of displayed rows, but limitTo doesn't work. It is applied before angular-tablesort sorts the table.

example of ng-repeat
person in people_data | search:query | limitTo:limitSize

i think it might be problem with regexp

I was wondering if anyone else was experiencing poor performance with large result sets with this module. If I have a table with over 5 or 6 columns and hundreds of rows, it slows to a crawl, and sometimes crashing the browser when re-sorting. I've tried using module "bindonce" in conjunction with this one, but it seems to have no effect. Is there anything I may have missed?

Great module btw tho!

Cheers,
Ben

It would be nice to have the option to have alphanumeric sorting so items like:

MUSIC 1
MUSIC 2
...
MUSIC 10

Don't show up as

MUSIC 1
MUSIC 10
MUSIC 2