{"id":20935036,"url":"https://github.com/leandrosardi/selectrowsjs","last_synced_at":"2025-07-28T14:33:04.322Z","repository":{"id":37803484,"uuid":"506215853","full_name":"leandrosardi/selectrowsjs","owner":"leandrosardi","description":"JavaScript library for handling the rows selection of an HTML table.","archived":false,"fork":false,"pushed_at":"2024-03-28T12:18:14.000Z","size":841,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-01-19T19:56:13.526Z","etag":null,"topics":["javascript","javascript-library","row","rowselection","selection-sort","table","tables","tableview"],"latest_commit_sha":null,"homepage":"https://connectionsphere.com/selectrowsjs","language":"CSS","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/leandrosardi.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,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-06-22T11:22:00.000Z","updated_at":"2022-11-25T16:02:04.000Z","dependencies_parsed_at":"2025-01-19T19:55:20.588Z","dependency_job_id":"2460952a-6505-44ba-9ac4-50b79b01af8d","html_url":"https://github.com/leandrosardi/selectrowsjs","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leandrosardi%2Fselectrowsjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leandrosardi%2Fselectrowsjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leandrosardi%2Fselectrowsjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leandrosardi%2Fselectrowsjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/leandrosardi","download_url":"https://codeload.github.com/leandrosardi/selectrowsjs/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243330266,"owners_count":20274037,"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":["javascript","javascript-library","row","rowselection","selection-sort","table","tables","tableview"],"created_at":"2024-11-18T22:12:49.193Z","updated_at":"2025-03-13T02:41:39.982Z","avatar_url":"https://github.com/leandrosardi.png","language":"CSS","readme":"![GitHub issues](https://img.shields.io/github/issues/leandrosardi/selectrowsjs) ![GitHub](https://img.shields.io/github/license/leandrosardi/selectrowsjs) ![GitHub tag (latest by date)](https://img.shields.io/github/v/tag/leandrosardi/selectrowsjs) ![GitHub last commit](https://img.shields.io/github/last-commit/leandrosardi/selectrowsjs)\n\n# SelectRows.Js\n\nThe **SelectRows.Js** is a JavaScript library for handling the rows selection of an HTML table.\n\n[Find a live example here](https://connectionsphere.com/selectrowsjs).\n\n**\u003e\u003e\u003e\u003e IF YOU LIKE THIS PROJECT, STAR IT ! \u003c\u003c\u003c\u003c** \n\n**Outline:**\n\n1. [Getting Started](#1-getting-started).\n2. [Enabling / Disabling Buttons](#2-enabling--disabling-buttons).\n3. [Using SelectRows.Js as a MySaaS Extension](#3-using-selectrowsjs-as-a-mysaas-extension).\n\n## 1. Getting Started\n\nGet started in 3 simple steps.\n\n**Step 1.** Download the libraries `jquery-3.5.1.min.js` and `selectrows.min.js`. You can download them from this page.\n\n**Step 2.** Include the file of your HTML page.\n\n```html\n\u003cscript src=\"jquery-3.5.1.min.js\" type=\"text/javascript\"\u003e\u003c/script\u003e\n\u003cscript src=\"./selectrows.min.js\" type=\"text/javascript\"\u003e\u003c/script\u003e\n```\n\n**Step 3.** Create your table with rows selection.\n\n**Example:**\n\n```html\n\u003ctable class=\"table table-striped\" style='table-layout: fixed; width: 100%;'\u003e\n    \u003cthead\u003e\n        \u003cth style='text-align: center; width:15px' \u003e\n            \u003cinput class=\"checkbox select-all-rows\" data-input-id='ids' data-rows-group-id='users' type=\"checkbox\"\u003e\n        \u003c/th\u003e\n        \u003cth style ='width:auto;'\u003e\n            Name\n        \u003c/th\u003e\n        ...\n    \u003c/thead\u003e\n        \n    \u003ctbody\u003e\n        \u003cinput type='hidden' name='ids' id='ids' value='' /\u003e\n        \u003ctr\u003e\n            \u003ctd style='text-align: center; vertical-align: top;'\u003e\n                \u003cinput class=\"checkbox select-row\" data-rows-group-id='users' type=\"checkbox\" id=\"123\" data-id=\"123\" /\u003e\n            \u003c/td\u003e\n            \u003ctd\u003e\n                \u003cinput class='user-input input-block-level' type='text' id='name' value='Leandro Daniel Sardi' /\u003e\n            \u003c/td\u003e\n            ...\n        \u003c/tr\u003e\n    \u003c/tbody\u003e\n\u003c/table\u003e\n\n\u003cscript\u003e\n    // call the function init when the page is loaded.\n    selectRowsJs.init();\n\u003c/script\u003e\n```\n\n## 2. Enabling / Disabling Buttons\n\nSome buttons in your screen may require one or more rows are selected.\n\nAdd the tag `data-rows-group-id='users'` on the buttons and checkboxes, in order to link all of them together.\n\n**E.g.:**\n\n```html\n\u003ctable class=\"table table-striped\"\u003e\n    \u003cthead\u003e\n        \u003cth style='text-align: center; width:15px' \u003e\n            \u003cinput class=\"checkbox select-all-rows\" data-input-id='ids' data-rows-group-id='users' type=\"checkbox\"\u003e\n        \u003c/th\u003e\n        ...\n```\n\n```html\n    \u003ctbody\u003e\n        \u003ctr\u003e\n            \u003ctd style='text-align: center; vertical-align: top;'\u003e\n                \u003cinput class=\"checkbox select-row\" data-rows-group-id='users' type=\"checkbox\" id=\"123\" data-id=\"123\" /\u003e\n            \u003c/td\u003e\n            ...\n```\n\n## 3. Using SelectRows.Js as a [MySaaS](https://github.com/leandrosardi/mysaas) Extension\n\nIf you are running a [MySaaS](https://github.com/leandrosardi/mysaas) project, you can add **SelectRows.js** as an extension.\n\nSuch an extension includes a code example screen (`/selectrowsjs`) that you show to other developers, for reference. \n\nInstall **SelectRows.js** as an extension of [MySaaS](https://github.com/leandrosardi/mysaas) is pretty simple.\n\n**Step 1:** Clone the project in the `extensions` filder.\n\n```bash\ncd ~/code/mysaas/extensions\ngit clone https://github.com/leandrosardi/selectrowsjs\n```\n\n**Step 2:** Add the extension to your `config.rb` file.\n\n```ruby\nBlackStack::Extensions.append :selectrowsjs\n```","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleandrosardi%2Fselectrowsjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fleandrosardi%2Fselectrowsjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleandrosardi%2Fselectrowsjs/lists"}