{"id":28631453,"url":"https://github.com/dreamrs/gridstackr","last_synced_at":"2025-06-12T13:32:54.626Z","repository":{"id":241720692,"uuid":"805443342","full_name":"dreamRs/gridstackr","owner":"dreamRs","description":"Create movable and resizable grid layout in 'Shiny' application.","archived":false,"fork":false,"pushed_at":"2025-03-04T10:07:20.000Z","size":4862,"stargazers_count":23,"open_issues_count":1,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-04T11:23:09.569Z","etag":null,"topics":["htmlwidgets","shiny","shiny-apps"],"latest_commit_sha":null,"homepage":"","language":"R","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dreamRs.png","metadata":{"files":{"readme":"README.md","changelog":"NEWS.md","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":"2024-05-24T15:27:33.000Z","updated_at":"2025-03-04T10:07:24.000Z","dependencies_parsed_at":"2024-05-29T21:04:39.936Z","dependency_job_id":"3040e8f3-406c-4ae2-9b17-53e5ca35eea0","html_url":"https://github.com/dreamRs/gridstackr","commit_stats":null,"previous_names":["dreamrs/gridstackr"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/dreamRs/gridstackr","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dreamRs%2Fgridstackr","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dreamRs%2Fgridstackr/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dreamRs%2Fgridstackr/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dreamRs%2Fgridstackr/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dreamRs","download_url":"https://codeload.github.com/dreamRs/gridstackr/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dreamRs%2Fgridstackr/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259473502,"owners_count":22863488,"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":["htmlwidgets","shiny","shiny-apps"],"created_at":"2025-06-12T13:30:56.911Z","updated_at":"2025-06-12T13:32:54.613Z","avatar_url":"https://github.com/dreamRs.png","language":"R","readme":"# gridstackr\n\n\u003c!-- badges: start --\u003e\n[![Lifecycle: experimental](https://img.shields.io/badge/lifecycle-experimental-orange.svg)](https://lifecycle.r-lib.org/articles/stages.html#experimental)\n[![R-CMD-check](https://github.com/dreamRs/gridstackr/actions/workflows/R-CMD-check.yaml/badge.svg)](https://github.com/dreamRs/gridstackr/actions/workflows/R-CMD-check.yaml)\n\u003c!-- badges: end --\u003e\n\nCreate movable and resizable grid layout in Shiny application. Powered by the JavaScipt library [gridstack.js](https://github.com/gridstack/gridstack.js).\n\n\n\n## Installation\n\nYou can install the development version of gridstackr from [GitHub](https://github.com/dreamRs/gridstackr) with:\n\n```r\n# install.packages(\"remotes\")\nremotes::install_github(\"dreamRs/gridstackr\")\n```\n\n\n\n## Example\n\n![](examples/gridstackr.gif)\n\n\n```r\nlibrary(shiny)\nlibrary(bslib)\nlibrary(ggplot2)\nlibrary(gridstackr)\n\nui \u003c- page_fluid(\n  tags$h2(\"GridStack example\"),\n  gridstack(\n    margin = \"10px\",\n    cellHeight = \"140px\",\n    float = TRUE,\n    gs_item(value_box(\n      title = \"Customer lifetime value\",\n      value = \"$5,000\",\n      showcase = icon(\"bank\"),\n      theme = \"text-success\",\n      class = \"mb-0\"\n    ), w = 6, h = 1),\n    gs_item(value_box(\n      title = \"Customer lifetime value\",\n      value = \"$5,000\",\n      showcase = icon(\"bank\"),\n      theme = value_box_theme(bg = \"#e6f2fd\", fg = \"#0B538E\"),\n      class = \"border mb-0\"\n    ), w = 6, h = 1),\n    gs_item(\n      plotOutput(\"plot1\", height = \"100%\"),\n      w = 4, h = 2, class_content = \"bg-white p-2 border rounded-4\"\n    ),\n    gs_item(\n      plotOutput(\"plot2\", height = \"100%\"),\n      w = 4, h = 2, class_content = \"bg-white p-2 border rounded-4\"\n    ),\n    gs_item(\n      plotOutput(\"plot3\", height = \"100%\"),\n      w = 4, h = 2, class_content = \"bg-white p-2 border rounded-4\"\n    ),\n    gs_item(\n      plotOutput(\"plot4\", height = \"100%\"),\n      w = 12, h = 2, class_content = \"bg-white p-2 border rounded-4\"\n    )\n  )\n)\n\nserver \u003c- function(input, output, session) {\n\n  output$plot1 \u003c- renderPlot({\n    ggplot(mtcars) + geom_point(aes(mpg, disp))\n  })\n  output$plot2 \u003c- renderPlot({\n    ggplot(mtcars) + geom_boxplot(aes(gear, disp, group = gear))\n  })\n  output$plot3 \u003c- renderPlot({\n    ggplot(mtcars) + geom_smooth(aes(disp, qsec))\n  })\n  output$plot4 \u003c- renderPlot({\n    ggplot(mtcars) + geom_bar(aes(carb))\n  })\n\n}\n\nif (interactive())\n  shinyApp(ui, server)\n```\n\n\n## Development\n\nThis package use [{packer}](https://github.com/JohnCoene/packer) to manage JavaScript assets, see packer's [documentation](https://packer.john-coene.com/#/) for more.\n\nInstall nodes modules with:\n\n```r\npacker::npm_install()\n```\n\nModify `srcjs/widgets/gridstack.js`, then run:\n\n```r\npacker::bundle()\n```\n\nRe-install R package and try `gridstack()` function.\n\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdreamrs%2Fgridstackr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdreamrs%2Fgridstackr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdreamrs%2Fgridstackr/lists"}