hubspot / sortable Goto Github PK

A column containing dates (formatted as a "mm/dd/YYYY" string) is not sorted in the expected way.

The following is an example of dates...

...that will be sorted as...

...instead of "01/27/2014" being on the top.

I am trying sortable 0.8.0. in the enclosed simple html file, the first column should start out sorted. alas, it just appears in its default ordering. even clicking on the sorting header only reverses it. once I click on the second column, and then back on the first column, the sort on the first column begins to work, however.

is this a bug or a feature?

test-sortable.txt

Hello,

Currency seems to sort a la 1, 2, 3
So you end up with:
11000
2000
3000
33000

Instead of
2000
3000
11000
33000

In sorting

Not a code issue, but the web landing page links to the old version (0.5.0) and mainstream is at (0.6.0).

Doubly an issue as IE8 support is much better in 0.6

http://github.hubspot.com/sortable/

You can just check your demo in FF36.

Thanks for this great lightweight table sorting library! Unfortunately it doesn't seem to work properly on a mobile device. Tapping on any of the headers on an Android device or iPhone causes the table to reorder for a second and then snap back to the default (although the icon/class continues to indicate the table is supposedly sorted).

Hi there,

I really like your lightweight table sorter. But I've just realized it's not working, also in the demo on your website here: http://github.hubspot.com/sortable/

If you sort descending by "Usage" the Opera entry with 1.03% is listed before Other with 2.44%.

Can you fix that?

Thanks a lot

If child table's header is clicked to sort, it sorts parent table. Also, it is not possible to make child table unsortable

  <table data-sortable class="tableMax table-striped sortable-theme-bootstrap"  style="margin-top: 
           30px;" >
            <thead>
            <tr>
                <th>{{desc}}</th>
                <th ng-repeat="i in tableKeyList" >{{i.desc}}<span></span></th>
            </tr>
            </thead>

            <tbody>
            <tr ng-repeat="item in items|orderBy:col:desc">
                <td>{{item[dimension]}}</td>
                <td ng-repeat="i in tableKeyList">{{item[i.field]}}</td>
            </tr>
            </tbody>
        </table>

只能第一列排序，其它列不能排序啊

When tapping on the header of a sortable column on a mobile device (Android, Chrome, latest) the sort handler is triggered twice resulting in the same sorting direction. On slow devices it is visible that the sorting happens twice. This makes that the user is not able to switch the sorting direction. The issue is most probably caused by differences in touch input api's of different browsers.

I am rendering table using handlebars, every time when my data updated, table will be re-rendered again. Would be cool to have an option to retrieve "sorting state" and apply this state again on new table.

Hello

If i put "-1" on data-value, he don't sort

why ?

Hi

I cannot seem to sort a date field I have which has been formatted using the GB Locale Date String javascript function to convert my dates to UK format as below:

myDateVariable.toLocaleDateString("en-GB");

Does this library only recognise unformatted dates? Is there a way I am able to modify this to allow formatted dates?

Hi there!

This happens when I try to order a string list alphabetically:

It only happens on Chrome (Version 44.0.2403.157 @ Mac OS 10.10). The script works fine on Safari and Firefox.

If there are cells in the header which span more than 1 cell, the sorting does not work and is off (sorting on the header cell does not sort what is directly beneath it). Is there a way to work around this currently, other than setting the colspans of my table to 1?

When I try to use Sortable on the demo site It doesn't work at all.
This is the error.

Object doesn't support this property or method
sortable.js Line 52
Code: 0 Char 7
URI: http://github.hubspot.com/sortable/js/sortable.js

In the theme sass file, the sort handle icon is set as follow:

            &[data-sorted-direction="descending"]:after
                border-top-color: inherit

            &[data-sorted-direction="ascending"]:after
                border-bottom-color: inherit

This create an issue with some (all?) bootstrap theme, since the color for top and bottom may be different.

You may think at first that this is an uncommon scenario, but it is not; that's because bootstrap use border-top: 0; to hide the top border, and this will actually translate to border-top-width: 0px; border-top-style: initial; border-top-color: initial;: in the end, the sort ascending has "border-color" and sort descending has "color".

I see two possibile soution to this issue. One is to explicitely set the color to a default value, which may be initial to be consistent with the font. The other is to use UTF-8 characters ▼ and ▲ as after/before pseudo-selector content, avoiding the issue completely.

What do you think?

If you are on a device which supports both touch and mouse input (for example a Windows 8 2-in-1) then only touches will sort the table. Clicking with a mouse does nothing. This can be recreated on the demo page if you have a touch enabled device.

Another way to recreate this is to hard code this line:

touchDevice = 'ontouchstart' of document.documentElement

to always be true and then click on a th to attempt to sort.

