{"id":28191828,"url":"https://github.com/markmybytes/hide-it","last_synced_at":"2025-05-16T11:11:10.194Z","repository":{"id":290293245,"uuid":"973946010","full_name":"markmybytes/hide-it","owner":"markmybytes","description":"A vanilla javascript implementation of DataTables Responsive extension.","archived":false,"fork":false,"pushed_at":"2025-04-28T03:15:13.000Z","size":14,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-28T04:22:08.598Z","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":"gpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/markmybytes.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,"zenodo":null}},"created_at":"2025-04-28T03:01:45.000Z","updated_at":"2025-04-28T03:15:05.000Z","dependencies_parsed_at":"2025-04-28T04:22:12.755Z","dependency_job_id":"284b9716-d52f-4236-aece-4087dbd86e6c","html_url":"https://github.com/markmybytes/hide-it","commit_stats":null,"previous_names":["markmybytes/hide-it"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markmybytes%2Fhide-it","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markmybytes%2Fhide-it/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markmybytes%2Fhide-it/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markmybytes%2Fhide-it/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/markmybytes","download_url":"https://codeload.github.com/markmybytes/hide-it/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254518400,"owners_count":22084376,"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":"2025-05-16T11:10:55.378Z","updated_at":"2025-05-16T11:11:10.186Z","avatar_url":"https://github.com/markmybytes.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ca id=\"readme-top\"\u003e\u003c/a\u003e\n\n\n\n\u003c!-- PROJECT SHIELDS --\u003e\n\u003cdiv align=\"center\"\u003e\n\n  [![Tag][tag-shield]][tag-url]\n  [![Contributors][contributors-shield]][contributors-url]\n  [![Forks][forks-shield]][forks-url]\n  [![Stargazers][stars-shield]][stars-url]\n  [![Issues][issues-shield]][issues-url]\n  [![MIT License][license-shield]][license-url]\n  \n\u003c/div\u003e\n\n\n\n\u003c!-- PROJECT LOGO --\u003e\n\u003cbr /\u003e\n\u003cdiv align=\"center\"\u003e\n  \u003ch3 align=\"center\"\u003ehide-it\u003c/h3\u003e\n\n  \u003cp align=\"center\"\u003e\n    A vanilla javascript implementation of DataTables Responsive extension.\n    \u003cbr /\u003e\n    \u003cbr /\u003e\n    \u003ca href=\"https://github.com/markmybytes/hide-it/issues/new?labels=bug\u0026template=bug-report---.md\"\u003eReport Bug\u003c/a\u003e\n    ·\n    \u003ca href=\"https://github.com/markmybytes/hide-it/issues/new?labels=enhancement\u0026template=feature-request---.md\"\u003eRequest Feature\u003c/a\u003e\n  \u003c/p\u003e\n\u003c/div\u003e\n\n\n\n\u003c!-- TABLE OF CONTENTS --\u003e\n\u003cdetails\u003e\n  \u003csummary\u003eTable of Contents\u003c/summary\u003e\n  \u003col\u003e\n    \u003cli\u003e\n      \u003ca href=\"#about-the-project\"\u003eAbout The Project\u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\n      \u003ca href=\"#getting-started\"\u003eGetting Started\u003c/a\u003e\n      \u003cul\u003e\n        \u003cli\u003e\u003ca href=\"#include-the-source\"\u003eInclude the source\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"#cdn\"\u003eCDN\u003c/a\u003e\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#usage\"\u003eUsage\u003c/a\u003e\u003c/li\u003e\n  \u003c/ol\u003e\n\u003c/details\u003e\n\n\n\n\u003c!-- ABOUT THE PROJECT --\u003e\n## About The Project\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/user-attachments/assets/929aeb2b-f709-496b-b421-2096f636bc80\" alt=\"project screen shot\" width=\"80%\"\u003e\n\u003c/p\u003e\n\n\n\u003c!-- \u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/markmybytes/rpi-paper-eta/assets/71750702/df5b37b3-30d3-4504-87cb-6586f41e53db\"\u003e\n\u003cp align=\"right\"\u003e --\u003e\n\nThis project provides an alternative to DataTables's responsive plugin. JQuery is still an dependency of DataTables and \nyou may not want to include JQuery into your project. _hide-it_ is completely written vanilla Javascript without any dependency to \nmake your table's columns collapse when needed.\n\n_hide-it_ is \"listener safe\". When a column are \"collapsed\" and if the cell content is an HTML node (e.g. button), the content will be **MOVED** into a collapsible menu (not clone or copy) \nso that the listener binded on the DOM node will in theory be retained.\n\nAlthought this implementation is not efficient, it maximise the chance of retain the functionality and behaviour of third party reactive library like Alpine.js or HTMX, or custom event listener.\n\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\n\n\u003c!-- GETTING STARTED --\u003e\n## Getting Started\n\n### Include the source\nYou can go to the [Releases](https://github.com/markmybytes/hide-it/releases) page the download the source and include \nthe source file to your project.\n\n```html\n\u003clink href=\".../hide-it.css\" rel=\"stylesheet\"\u003e\n\u003cscript src=\".../hide-it.js\"\u003e\n```\n\n### CDN\n```html\n\u003clink href=\"https://cdn.jsdelivr.net/gh/markmybytes/hide-it@\u003cversion\u003e/dist/hide-it.min.css\" rel=\"stylesheet\"\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/markmybytes/hide-it@\u003cversion\u003e/dist/hide-it.min.js\"\u003e\u003c/script\u003e\n```\n\nExample\n```html\n\u003c!-- Specific Version --\u003e\n\u003clink href=\"https://cdn.jsdelivr.net/gh/markmybytes/hide-it@0.0.1/dist/hide-it.min.css\" rel=\"stylesheet\"\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/markmybytes/hide-it@0.0.1/dist/hide-it.min.js\"\u003e\u003c/script\u003e\n\n\u003c!-- Latest --\u003e\n\u003clink href=\"https://cdn.jsdelivr.net/gh/markmybytes/hide-it@main/dist/hide-it.min.css\" rel=\"stylesheet\"\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/markmybytes/hide-it@main/dist/hide-it.min.js\"\u003e\u003c/script\u003e\n```\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\n\n\u003c!-- USAGE EXAMPLES --\u003e\n## Usage\n\n### Initialisation\n\nTo make a table \"responsive\", you should create an instance of `HideIt` with the CSS selector to the target table.\n```javascript\nconst rpc = new HideIt(\"table\");\n```\n\nThen, add the responsive class name to table headers. See [Options](#options) for the default class names.\n```html\n\u003cthead\u003e\n    \u003ctr\u003e\n        \u003cth\u003eID\u003c/th\u003e\n        \u003cth\u003eUser Name\u003c/th\u003e\n        \u003cth class=\"collapse-md\"\u003eEmail\u003c/th\u003e\n        \u003cth class=\"collapse-lg\"\u003eAction\u003c/th\u003e\n    \u003c/tr\u003e\n\u003c/thead\u003e\n```\n\n### Methods\n\n1. `process()`\n\n   Reparse the table. _hide-it_ will gather the necessary information and manipulate the table to make the responsive functionality wokring. \n   If new rows are added to the table, invoke this method.\n\n2. `render()`\n\n   Show/hide columns based on the viewport width and responsive setting to columns\n\n3. `hiddenClasses()`\n\n   Returns the hidden class names based on the current window width and breakpoints.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n### Options\n\n_hide-it_ allows you to customise the behaviour by supplying an setting object to `HideIt`.\n\n```javascript\n  const rpc = new HideIt(\"table\", {});\n```\n\n1. `breakpoints`\n   \u003ctable\u003e\n     \u003ctr\u003e\n       \u003cth\u003eType\u003c/th\u003e\n       \u003ctd\u003e\n         \u003cpre lang=\"javascript\"\u003eObject\u0026ltstring, number\u0026gt\u003c/pre\u003e\n       \u003c/td\u003e\n      \u003c/tr\u003e\n      \u003ctr\u003e\n        \u003cth\u003eDescription\u003c/th\u003e\n        \u003ctd\u003eClass names and its breakpoints (in pixel)\u003c/td\u003e\n      \u003c/tr\u003e\n      \u003ctr\u003e\n        \u003cth\u003eDefault\u003c/th\u003e\n        \u003ctd\u003e\n          \u003cpre lang=\"javascript\"\u003e\n          {\n            \"collapse-xs\": 576,\n            \"collapse-sm\": 768,\n            \"collapse-md\": 992,\n            \"collapse-lg\": 1200,\n            \"collapse\": Number.MAX_SAFE_INTEGER,\n            }\n          \u003c/pre\u003e\n        \u003c/td\u003e\n      \u003c/tr\u003e\n    \u003c/table\u003e\n  \n3. resizeTimeout\n\n     \u003ctable\u003e\n    \u003ctr\u003e\n      \u003cth\u003eType\u003c/th\u003e\n      \u003ctd\u003e\n        \u003cpre lang=\"javascript\"\u003enumber\u003c/pre\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003cth\u003eDescription\u003c/th\u003e\n      \u003ctd\u003eDelay (in milliseconds) to rerender the table after a window resize event.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003cth\u003eDefault\u003c/th\u003e\n      \u003ctd\u003e\n        150\n      \u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/table\u003e\n   \n\n\u003c!-- MARKDOWN LINKS \u0026 IMAGES --\u003e\n\u003c!-- https://www.markdownguide.org/basic-syntax/#reference-style-links --\u003e\n[tag-url]: https://github.com/markmybytes/hide-it/releases\n[tag-shield]: https://img.shields.io/github/v/tag/markmybytes/hide-it?style=for-the-badge\u0026label=LATEST\u0026color=%23B1B1B1\n[contributors-shield]: https://img.shields.io/github/contributors/markmybytes/hide-it.svg?style=for-the-badge\n[contributors-url]: https://github.com/markmybytes/hide-it/graphs/contributors\n[forks-shield]: https://img.shields.io/github/forks/markmybytes/hide-it.svg?style=for-the-badge\n[forks-url]: https://github.com/markmybytes/hide-it/network/members\n[stars-shield]: https://img.shields.io/github/stars/markmybytes/hide-it.svg?style=for-the-badge\n[stars-url]: https://github.com/markmybytes/hide-it/stargazers\n[issues-shield]: https://img.shields.io/github/issues/markmybytes/hide-it.svg?style=for-the-badge\n[issues-url]: https://github.com/markmybytes/hide-it/issues\n[license-shield]: https://img.shields.io/github/license/markmybytes/hide-it.svg?style=for-the-badge\n[license-url]: https://github.com/markmybytes/hide-it/blob/master/LICENSE.txt\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarkmybytes%2Fhide-it","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarkmybytes%2Fhide-it","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarkmybytes%2Fhide-it/lists"}