hubspot / sortable Goto Github PK
View Code? Open in Web Editor NEWDrop-in script to make tables sortable
Home Page: http://github.hubspot.com/sortable/docs/welcome
License: MIT License
Drop-in script to make tables sortable
Home Page: http://github.hubspot.com/sortable/docs/welcome
License: MIT License
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>
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
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.
Hello
If i put "-1" on data-value, he don't sort
why ?
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?
You may want to add to the documentation that the presence of a is necessary
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);
}
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
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,
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
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).
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.
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 UTCMessage: 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.
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?
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
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.
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.
<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>
只能第一列排序,其它列不能排序啊
Is there any method by which the first column stays fixed ?
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
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...
Date Column |
---|
03/23/2013 |
05/15/2013 |
01/27/2014 |
...that will be sorted as...
Date Column |
---|
05/15/2013 |
03/23/2013 |
01/27/2014 |
...instead of "01/27/2014" being on the top.
If child table's header is clicked to sort, it sorts parent table. Also, it is not possible to make child table unsortable
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
How I fixed it:
var options = {'theme': 'minimal'};
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/
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.
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?
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.
You can just check your demo in FF36.
Having multiple rows of headers breaks all functionality. Preferred action for me would be to use the lowermost th row.
Example:
First header | |||
---|---|---|---|
Browser | Usage | Initial release | Stable version |
Chrome | 42.68% | September 2, 2008 | 31.0.1650.57 |
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
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:
sortable/coffee/sortable.coffee
Line 62 in 3f9fdca
Example: https://jsfiddle.net/acdha/t09o6p3r/
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.