Title: | Wrapper for 'gridstack.js' |
---|---|
Description: | An easy way to create responsive layouts with just a few lines of code. You can create boxes that are draggable and resizable and load predefined Layouts. The package serves as a wrapper to allow for easy integration of the 'gridstack.js' functionalities <https://github.com/gridstack/gridstack.js>. |
Authors: | Peter Gandenberger [cre], Andreas Hofheinz [aut], Alain Dumesny [cph] (Author of gridstack.js library) |
Maintainer: | Peter Gandenberger <[email protected]> |
License: | GPL-3 |
Version: | 0.1.1 |
Built: | 2024-11-08 03:27:10 UTC |
Source: | https://github.com/petergandenberger/gridstacker |
grid_stack_item
sChecks that all given arguments are grid_stack_item
s
check_grid_stack_item_list(...)
check_grid_stack_item_list(...)
... |
arguments to be checked |
TRUE if arguments are valid grid_stack_item
s, FALSE otherwise
This acts as a container for the grid_stack_item's.
grid_stack( ..., id = "", opts = "{cellHeight: 70}", ncols = 12, nrows = 12, dynamic_full_window_height = FALSE, height_offset = 0 )
grid_stack( ..., id = "", opts = "{cellHeight: 70}", ncols = 12, nrows = 12, dynamic_full_window_height = FALSE, height_offset = 0 )
... |
all |
id |
the id of the grid_stack container used for multi-grid layouts. (if no id is provided, a random id is generated) |
opts |
grid options: check gridstack documentation for more details |
ncols |
number of columns for the grid (If you need > 12 columns you need to generate the CSS manually) |
nrows |
number of rows for the grid |
dynamic_full_window_height |
if TRUE, the grid will change dynamically to fit the window size minus the |
height_offset |
margin for the grid height, see |
a grid_stack that can contain resizable and draggable grid_stack_item
s
## Not run: library(gridstackeR) library(shiny) library(shinydashboard) library(shinyjs) ui <- dashboardPage( title = "gridstackeR Demo", dashboardHeader(), dashboardSidebar(disable = TRUE), dashboardBody( useShinyjs(), # make sure the content fills the given height tags$style(".grid-stack-item-content {height:100%;}"), grid_stack( dynamic_full_window_height = TRUE, grid_stack_item( h = 2, w = 2, box( title = "gridstackeR", status = "success", solidHeader = TRUE, width = 12, height = "100%", div("Drag and scale the Boxes as desired") ) ), grid_stack_item( h = 4, w = 4, id = "plot_container", box( title = "Histogram", status = "primary", solidHeader = TRUE, width = 12, height = "100%", plotOutput("plot", height = "auto") ) ), grid_stack_item( h = 3, w = 4, min_h = 3, max_h = 3, id = "slider", box( title = "Inputs", status = "warning", solidHeader = TRUE, width = 12, height = "100%", sliderInput("slider", "Slider input:", 1, 100, 50) ) ), grid_stack_item( w = 4, h = 10, x = 0, y = 0, id = "c_table", DT::dataTableOutput("mytable") ) ) ) ) server <- function(input, output, session) { output$plot <- renderPlot({ x <- faithful$waiting bins <- seq(min(x), max(x), length.out = input$slider + 1) hist(x, breaks = bins, col = "#75AADB", border = "white", xlab = "Waiting time to next eruption (in mins)", main = "Histogram of waiting times") }, # set the height according to the container height (minus the margins) height = function() {max(input$plot_container_height - 80, 150)} ) output$mytable <- DT::renderDataTable({ DT::datatable(mtcars, options = list( # set the height according to the container height (minus the margins) scrollY = max(input$c_table_height, 200) - 110, paging = FALSE ) ) }) } shinyApp(ui, server) ## End(Not run)
## Not run: library(gridstackeR) library(shiny) library(shinydashboard) library(shinyjs) ui <- dashboardPage( title = "gridstackeR Demo", dashboardHeader(), dashboardSidebar(disable = TRUE), dashboardBody( useShinyjs(), # make sure the content fills the given height tags$style(".grid-stack-item-content {height:100%;}"), grid_stack( dynamic_full_window_height = TRUE, grid_stack_item( h = 2, w = 2, box( title = "gridstackeR", status = "success", solidHeader = TRUE, width = 12, height = "100%", div("Drag and scale the Boxes as desired") ) ), grid_stack_item( h = 4, w = 4, id = "plot_container", box( title = "Histogram", status = "primary", solidHeader = TRUE, width = 12, height = "100%", plotOutput("plot", height = "auto") ) ), grid_stack_item( h = 3, w = 4, min_h = 3, max_h = 3, id = "slider", box( title = "Inputs", status = "warning", solidHeader = TRUE, width = 12, height = "100%", sliderInput("slider", "Slider input:", 1, 100, 50) ) ), grid_stack_item( w = 4, h = 10, x = 0, y = 0, id = "c_table", DT::dataTableOutput("mytable") ) ) ) ) server <- function(input, output, session) { output$plot <- renderPlot({ x <- faithful$waiting bins <- seq(min(x), max(x), length.out = input$slider + 1) hist(x, breaks = bins, col = "#75AADB", border = "white", xlab = "Waiting time to next eruption (in mins)", main = "Histogram of waiting times") }, # set the height according to the container height (minus the margins) height = function() {max(input$plot_container_height - 80, 150)} ) output$mytable <- DT::renderDataTable({ DT::datatable(mtcars, options = list( # set the height according to the container height (minus the margins) scrollY = max(input$c_table_height, 200) - 110, paging = FALSE ) ) }) } shinyApp(ui, server) ## End(Not run)
This is a wrapper for the individual items to be displayed in the grid_stack Check the gridstack documentation for more information.
The default for all parameters is an empty string, this will make them disappear for gridstackjs
grid_stack_item( ..., id = NULL, auto_position = NULL, x = NULL, y = NULL, w = NULL, h = NULL, max_w = NULL, min_w = NULL, max_h = NULL, min_h = NULL, locked = NULL, no_resize = NULL, no_move = NULL, resize_handles = NULL, hide_overflow = TRUE )
grid_stack_item( ..., id = NULL, auto_position = NULL, x = NULL, y = NULL, w = NULL, h = NULL, max_w = NULL, min_w = NULL, max_h = NULL, min_h = NULL, locked = NULL, no_resize = NULL, no_move = NULL, resize_handles = NULL, hide_overflow = TRUE )
... |
content to include in the grid stack item |
id |
the id of the item, used for save and load functions, this param is propagated through to lower levels. If the id is provided, changes made to the item by the user will trigger reactive inputs for width, height (both in pixels), x, y, w, h (all 4 in number of columns/rows) (see Documentation for more information) |
auto_position |
if set to TRUE x and y attributes are ignored and the element is placed to the first available position. Having either x or y missing will also do that |
x , y
|
element position in columns/rows.
Note: if one is missing this will |
w , h
|
element size in columns/rows |
max_w , min_w , max_h , min_h
|
element constraints in column/row (default none) |
locked |
means another widget wouldn't be able to move it during dragging or resizing.
The widget can still be dragged or resized by the user.
You need to add |
no_resize |
if set to TRUE it disables element resizing |
no_move |
if set to TRUE it disables element moving |
resize_handles |
- widgets can have their own custom resize handles. |
hide_overflow |
hides the overflow of the item-content by default (i.e adds "overflow:hidden;" to the style) For example 'e,w' will make that particular widget only resize east and west. |
a grid_stack_item to be placed inside a grid_stack
. This item is resizable and draggable by default.
## Not run: grid_stack_item( h = 2, w = 2, box( title = "gridstackeR", status = "success", solidHeader = TRUE, width = 12, height = "100%", div("Drag and scale the Boxes as desired") ) ) ## End(Not run)
## Not run: grid_stack_item( h = 2, w = 2, box( title = "gridstackeR", status = "success", solidHeader = TRUE, width = 12, height = "100%", div("Drag and scale the Boxes as desired") ) ) ## End(Not run)
a short example of gridstackeR
gridstackeR_demo()
gridstackeR_demo()
an example shiny shinyApp that uses the gridstackeR package to create a responsive layout with resizable and draggable boxes.
## Not run: gridstackeR_demo() ## End(Not run)
## Not run: gridstackeR_demo() ## End(Not run)