It looks like the library already supports several module definitions. Adding sortable to npm would allow us to require it as a module and to bundle it with browserify.

// ES2015
import Sortable from 'sortable'

// CommonJS
var Sortable  = require('sortable')

npm would be the perfect place for sortable. Publishing it shouldn't be much work.

As the name is already taken, I would recommend to add a scope.

Thanks

When sorting a table with radio input options, the selected radio loses it's checked status once you let go of the mouse and row is placed in it's new position.

Is this a known issue? It works fine with checkboxes however.

This probably has to do with how browsers are parsing text from dates, for example on chrome
Date.parse('something 1');
returns the same as
Date.parse(1);

Even if you fix this, maybe it would be nice to have a way to override the column type, so we can override the type of data we want on the columns. An idea, replace "type" declaration on setupClickableTH for this:

    var type, type_override;
    type_override = th.getAttribute('data-sort_type');
    if (type_override && sortable.types.hasOwnProperty(type_override)) {
      type = sortable.types[type_override];
    } else {
      type = sortable.getColumnType(table, i);
    }

I have a table that I add data and remove data from it using JS. Sorting the table works perfectly once the page loads and the table is initialized. However, once anything in the table changes, sorting stops working.

There is no way to reinitialize the table again once the data changes.

This seems to be a great plugin except that it doesn't support larger tables due to performance reasons. Anything over 1000 rows x 6 columns start to become slow and over 3000 is really slow.

That mostly have to do with the browser(s) inability to handle the thousands of DOM-nodes required.
Therefor an extension ie Pagination to not draw each single TR and TD for larger datasets would be useful.

Along with pagination another useful thing would be the ability to create the table from an index ie an array. This due to the fact that performance (if only showing X rows out of Y number of total) is much better if we don't even have to loop the initial table cells in the DOM but rather have an array (or object) from the beginning to deal with.

tl;dr

1. Limit DOM-nodes for larger data-sets
2. Add pagination for larger data-sets

Having multiple rows of headers breaks all functionality. Preferred action for me would be to use the lowermost th row.

Example:

You may want to add to the documentation that the presence of a is necessary

Tested on iPad. Events are stored in array and looped through when fired. That caused that sorting is fired twice. Changing following worked for me: sortable.js line 15
clickEvents = ['touchstart']; // instead of pushing event to array

Hey,

There's some good PRs here that should be merged into the repo. Considering that this project has 1.3k stars, I think it would be a benefit to a lot of developers if some of the fixes as proposed by those PRs were implemented.

When I click the th element to begin sorting on IE8 I get a problem on line 71;

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)
Timestamp: Tue, 1 Mar 2016 11:21:30 UTC

Message: Object doesn't support this property or method
Line: 71
Char: 9
Code: 0
URI: http://192.168.10.10/assets/js/sortable.js

Think its possibly due to the way IE8 implements getAttribute, going to have a play around and see if I can fix it in a pull request.

The HTML spec allows a table to have multiple <tbody> tags (see e.g. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) but sortable is hard-coded to only use the first one:

Example: https://jsfiddle.net/acdha/t09o6p3r/

Hi there--

Great js library. I ended up getting it to work but it required modifications and the "quick start" directions didn't work for me so wanted to report a bug in case this was a real issue.

Steps to reproduce

• Downloaded the zip file release to install.
• Included the min js file and css file
• add data-sortable to table attribute
• This table was being generated through JS, so I added a call to Sortable.init()
• No js errors, but also no results.
• Tried to narrow down by installing the full js file and found it was returning an array with undefined in the initTable function

How I fixed it:

• Included install.js
• Included sortable.js
• Included css file for theme
• Modified install.js to include a fixed dictionary with var options = {'theme': 'minimal'};
• Did not include data-sortable table attribute

This seemed to work for me but i was quite confused why the simple quick start did nothing. I tried loading it on my page using the Eager install button and that did work. It seems the install.js was configured for that eager button, but without that configuration it did not work.

I've reproduced the bug and my fix using the a minimal example from the manually including instructions.

(Following directions from http://github.hubspot.com/sortable/

Bug: http://thekeesh.com/projectlist/demo/demo_bug.html
Hacked fix: http://thekeesh.com/projectlist/demo/demo_working.html

I may be missing something obvious, but you may want to consider updating the "Manually Including" instructions on this page to clarify: http://github.hubspot.com/sortable/

I have a table with data-value="" and it does not work on alphabet. It are names and there is no logical in the sorting in ascending of descending.

This problem i don't have in Firefox or Safari.

Please help me.

In Ruby on Rails 4 this is not working, only when I do a page refresh it works (sometimes). The same issue for your odometer plugin.

app/assets/javascript/sortable.js 

<table data-sortable>
    <!-- ... -->
</table>

Is there any method by which the first column stays fixed ?