{"id":18174420,"url":"https://github.com/epi-interactive/Datatable_Overlay","last_synced_at":"2025-04-01T15:31:26.331Z","repository":{"id":150951221,"uuid":"184156515","full_name":"epi-interactive/Datatable_Overlay","owner":"epi-interactive","description":"How to open an R Shiny modal popup from a hyperlink in a datatable","archived":false,"fork":false,"pushed_at":"2024-04-03T02:28:38.000Z","size":104,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-11-02T16:08:17.279Z","etag":null,"topics":["javascript","modal","r","shiny"],"latest_commit_sha":null,"homepage":"","language":"R","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/epi-interactive.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}},"created_at":"2019-04-29T23:08:22.000Z","updated_at":"2024-09-12T18:47:53.000Z","dependencies_parsed_at":null,"dependency_job_id":"b932ae14-4b78-416c-afb2-69427a262d53","html_url":"https://github.com/epi-interactive/Datatable_Overlay","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/epi-interactive%2FDatatable_Overlay","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/epi-interactive%2FDatatable_Overlay/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/epi-interactive%2FDatatable_Overlay/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/epi-interactive%2FDatatable_Overlay/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/epi-interactive","download_url":"https://codeload.github.com/epi-interactive/Datatable_Overlay/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246662354,"owners_count":20813734,"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","modal","r","shiny"],"created_at":"2024-11-02T16:03:06.401Z","updated_at":"2025-04-01T15:31:26.038Z","avatar_url":"https://github.com/epi-interactive.png","language":"R","funding_links":[],"categories":["R"],"sub_categories":[],"readme":"# Datatable Overlay\nSometimes there are too many rows in a data table to display on one page and scrolling is not the most user-friendly way to solve this. This examples provides a way to layer information into a overlay which can be accessed by clicking a link in a data table. \n\nYou can try out the app [here](https://rshiny2.epi-interactive.com/apps/datatable_overlay/)\n\n![alt text](modal-thumbnail.PNG)\n\n## How it works\nAdd an an extra column for the data in your table and attach a Shiny event listener to it to return its index\n\n``` r\ndat \u003c- iris %\u003e% mutate(More = paste0('\u003cspan\u003e\u003ca href=\"javascript:void(0)\" onmousedown=\"',\n                                    'Shiny.onInputChange(\\'DTClick\\',[', 1:n(), ',Math.random()]);',\n                                    'event.preventDefault(); event.stopPropagation(); return false;\"\u003e\n                                    \u003cfont color=\"grey\"\u003e\u0026#9679;\u0026#9679;\u0026#9679;\u003c/font\u003e\n                                    \u003c/a\u003e\u003c/span\u003e')\n                                    )\n                      )\n\n```\n\nListen for the click and show the overlay\n``` r\nobserveEvent(input$DTClick, {\n      showModal(modalDialog(\n        title = paste0(\"You just clicked row \", as.numeric(input$DTClick[1])),\n        dataTableOutput(\"modalContent\"),\n        size = \"l\",\n        easyClose = TRUE,\n        footer = NULL\n      ))\n    })\n```\n\n\n\n\n---\n\nCode created by [Epi-interactive](https://www.epi-interactive.com) \n\nAs always, our expert team is here to help if you want custom training, would like to take your dashboards to the next level or just need an urgent fix to keep things running. Just get in touch for a chat.\n\n[https://www.epi-interactive.com/contact](https://www.epi-interactive.com/contact)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fepi-interactive%2FDatatable_Overlay","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fepi-interactive%2FDatatable_Overlay","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fepi-interactive%2FDatatable_Overlay/lists"}