{"id":13514650,"url":"https://github.com/mattiash/angular-tablesort","last_synced_at":"2025-10-22T19:53:43.079Z","repository":{"id":57741677,"uuid":"12278097","full_name":"mattiash/angular-tablesort","owner":"mattiash","description":"Sort angularjs tables easily","archived":false,"fork":false,"pushed_at":"2023-07-14T18:26:51.000Z","size":221,"stargazers_count":185,"open_issues_count":25,"forks_count":65,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-10-19T01:32:44.525Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mattiash.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2013-08-21T18:32:33.000Z","updated_at":"2024-10-31T09:11:49.000Z","dependencies_parsed_at":"2024-01-07T01:44:11.251Z","dependency_job_id":"5187784e-08ac-4546-9e15-46c1781132cb","html_url":"https://github.com/mattiash/angular-tablesort","commit_stats":{"total_commits":180,"total_committers":34,"mean_commits":5.294117647058823,"dds":0.6777777777777778,"last_synced_commit":"c75a9f03ffbf841898665bba6ed748e3d9586ac5"},"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"purl":"pkg:github/mattiash/angular-tablesort","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mattiash%2Fangular-tablesort","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mattiash%2Fangular-tablesort/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mattiash%2Fangular-tablesort/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mattiash%2Fangular-tablesort/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mattiash","download_url":"https://codeload.github.com/mattiash/angular-tablesort/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mattiash%2Fangular-tablesort/sbom","scorecard":{"id":627265,"data":{"date":"2025-08-11","repo":{"name":"github.com/mattiash/angular-tablesort","commit":"c75a9f03ffbf841898665bba6ed748e3d9586ac5"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3.8,"checks":[{"name":"Code-Review","score":6,"reason":"Found 9/14 approved changesets -- score normalized to 6","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 25 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}}]},"last_synced_at":"2025-08-21T06:50:23.882Z","repository_id":57741677,"created_at":"2025-08-21T06:50:23.883Z","updated_at":"2025-08-21T06:50:23.883Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":280503193,"owners_count":26341693,"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","status":"online","status_checked_at":"2025-10-22T02:00:06.515Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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-08-01T05:00:59.723Z","updated_at":"2025-10-22T19:53:43.040Z","avatar_url":"https://github.com/mattiash.png","language":"HTML","funding_links":[],"categories":["HTML","Data Manage"],"sub_categories":[],"readme":"AngularJS Tablesort\n===================\n\nAllow tables to be sorted by clicking their headings.\n\nWeb site: [http://mattiash.github.io/angular-tablesort](http://mattiash.github.io/angular-tablesort)\n\nBackground\n----------\n\nWhen you use jquery to build your web-pages, it is very easy to add sorting functionality to your tables - include [tablesorter](http://tablesorter.com) and annotate your column headings slightly to tell it what type of data your table contains.\n\nThe goal with this module is to make it just as easy to add sorting to AngularJS tables, but with proper use of angular features and not jQuery.\n\nClick once on a heading to sort ascending, twice for descending. Use shift-click to sort on more than one column.\n\nAdditionally, these directives also make it easy to add a default row that is shown in empty tables to make\nit explicit that the table is intentionally empty and not just broken.\n\nInstallation\n------------\n\n    bower install angular-tablesort\n\nor\n\n    npm install angular-tablesort\n\n\nUsage\n-----\n\nInclude the script in your markup\n\n```html\n\u003cscript src=\"bower_components/angular-tablesort/js/angular-tablesort.js\"\u003e\u003c/script\u003e\n```\n\nInclude the module in your app\n\n```js\nangular.module('myApp', ['tableSort']);\n```\n\nThe following code generates a table that can be sorted by clicking on the table headings:\n\n```html\n\u003ctable border=\"1\" ts-wrapper\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth ts-criteria=\"Id\"\u003eId\u003c/th\u003e\n      \u003cth ts-criteria=\"Name|lowercase\" ts-default\u003eName\u003c/th\u003e\n      \u003cth ts-criteria=\"Price|parseFloat\"\u003ePrice\u003c/th\u003e\n      \u003cth ts-criteria=\"Quantity|parseInt\"\u003eQuantity\u003c/th\u003e\n      \u003cth ts-criteria=\"OrderDate|parseDate\"\u003eDate Ordered\u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr ng-repeat=\"item in items\" ts-repeat\u003e\n      \u003ctd\u003e#{{item.Id}}\u003c/td\u003e\n      \u003ctd\u003e{{item.Name}}\u003c/td\u003e\n      \u003ctd\u003e{{item.Price | currency}}\u003c/td\u003e\n      \u003ctd\u003e{{item.Quantity}}\u003c/td\u003e\n      \u003ctd\u003e{{item.OrderDate | date:\"medium\"}}\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n```\n\nThe `ts-wrapper` attribute must be set on element that surrounds both the headings and the ng-repeat statement.\n\nThe `ts-criteria` attribute tells tablesort which expression it should sort on when that element is clicked. Normally, the ts-criteria is the same as the expression that is shown in the column, but it doesn't have to be. The ts-criteria can also be filtered using the normal AngularJS filter syntax. Tablesort includes three filters `parseInt`, `parseFloat`, and `parseDate`, but any filter can be used.\n\nThe `ts-name` attribute can be set to declare a unique name for an expression which will be used in the event fired when sorting has changed.\n\nThe `ts-default` attribute can be set on one or more columns to sort on them in ascending order by default.\nTo sort in descending order, set ts-default to \"descending\"\n\nThe `ts-repeat` attribute must be set on the element with ng-repeat.\n\n```html\n\u003ctr ng-repeat=\"item in items\" ts-repeat\u003e\n```\n\nAlternatively, `ts-repeat-start` and `ts-repeat-end` may be used to compliment the `ng-repeat-start` and `ng-repeat-end` directives.\n\n```html\n\u003ctr ng-repeat-start=\"item in items track by item.Id\" ts-repeat-start\u003e\n  \u003ctd\u003e\u003cinput type=\"checkbox\" ng-model=\"item.selected\"\u003e\u003c/td\u003e\n  \u003ctd\u003e{{ item.Name }}\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr ng-repeat-end data-ts-repeat-end ng-show=\"item.selected\"\u003e\n  \u003ctd colspan=\"2\"\u003e{{ item.Description }}\u003c/td\u003e\n\u003c/tr\u003e\n```\n\nBy default, the sorting will be done as the last operation in the ng-repeat expression. To override this behavior, use an explicit `tablesort` directive as part of your ng-repeat expression. E.g.\n\n```html\n\u003ctr ng-repeat=\"item in items | limitTo: 10\" ts-repeat\u003e\n```\n\nThis will first select the first 10 items in `items` and then sort them. Alternatively, you can insert an explicit tablesort in the pipe:\n\n```html\n\u003ctr ng-repeat=\"item in items | tablesort | limitTo: 10\" ts-repeat\u003e\n```\n\nThis will first sort the rows according to your specification and then only show the first 10 rows.\n\nIf the `ng-repeat` expression contains a `track by` statement (which is generally a good idea), that expression will\nbe used to provide a [stable](http://en.wikipedia.org/wiki/Sorting_algorithm#Stability) sort result.\n\n\nEvents\n------\n\nWhen changing sorting in the table, an event named `tablesort:sortOrder` will be emitted which contains an array of all current sorting definitions.\nThese sorting definitions could be used to set up sorted data retrieval when using other directives that handle things like pagination or filtering.\n\n```js\n$scope.$on('tablesort:sortOrder', (event, sortOrder) =\u003e {\n  self.sortOrder = sortOrder.map(o =\u003e {\n   return `${o.name} ${o.order ? 'ASC' : 'DESC'}`;\n  });\n});\n```\n\n\n\n CSS\n---\n\nAll table headings that can be sorted on is styled with the css class `tablesort-sortable`. The table headings that the table is currently sorted on is styled with `tablesort-asc` or `tablesort-desc` classes depending on the sort-direction. A stylesheet is included to show that it works, but you probably want to build your own.\n\n\nEmpty Tables\n---\n\nBy default, the content for the empty table cell is set to `\"No Items\"`, however it can be changed via the `noDataText` configuration option (see below). It is inserted as one `\u003ctd\u003e` spanning\nall columns and placed inside a `\u003ctr class=\"showIfLast\"\u003e`, which is placed at the top of each table.\n\nThe message can be customized for each table by specifying the `ts-no-data-text` attribute on the same element as the `ts-wrapper`.\n```html\n\u003ctable ts-wrapper ts-no-data-text=\"Nothing to see here...\"\u003e\n```\n\nTo disable this feature, add the attribute `ts-hide-no-data` to the `ts-repeat` row:\n```html\n\u003ctr ng-repeat=\"item in items\" ts-repeat ts-hide-no-data\u003e\n```\n\nConfiguring Global Options\n---\n\nSeveral options may be configured globally per-app.\n\n\n| Property             | Type              | Default                | Description |\n|----------------------|-------------------|------------------------|-------------|\n|`filterTemplate`      |`string`           |`\"\"`                    |HTML string template for filtering the table. _This will be included **before** the element with `ts-wrapper` specified on it._  See example above.|\n|`filterFunction`      |`function`         |`undefined`             |A function that will be called for every item being iterated over in the table. This function will be passed the object being iterated over as the first parameter. It should return a `boolean` value as to include the item or not.  _(This can be overridden per-table)_|\n|`itemNameSingular`    |`string`           |`\"item\"`                |The default singular version of the name for the items being iterated over. _(This can be overridden per-table)_|\n|`itemNamePlural`      |`string`           |`itemNameSingular + \"s\"`|The default plural version of the name for the items being iterated over. This just appends `\"s\"` to the singular name, which should work for most words in English. _(This can be overridden per-table)_|\n|`noDataText`          |`string`           |`\"No \" + itemNamePlural`|The text that displays in the `.showIfLast` cell shown when a table is empty.   _(This can be overridden per-table)_|\n|`wrappingElementClass`|`string`           |`\"\"`                    |Wrap the `\u003ctable\u003e` element in a div with this class. If left blank, no element will wrap the table.   _(This can be overridden per-table)_|\n|`paginationTemplate`  |`string`           |`\"\"`                    |HTML string template for paging the table. _This will be included **after** the element with `ts-wrapper` specified on it._ See example above.|\n|`perPageOptions`      |`array` of `number`|`[10, 25, 50, 100]`     |The options for how many items to show on each page of results.  _(This can be overridden per-table)_|\n|`perPageDefault`      |`number`           |`perPageOptions[0]`     |The default number of items for show on each page of results. By default, it picks the first item in the `perPageOptions` array.  _(This can be overridden per-table)_|\n\nHere's an example of how to change an option\n```js\nangular\n    .module('myApp')\n    .config(['tableSortConfigProvider', function(tableSortConfigProvider){\n        tableSortConfigProvider.noDataText = \"This table has nothing to show!\";\n        tableSortConfigProvider.wrappingElementClass = \"table-reponsive\";\n    }\n]);\n```\n\n### Filtering \u0026 Pagination Templates\n\nBy default, table filtering \u0026 pagination are supported, but not enabled so that you may use any UI and any 3rd party angular code to do these types of things.\n\nTo set up these features, you must provide some configuration HTML string templates.  These will be the default templates for filtering \u0026 pagination for all tables use in the same app unless that feature is specifically disabled on a per-table basis.\n\nHere is an example of one way to set up the templates for an app that uses bootstrap and the [Angular-UI Bootstrap pagination directive](http://angular-ui.github.io/bootstrap/#/pagination)\n\n```js\nangular\n    .module('myApp')\n    .config(['tableSortConfigProvider', function(tableSortConfigProvider){\n        var filterString = \"\u003cdiv class='row'\u003e\";\n        filterString +=      \"\u003cdiv class='col-sm-4 col-md-3 col-sm-offset-8 col-md-offset-9'\u003e\";\n        filterString +=        \"\u003cdiv class='form-group has-feedback'\u003e\";\n        filterString +=          \"\u003cinput type='search' class='form-control' placeholder='filter {{ITEM_NAME_PLURAL}}' ng-model='FILTER_STRING'/\u003e\";\n        filterString +=          \"\u003cspan class='glyphicon glyphicon-search form-control-feedback' aria-hidden='true'\u003e\u003c/span\u003e\";\n        filterString +=        \"\u003c/div\u003e\";\n        filterString +=      \"\u003c/div\u003e\";\n        filterString +=    \"\u003c/div\u003e\";\n        tableSortConfigProvider.filterTemplate = filterString;\n\n        var pagerString = \"\u003cdiv class='text-right'\u003e\";\n        pagerString +=      \"\u003csmall class='text-muted'\u003eShowing {{CURRENT_PAGE_RANGE}} {{FILTERED_COUNT === 0 ? '' : 'of'}} \";\n        pagerString +=        \"\u003cspan ng-if='FILTERED_COUNT === TOTAL_COUNT'\u003e{{TOTAL_COUNT | number}} {{TOTAL_COUNT === 1 ? ITEM_NAME_SINGULAR : ITEM_NAME_PLURAL}}\u003c/span\u003e\";\n        pagerString +=        \"\u003cspan ng-if='FILTERED_COUNT !== TOTAL_COUNT'\u003e{{FILTERED_COUNT | number}} {{FILTERED_COUNT === 1 ? ITEM_NAME_SINGULAR : ITEM_NAME_PLURAL}} (filtered from {{TOTAL_COUNT | number}})\u003c/span\u003e\";\n        pagerString +=      \"\u003c/small\u003e\u0026nbsp;\";\n        pagerString +=      \"\u003cuib-pagination style='vertical-align:middle;' ng-if='ITEMS_PER_PAGE \u003c TOTAL_COUNT' ng-model='CURRENT_PAGE_NUMBER' \";\n        pagerString +=        \"total-items='FILTERED_COUNT' items-per-page='ITEMS_PER_PAGE' max-size='5' force-ellipses='true'\u003e\u003c/uib-pagination\u003e\u0026nbsp;\";\n        pagerString +=      \"\u003cdiv class='form-group' style='display:inline-block;'\u003e\";\n        pagerString +=        \"\u003cselect class='form-control' ng-model='ITEMS_PER_PAGE' ng-options='opt as (opt + \\\" per page\\\") for opt in PER_PAGE_OPTIONS'\u003e\u003c/select\u003e\";\n        pagerString +=      \"\u003c/div\u003e\";\n        pagerString +=    \"\u003c/div\u003e\";\n        tableSortConfigProvider.paginationTemplate = pagerString;\n    }\n]);\n```\n\nThere are several tokens that can be used in the templates which will be replaced with the proper Angular expressions.\n\n| Token                 | Description                                                                                                 |\n|-----------------------|-------------------------------------------------------------------------------------------------------------|\n| `TOTAL_COUNT`         | The number for the total count of items in the table                                                        |\n| `FILTERED_COUNT`      | The number for the total count of items in the table after the filter has been applied                      |\n| `FILTER_STRING`       | The string used for the `ng-model` of the text filter                                                       |\n| `PER_PAGE_OPTIONS`    | The array of numbers for the various page size options                                                      |\n| `ITEMS_PER_PAGE`      | The number for the selected number of items to display per page (the selected item from `PER_PAGE_OPTIONS`) |\n| `CURRENT_PAGE_NUMBER` | The number for the page that is currently being viewed                                                      |\n| `CURRENT_PAGE_RANGE`  | The number for the current viewable range of pages                                                          |\n| `ITEM_NAME_SINGULAR`  | The singular version of the name of the items being iterated over                                           |\n| `ITEM_NAME_PLURAL`    | The plural version of the name of the items being iterated over                                             |\n\n\n### Item Names\n\nThe name of the things listed in the table can be displayed in the filtering and pagination templates. They are named `\"items\"` collectively and `\"item\"` individually by default, but this can be customized in the global config, and per-table to be more specific as to what is being listed.\n\nOn a table just set the `ts-item-name` attribute on the same element as `ts-wrapper`. Set this as the singular version of the word, not the plural.\n\n ```html\n\u003ctable ts-wrapper ts-item-name=\"product\"\u003e\n```\n\nThe plural version of the word will be automatically generated by adding `\"s\"` to the end of the singular word. The above example would produce `\"product\"` and `\"products\"` This should be fine for many words in English, but in the rare instances where it is not, a `ts-item-name-plural` attribute may also be specified.\n\n```html\n\u003ctable ts-wrapper ts-item-name=\"person\" ts-item-name-plural=\"people\"\u003e\n```\n\nChanging the item name will also update the \"no data\" display to be `\"No \" +  ITEM_NAME_PLURAL` _unless_ the globally configured `noDataText` option is in a format other than the default.\n\nNote that expressions can be used for these properties as well.  In the below example a translation filter is applied to localize text.\n\n```html\n\u003ctable class=\"table table-bordered\"\n       ts-wrapper\n       ts-item-name=\"page.ITEM_NAME_SINGULAR' | translate\"\n       ts-item-name-plural=\"'page.ITEM_NAME_PLURAL' | translate\"\n       ts-no-data-text=\"'page.NO_PAYMENTS_MATCH_CRITERIA_MESSAGE' | translate\"\u003e\n```\n\n### Table Filtering \u0026 Pagination Usage\n\nThere are a couple of ways to mark a column as filterable.\n\nOne approach is to add the `ts-filter` attribute to the `\u003cth\u003e` element.  The property specified in the `ts-criteria` attribute will be used to filter.\n\n ```html\n\u003cthead\u003e\n  \u003ctr\u003e\n    \u003cth ts-filter=\"Id\"\u003eId\u003c/th\u003e\n    \u003cth ts-criteria=\"Name|lowercase\" ts-default ts-filter\u003eName\u003c/th\u003e\n    \u003cth ts-criteria=\"Price|parseFloat\" ts-filter\u003ePrice\u003c/th\u003e\n    \u003cth ts-criteria=\"Quantity|parseInt\" ts-filter\u003eQuantity\u003c/th\u003e\n    \u003cth ts-criteria=\"OrderDate|parseDate\" ts-filter\u003eDate Ordered\u003c/th\u003e\n  \u003c/tr\u003e\n\u003c/thead\u003e\n```\n**NOTE** that the `ts-filter` attribute is not needed if custom filtering using the `ts-filter-function` attribute.\n\nAnother approach is to add the `ts-filter-fields` attribute to the same element as the `ts-wrapper`.  This attribute takes a comma separated list of all the fields to which the filter should be applied.\n\n```html\n\u003ctable ts-wrapper ts-filter-fields=\"Id,Name,Price,Quantity,OrderDate\"\u003e\n```\n\n#### Customized Pagination Options\n\nSet the `ts-per-page-options` attribute on the same element that `ts-wrapper` is set on to override the options for the number of items available per page.\n\nSet the `ts-per-page-default` attribute on the same element that `ts-wrapper` is set on to override the default number of items available per page.\n\n ```html\n\u003ctable ts-wrapper ts-per-page-options=\"[5, 10, 15, 30]\" ts-per-page-default=\"15\"\u003e\n```\n\nIf filtering or pagination has been configured globally, but you wish to disable either of these features per table you can set `ts-display-filtering=\"false\"` and/or `ts-display-pagination=\"false\"` on the same element as `ts-wrapper`\n\n ```html\n\u003ctable ts-wrapper ts-display-filtering=\"false\" ts-display-pagination=\"false\"\u003e\n```\n\n#### Customized Filtering\n\nTo have a custom UI for filtering, build the UI around the table however you want and simply provide the `ts-filter-function` attribute with a function that will return a `boolean` for the item being iterated over.  This attribute must be set on the same element as `ts-wrapper`\n\nIf filtering has been globally configured it is probably a good idea to also set `ts-display-filtering=\"false\"`\n**NOTE** that the `ts-filter` attribute is not needed for custom filtering.\n\n ```js\n$scope.data = [\n   {id:1, name:\"Product A\", enabled: false},\n   {id:2, name:\"Product B\", enabled: true},\n   {id:3, name:\"Product C\", enabled: true}\n ];\n$scope.customFilterValue = \"\";\n$scope.customFilterFn = function(item){\n    if($scope.customFilterValue == \"\"){\n        return true;\n    } else if($scope.customFilterValue === \"false\"){\n        return !item.enabled\n    } else {\n        return item.enabled\n    }\n};\n ```\n\n ```html\n\u003clabel\u003eEnabled\u003c/label\u003e\n\u003cselect ng-model=\"customFilterValue\"\u003e\n  \u003coption value=\"\"\u003eShow All\u003c/option\u003e\n  \u003coption value=\"true\"\u003eOnly Enabled Products\u003c/option\u003e\n  \u003coption value=\"false\"\u003eOnly Disabled Products\u003c/option\u003e\n\u003c/select\u003e\n\n\u003ctable ts-wrapper ts-display-filtering=\"false\" ts-filter-function=\"customFilterFn\"\u003e\n      \u003cthead\u003e\n        \u003ctr\u003e\n            \u003cth ts-criteria=\"id\"\u003eId\u003c/th\u003e\n            \u003cth ts-criteria=\"name|lowercase\" ts-default\u003eName\u003c/th\u003e\n            \u003cth ts-criteria=\"enabled\"\u003eenabled\u003c/th\u003e\n        \u003c/tr\u003e\n    \u003c/thead\u003e\n    \u003ctbody\u003e\n        \u003ctr ng-repeat=\"item in data track by item.id\" ts-repeat\u003e\n            \u003ctd\u003e{{item.id}}\u003c/td\u003e\n            \u003ctd\u003e{{item.name}}\u003c/td\u003e\n            \u003ctd\u003e{{item.enabled}}\u003c/td\u003e\n        \u003c/tr\u003e\n    \u003c/tbody\u003e\n\u003c/table\u003e\n```\n\n## Wrapping The Table Element\n\nCertain libraries like Bootstrap allow for tables to become responsive when at a smaller screen size by wrapping it in a `table-reponsive` class.  If this is desired on a table using angular-tablesort this can become and issue if the filtering or pagination are used since they will also be inside of this wrapping element, which will cause some display issues.\n\nThis can be configured globally with the `wrappingElementClass` configuration option, or per-table with the `ts-wrapping-element-class` attribute\n\n```html\n\n\u003ctable ts-wrapper ts-wrapping-element-class=\"table-reponsive\"\u003e\n```\n\n\n## Getting Data Out of the Table\n\nTo get the current view of the data in the table, pass something to the `ts-get-table-data-function` attribute.  Whatever is passed in will be converted into a function.\nThat function can then be passed as a parameter to a click event function, or anything else.  Within the controller, just run that function and it will return the data in the table.\n\n```html\n\u003cbutton type=\"button\" ng-click=\"getTableData(getDataFn)\"\u003eGet the table data\u003c/button\u003e\n\n\u003ctable ts-wrapper ts-get-table-data-function=\"getDataFn\"\u003e\n```\n\nIn the above example, the click function `ng-click=\"getTableData(getDataFn)\"` would be handled like this:\n\n```js\n$scope.getTableData = function (getDataFn) {\n    var results = getDataFn(true, true, false);\n    console.log(\"data from table\", results)\n};\n```\n\nWhen running the `getDataFn` function, it accepts 3 boolean parameters\n 1. When `true` the data will come back in the same sort order as the table is currently displaying.  When `false` the data will come back in the original sort order (pre-tablesort)\n 2. When `true` the data will only include items that match the current filters, which will match the current table display.  When `false` all items in the table are included regardless of what is currently being filtered.\n 3. When `true` **and pagination is enabled**, the data will only return the currently viewed page of data. When `false` data from all pages will be returned.\n\n### Customized Sorting\n\nIt may be useful to customize how a particular column is sorted. For example, if a column can contain\nnumbers and strings, you may want the numbers to be sorted numerically and the strings to be sorted\nlexicographically. To specify a custom sorting function, add a `ts-order-by` attribute to your\nheader element:\n\n```html\n\u003cth ts-criteria=\"name\" ts-order-by=\"numbersBeforeStrings\"\u003eName\u003c/th\u003e\n```\n\nThe function specified in the `ts-order-by` attibute should behave in the same way as a custom comparison\nfunction passed to `Array.prototype.sort`. See\n[MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)\nfor more details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmattiash%2Fangular-tablesort","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmattiash%2Fangular-tablesort","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmattiash%2Fangular-tablesort/lists"}