{"id":28304024,"url":"https://github.com/derek46518/tablesort","last_synced_at":"2025-08-01T01:08:56.287Z","repository":{"id":259685769,"uuid":"879202344","full_name":"Derek46518/TableSort","owner":"Derek46518","description":"@derek46518/table-sort is a lightweight and efficient library for sorting HTML table content. It supports sorting by text, numbers, and dates and provides a customizable and interactive user experience.","archived":false,"fork":false,"pushed_at":"2025-01-07T09:12:23.000Z","size":148,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-16T15:45:08.893Z","etag":null,"topics":["pnpm","rollup","table-sorting","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Derek46518.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-10-27T09:31:49.000Z","updated_at":"2025-01-07T09:12:27.000Z","dependencies_parsed_at":"2025-01-07T10:19:20.840Z","dependency_job_id":"6adaa2b0-b3a8-4ddc-8510-44dd367f6e24","html_url":"https://github.com/Derek46518/TableSort","commit_stats":null,"previous_names":["derek46518/typescriptpractice","derek46518/tablesort"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Derek46518/TableSort","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Derek46518%2FTableSort","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Derek46518%2FTableSort/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Derek46518%2FTableSort/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Derek46518%2FTableSort/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Derek46518","download_url":"https://codeload.github.com/Derek46518/TableSort/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Derek46518%2FTableSort/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268151877,"owners_count":24204042,"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-07-31T02:00:08.723Z","response_time":66,"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":["pnpm","rollup","table-sorting","typescript"],"created_at":"2025-05-23T23:33:36.738Z","updated_at":"2025-08-01T01:08:56.212Z","avatar_url":"https://github.com/Derek46518.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @derek46518/table-sort\n\n`@derek46518/table-sort` is a lightweight and efficient library for sorting HTML table content. It supports sorting by text, numbers, and dates and provides a customizable and interactive user experience.\n\n## Features\n\n- **Easy Integration**: Quickly integrate sorting functionality into your HTML tables.\n- **Customizable Sorting**: Supports sorting by text, numbers, and dates.\n- **Interactive User Experience**: Includes indicators for sorting directions.\n- **Cross-Browser Compatibility**: Works seamlessly on all modern browsers.\n\n## Installation\n\nInstall the package via npm:\n\n```bash\nnpm i install @derek46518/table-sort -D\n```\n## Usage \n1. **Include the script in your HTML**\n```bash\n\u003cscript src=\"node_modules/@derek46518/table-sort/dist/tableSort.min.js\" defer\u003e\u003c/script\u003e\n```\n2. **Create an HTML table**\n   Design your HTML table and assign the class `table-sortable`. This enables sorting functionality for the table. You can also add `data-sort-method` attributes to customize the sorting behavior for each column (e.g., `string`, `number`, or `date`).\n   ```bash\n   \u003ctable class=\"table-sortable\"\u003e\n    \u003cthead\u003e\n        \u003ctr\u003e\n            \u003cth data-sort-method=\"string\"\u003eName\u003c/th\u003e\n            \u003cth data-sort-method=\"number\"\u003eAge\u003c/th\u003e\n            \u003cth data-sort-method=\"date\"\u003eDate of Birth\u003c/th\u003e\n        \u003c/tr\u003e\n    \u003c/thead\u003e\n    \u003ctbody\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eJohn Doe\u003c/td\u003e\n            \u003ctd\u003e25\u003c/td\u003e\n            \u003ctd data-sort=\"2023-01-15\"\u003e15 Jan 2023\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eJane Smith\u003c/td\u003e\n            \u003ctd\u003e30\u003c/td\u003e\n            \u003ctd data-sort=\"2022-05-10\"\u003e10 May 2022\u003c/td\u003e\n        \u003c/tr\u003e\n    \u003c/tbody\u003e\n   \u003c/table\u003e\n   ```\n3. **Initialize the sorting functionality**\nUse the `TableSort` class to enable sorting on the table. Add this script after the table or ensure it runs once the DOM is loaded.\n```\n\u003cscript\u003e\n    document.addEventListener(\"DOMContentLoaded\", function() {\n        // Initialize TableSort for the sortable table\n        const tableElement = document.querySelector(\".table-sortable\");\n        const tableSortInstance = new tableSortjs.TableSort(tableElement);\n    });\n\u003c/script\u003e\n```\n4. **Optional: Add custom sorting buttons**\nYou can add buttons to trigger sorting programmatically using the `sortTable` method. Here's an example:\n```\n\u003cbutton id=\"sortByAge\"\u003eSort by Age\u003c/button\u003e\n\u003cbutton id=\"sortByDate\"\u003eSort by Date of Birth\u003c/button\u003e\n\n\u003cscript\u003e\n    document.addEventListener(\"DOMContentLoaded\", function() {\n        const tableElement = document.querySelector(\".table-sortable\");\n        const tableSortInstance = new tableSortjs.TableSort(tableElement);\n\n        // Sort by Age\n        document.getElementById(\"sortByAge\").addEventListener(\"click\", function() {\n            const ageHeader = tableElement.querySelector(\"th:nth-child(2)\");\n            tableSortInstance.sortTable(ageHeader);\n        });\n\n        // Sort by Date of Birth\n        document.getElementById(\"sortByDate\").addEventListener(\"click\", function() {\n            const dateHeader = tableElement.querySelector(\"th:nth-child(3)\");\n            tableSortInstance.sortTable(dateHeader);\n        });\n    });\n\u003c/script\u003e\n```\n\n## API\n\n### `TableSort`\n\n- **Constructor**: `new TableSort(tableElement)`\n  - Accepts an HTML `\u003ctable\u003e` element to initialize sorting.\n\n- **Methods**:\n  - `sortTable(headerElement)`: Sorts the table by the specified header element.\n\n## Contribution\nContributions are welcome! Please open an issue or submit a pull request on GitHub.\n\n## License\nThis project is licensed under the MIT License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fderek46518%2Ftablesort","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fderek46518%2Ftablesort","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fderek46518%2Ftablesort/lists"}