Specify default column to sort #82
Comments
|
I just found the instructions in the readme for sorting on load (somehow I missed that). Although that certainly works, it would be nice to be able to control it via HTML classes without having to write custom JavaScript. (Imagine a content management system where users are able to insert a HTML table, but don't have the ability to write custom JavaScript.) |
|
I actually did consider adding a MutationObserver a long time ago, but decided against it because I felt it was too intrusive. One of the main ideas behind sortable was that I didn't want to pollute the global namespace any more than absolutely necessary. Also, if you want to pre-sort a table, you would need to somehow say which column should be the default, so then you would have to alter the HTML before copy-pasting it. Could you not sort it then? |
|
I'm not sure what a MutationObserver is or why it would be necessary in this case. But your code is already looking for all tables with class="sortable" and turning them into a sortable table. During that initialization process, couldn't you also check to see if the table had another class indicating which column to auto sort on, and if so, execute a sort on that column? Yes, I suppose technically you're right about my example of inserting a table into a CMS with a default sort column, but there's no arrow up/down indication to the user that the table is sorted on a particular column until either the user initiates a sort or the developer adds code to sort on a column at page load. I guess fundamentally it feels a little odd to me that everything else is configured via a HTML class or data element (i.e. class="sortable asc", class="no sort', data-sort="20210318", etc.) but you can't configure a default sort in the same way. You have to write custom JS to specify a default sort column. I'm migrating from another JS table sorting library which used classes to specify the default sort column so this feels like a missing feature to me. |
|
Ok, now I see where you're coming from.
That's the thing, sortable doesn't do that. All it does is add an event listener to the document and listen for clicks. Then it checks if the click is relevant (== a The a11y add-on does do that. It goes through all the tables, which is one of the reasons why I made it an add-on, and not part of the main package. The MutationObserver would be used to detect changes to the dom, and if the changes are relevant (== if a I am not dead set against it; I did consider this solution when I created the a11y add-on. Let me chew on it, it is quite possible that I will implement this. It's always fun to bump the major version. 🤔 |
|
For what it's worth, here's how I've implemented this in my current application that's using this library. I have the following jQuery code running on every page: $(document).ready(function(){
// Default column sort
$('table.sortable thead th.sortable-default').click();
$('table.sortable thead th.sortable-default-reverse').click().click();
});It's basically using the approach you suggested in the readme, but adapted to use a standard class that can be added to the desired table header to auto sort that header on page load. Yes, this would require an additional event observer that fires on the DOMContentLoaded event and a MutationObserver if you wanted it to work for dynamically inserted tables. |
Is it possible to specify a column to be sorted by default? Something like adding
class="default-sort-col-3-desc"to make it autosort the third column in descending order on page load.The text was updated successfully, but these errors were encountered: