Create a grillade (grid) of elements

Display plots, htmlwidgets or other HTML components in a grid.

grillade(
  ...,
  n_col = NULL,
  n_col_sm = NULL,
  max_n_col = NULL,
  cols_width = NULL,
  cols_width_sm = NULL,
  gutter = FALSE,
  .list = NULL
)

Arguments

...	Elements to include in the grillade, must be HTML-like outputs.
n_col	Number of columns, default to NULL and automatically display element with equal size in the grid.
n_col_sm	Number of columns with small screen.
max_n_col	Maximum number of columns, used if n_col = NULL and number of elements is unknown.
cols_width	Numeric vector, numbers of columns taken by each elements, can be a single number or a vector of same length as elements number.
cols_width_sm	Similar to cols_width but apply for small screens.
gutter	Add a gutter between columns, can be TRUE/FALSE, or "l" or "xl".
.list	Alternative list of elements to include in the grid.

Value

A grillade object that can be used in the console, in shiny application and in markdown document.

Examples

# Grillade in Shiny UI ----------------------------------------------------

library(grillade)
library(shiny)

ui <- fluidPage(
  tags$h2("Grillade in Shiny UI"),
  tags$b("3 columns"),
  grillade(
    wellPanel("Column 1", style = "text-align: center;"),
    wellPanel("Column 2", style = "text-align: center;"),
    wellPanel("Column 3", style = "text-align: center;")
  ),
  tags$b("5 columns"),
  grillade(
    wellPanel("Column 1", style = "text-align: center;"),
    wellPanel("Column 2", style = "text-align: center;"),
    wellPanel("Column 3", style = "text-align: center;"),
    wellPanel("Column 4", style = "text-align: center;"),
    wellPanel("Column 5", style = "text-align: center;")
  ),
  tags$b("5 columns with gutter"),
  grillade(
    gutter = TRUE,
    wellPanel("Column 1", style = "text-align: center;"),
    wellPanel("Column 2", style = "text-align: center;"),
    wellPanel("Column 3", style = "text-align: center;"),
    wellPanel("Column 4", style = "text-align: center;"),
    wellPanel("Column 5", style = "text-align: center;")
  ),
  tags$b("5 columns with big gutter"),
  grillade(
    gutter = "xl",
    wellPanel("Column 1", style = "text-align: center;"),
    wellPanel("Column 2", style = "text-align: center;"),
    wellPanel("Column 3", style = "text-align: center;"),
    wellPanel("Column 4", style = "text-align: center;"),
    wellPanel("Column 5", style = "text-align: center;")
  ),
  tags$b("3 columns"),
  grillade(
    n_col = 3,
    wellPanel("Column 1", style = "text-align: center;"),
    wellPanel("Column 2", style = "text-align: center;"),
    wellPanel("Column 3", style = "text-align: center;"),
    wellPanel("Column 4 (will be on a 2nd row)", style = "text-align: center;"),
    wellPanel("Column 5 (will be on a 2nd row)", style = "text-align: center;")
  ),
  tags$b("4 columns & specific widths"),
  grillade(
    n_col = 4, cols_width = c(NA, 3, 2, 2, NA),
    wellPanel("Column 1", style = "text-align: center;"),
    wellPanel("Column 2 (take 3)", style = "text-align: center;"),
    wellPanel("Column 3 (take 2)", style = "text-align: center;"),
    wellPanel("Column 4 (take 2)", style = "text-align: center;"),
    wellPanel("Column 5", style = "text-align: center;")
  ),
  tags$b("Nested"),
  grillade(
    grillade(
      wellPanel("Column A 1", style = "text-align: center;"),
      wellPanel("Column A 2", style = "text-align: center;")
    ),
    grillade(
      wellPanel("Column B 1", style = "text-align: center;"),
      wellPanel("Column B 2", style = "text-align: center;")
    )
  )
)

server <- function(input, output, session) {

}

if (interactive())
  shinyApp(ui, server)

# Matrix of widgets in viewer ---------------------------------------------

library(apexcharter)
library(grillade)
data("economics", package = "ggplot2")

# Create some charts with an htmlwidget
a1 <- apex(
  data = tail(economics, 350),
  mapping = aes(x = date, y = uempmed),
  type = "line"
) %>%
  ax_chart(
    group = "economics", id = "uempmed"
  ) %>%
  ax_yaxis(
    labels = list(
      minWidth = 15
    )
  )

a2 <- apex(
  data = tail(economics, 350),
  mapping = aes(x = date, y = psavert),
  type = "line"
) %>%
  ax_chart(
    group = "economics", id = "psavert"
  ) %>%
  ax_yaxis(
    labels = list(
      minWidth = 15
    )
  )

a3 <- apex(
  data = tail(economics, 150),
  mapping = aes(x = date, y = unemploy),
  type = "line"
) %>%
  ax_chart(
    group = "economics", id = "unemploy"
  ) %>%
  ax_yaxis(
    labels = list(
      minWidth = 15
    )
  )

# Display them
grillade(a1, a2)

# Two columns matrix
grillade(a1, a2, a3, n_col = 2)
grillade(a1, a2, a3, n_col = 2, cols_width = c(NA, NA, 2))