{"id":18930220,"url":"https://github.com/terrymun/stickysort","last_synced_at":"2025-04-15T15:31:18.640Z","repository":{"id":13106478,"uuid":"15788038","full_name":"terrymun/StickySort","owner":"terrymun","description":"Adding sticky headers and columns (if applicable) to your tables, complete with an extended sorting function","archived":false,"fork":false,"pushed_at":"2018-02-23T13:43:53.000Z","size":204,"stargazers_count":78,"open_issues_count":10,"forks_count":17,"subscribers_count":12,"default_branch":"gh-pages","last_synced_at":"2025-04-14T08:58:53.670Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/terrymun.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-01-10T04:15:49.000Z","updated_at":"2025-01-29T19:31:36.000Z","dependencies_parsed_at":"2022-09-14T07:12:06.358Z","dependency_job_id":null,"html_url":"https://github.com/terrymun/StickySort","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/terrymun%2FStickySort","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/terrymun%2FStickySort/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/terrymun%2FStickySort/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/terrymun%2FStickySort/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/terrymun","download_url":"https://codeload.github.com/terrymun/StickySort/tar.gz/refs/heads/gh-pages","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249097919,"owners_count":21212379,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-08T11:36:57.818Z","updated_at":"2025-04-15T15:31:18.233Z","avatar_url":"https://github.com/terrymun.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# StickySort\nA jQuery plugin for tables with sticky headers, columns and sortable feature. [View demo here](http://terrymun.github.io/StickySort/).\n\n## Introduction\nStickySort is a jQuery plugin that creates sticky headers and columns on your tables, complete with the possibility to add a sortable functionality. This plugin was inspired by a recent task at work where I have to create sticky headers to allow users to orient themselves in large tables that, at many instances, fill the full height of the viewport.\n\nYou can [read my article on Codrops](http://tympanus.net/codrops/2014/01/09/sticky-table-headers-columns/) about the basic mechanisms behind the plugin. A lot of calculations are involved, so you have been warned!\n\nMoreover, you can [visit the demo of this plugin](http://terrymun.github.io/StickySort/) on the project page hosted with GitHub.\n\n## Installation\nTo install StickySort, you will have to include the following resources in your page. The JS files should be loaded in the order stipulated below. For the CSS file, you can either incorporate it with your site's stylesheet, or load it externally through the `\u003clink\u003e` element in `\u003chead\u003e`.\n\n| Type | File Name              | Description                                                                                                            |\n|------|------------------------|------------------------------------------------------------------------------------------------------------------------|\n| JS   | [jQuery 1.x](http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js) | **External Dependency**: The jQuery 1.x library is needed for Fluidbox functionality.       |\n| JS   | [Ben Alman's throttle/debounce plugin](http://cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.min.js)           | **External Dependency**: This plugin allows us to throttle or debounce certain events, allowing for better browser performance. |\n| JS   | `jquery.stickysort.js` | Confers the main functionality of Fluidbox. Alternatively, you can load the minified version, `jquery.fluidbox.min.js` |\n| CSS  | `css/stickysort.css`   | Offers styles that are crucial for the correct display of sticky elements. The appearance will break if this is not included. |\n\n## Usage\n### Basic\nIt is rather straightforward to use StickySort \u0026mdash; simply chain the `.stickySort()` method to a selector of your choice. Your table should include the following elements:\n\n- A `\u003cthead\u003e` element containing **only** one single `\u003ctr\u003e` populated with **only** `\u003cth\u003e` elements (table headers)\n- A `\u003ctbody\u003e` element containing `\u003ctd\u003e` wrapped within one or more `\u003ctr\u003e`\n\nTherefore, a sample table with the most basic usage (only sticky header will be dynamically added) should look as follow:\n\n```html\n\u003ctable\u003e\n    \u003cthead\u003e\n        \u003ctr\u003e\n            \u003cth\u003e\u003c/th\u003e\n            \u003c!-- add more \u003cth\u003e as of when needed --\u003e\n        \u003c/tr\u003e\n    \u003c/thead\u003e\n    \u003ctfoot\u003e\u003c!-- tfoot will be hidden --\u003e\n        \u003ctr\u003e\n            \u003cth\u003e\u003c/th\u003e\n            \u003c!-- add more \u003cth\u003e as of when needed --\u003e\n        \u003c/tr\u003e\n    \u003c/tfoot\u003e\n    \u003ctbody\u003e\n        \u003ctr\u003e\n            \u003ctd\u003e\u003c/td\u003e\n            \u003c!-- add more \u003ctd\u003e as of when needed --\u003e\n        \u003c/tr\u003e\n        \u003c!-- add more rows as of when needed --\u003e\n    \u003c/tbody\u003e\n\u003c/table\u003e\n```\n\nIf you would want a sticky column, too, you will need to use `\u003cth\u003e` for the first cells in all `\u003ctr\u003e` elements in your `\u003ctbody\u003e`, i.e.:\n\n```html\n\u003ctable\u003e\n    \u003cthead\u003e\n        \u003ctr\u003e\n            \u003cth\u003e\u003c/th\u003e\n            \u003c!-- add more \u003cth\u003e as of when needed --\u003e\n        \u003c/tr\u003e\n    \u003c/thead\u003e\n    \u003ctfoot\u003e\u003c!-- --\u003e\u003c/tfoot\u003e\n    \u003ctbody\u003e\n        \u003ctr\u003e\n            \u003cth\u003e\u003c/th\u003e\u003c!-- first cell must ne \u003cth\u003e --\u003e\n            \u003ctd\u003e\u003c/td\u003e\u003c!-- other cells are \u003ctd\u003e --\u003e\n            \u003c!-- add more \u003ctd\u003e as of when needed --\u003e\n        \u003c/tr\u003e\n        \u003c!-- add more rows as of when needed --\u003e\n    \u003c/tbody\u003e\n\u003c/table\u003e\n```\n\nIn your JS file, you can simply chain the `.sticktSort()` method to your selector on DOM ready, for example:\n\n```js\n$(function () {\n    $('#content table').stickySort();\n});\n```\n\n### Configuration\nFluidbox can be configured according to your needs. The following options are available:\n\n| Option           | Type      | Default value | Description                           |\n|------------------|-----------|---------------|---------------------------------------|\n| `threshold`      | Object    |               | Stores objects pertaining to calculating of which how far from the end of the table should the sticky header disappear. |\n| `threshold.rows` | Numeric   | `3`           | Number of rows, from the bottom of the table where the sticky header will disappear. |\n| `threshold.viewport` | Numeric | `0.25`      | Fraction of the current viewport height, from the bottom of the table where the sticky header will disappear. |\n| `threshold.px`   | Numeric   | `false`       | Pixel value of height, from the bottom of the table where the sticky header will disappear. |\n| `threshold.allowanceEval` | String | `min`   | How the above three parameters should be compared, which the plugin will choose either the smallest (`min`) or the largest (`min`) of the three values to set as the allowance/threshold. |\n| `sortable`       | Boolean   | `false`       | Designates the table as sortable or not. |\n| `scrollThrottle` | Numeric   | `15`          | Throttles the scroll event to relief load on JavaScript engine. 15ms is good enough to be smooth to the eye, yet not too taxing on the browser. |\n| `resizeDebounce` | Numeric   | `250`         | Debounces the window resize event to relief load on JavaScript engine. |\n\nThis is how the default options look like:\n\n```js\n{\n    threshold: {\n        rows: 3,\n        viewport: 0.25,\n        px: false,\n        allowanceEval: 'min'\n    },\n    sortable: false,\n    scrollThrottle: 15,\n    resizeDebounce: 250\n}\n```\n\n----\n\n## Styling\nFor your convenience, here is the generated markup when the plugin detects a table in your document and does its magic:\n\n```html\n\u003cdiv class=\"sticky-wrap [and other classes copied from original table]\"\u003e\n    \u003ctable class=\"sticky-enabled [and its original classes]\"\u003e\n        \u003c!-- table content --\u003e\n    \u003c/table\u003e\n    \u003cdiv class=\"sticky-col\"\u003e\n        \u003ctable /\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"sticky-intersect\"\u003e\n        \u003ctable /\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"sticky-thead\"\u003e\n        \u003ctable /\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\nstickySort will automatically copy the classes you have set on the original table element onto its parent, so as to allow for convenient styling. However, if you are intending the style to only apply to the table element and not its parent (they will share the same classes), you should use the element selector, i.e.\n\n```css\ntable.sample-table {\n    /* table specific style that does to apply to wrapping parent */\n}\n```\n\n----\n\n## Sortable\nThe sortable function does not rely on the default `.sort()` function in JavaScript due to its various limitations \u0026mdash; more importantly, it makes it extremely hard to perform human sorting. Therefore, I have adopted [a function written by Brian Huisman back in 2008](http://my.opera.com/GreyWyvern/blog/show.dml/1671288), but still works beautifully today.\n\n### Enabling sorting\nSorting is disabled by default. In order to enable the sorting function, you can either implement it universally, i.e.:\n\n```js\n$('table').stickySort({ sortable: true });\n```\n\n\u0026hellip;or if you want to only target specific tables, the plugin will recognize tables that has the class 'sortable' or has the HTML5 data- attribute of `data-sortable`, and mark them as available for sorting.\n\n### Sort states\nThere are three possible sort states with this plugin, and they can be cycled through by successive clicking. Note that sorting from one column resets the sorting state in the previous column (which is the intuitive pattern, anyway):\n\n1. Default state \u0026mdash; rows are not sorted, and appear as-is from the original markup\n2. Sort ascending \u0026mdash; rows are sorted by ascending order\n3. Sort descending \u0026mdash; rows are sorted by descending order\n\n# Licensing: GNU General Public License\nThis plugin is licensed unter the GNU General Public License.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fterrymun%2Fstickysort","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fterrymun%2Fstickysort","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fterrymun%2Fstickysort/lists"}