Tabler 0.1.0 is here! | R bloggers

About

Tabler for R is a modern dashboard framework for R Shiny that takes advantage of the beautiful Tabler dashboard.

Here’s a quick video overview of Tabler for R:

I know there is a TablerDash package. This is another implementation that I started from scratch to provide more flexibility and options for layouts, themes, and colors.

Moreover, this implementation is FOSS (Free and Open Source Software) under the Apache 2.0 license, which means you can use it freely in government or NGO projects without having to worry about licensing costs. The D3po post (see the previous one) also has an Apache 2.0 license for the same reason.

Although this project is a one-man show, I welcome contributions and suggestions via GitHub issues or pull requests that match this The Apache Road.

Here are some screenshots of different layouts and themes:

Installation

# using the R-Universe
install.packages("tabler", repos = "https://pachadotdev.r-universe.dev")

# or using the remotes package
remotes::install_github("pachadotdev/tabler")

Start quickly

See the documentation: https://pacha.dev/tabler/

Here’s a complete example I use to test all the layouts with the theme (light/dark) and color options: https://github.com/pachadotdev/tabler/blob/main/examples/shiny-test-layouts.R

Here is a minimal example using the “combo” layout with sidebar and top navigation bar: https://github.com/pachadotdev/tabler/blob/main/examples/shiny-test-combo.R

if (!require("d3po")) {
  install.packages("d3po", repos = "https://pachadotdev.r-universe.dev")
}

library(shiny)

# library(tabler)
load_all()

library(d3po)

sidebar_nav <- navbar_menu(
  brand = "Combo Layout",
  menu_item("Home", icon = "home"),
  menu_dropdown(
    "Layout",
    icon = "layout-2",
    href = "./",
    items = list(
      c("Boxed", "./"),
      c("Combined", "./"),
      c("Condensed", "./"),
      c("Fluid", "./"),
      c("Fluid vertical", "./"),
      c("Horizontal", "./"),
      c("Navbar dark", "./"),
      c("Navbar overlap", "./"),
      c("Navbar sticky", "./"),
      c("Right vertical", "./"),
      c("RTL mode", "./"),
      c("Vertical", "./"),
      c("Vertical transparent", "./")
    )
  )
)

# Simplified menu for the top navbar (just labels, no icons for simplicity)
top_nav <- navbar_menu(
  menu_item("Button 1", icon = NULL),
  menu_dropdown(
    "Button 2",
    icon = "layout-2",
    href = "./",
    items = list(
      c("Button 3", "./")
    )
  )
)

# Combine both for combo layout
main_navbar <- list(side = sidebar_nav, top = top_nav)

ui <- tabler_page(
  theme = "light",
  color = "teal",
  title = "Combo Layout",
  layout = "combo",
  show_theme_button = FALSE,
  navbar = main_navbar,
  body = list(
    # Page header
    page_header(
      title_text = "Combo Layout",
      pretitle_text = "Overview"
    ),
    # Page body content
    shiny::tags$div(
      class = "page-body",
      shiny::tags$div(
        class = "container-xl",
        column(
          6,
          tabler_card(
            title = "My title",
            footer = "Footer.",
            p("My text"),
            p("More text", class = "text-muted"),
            d3po_output("plot", width = "100%", height = "500px")
          )
        )
      )
    )
  ),
  footer = tabler_footer(
    left = "Tabler",
    right = shiny::tags$span("v1.4.0")
  )
)

server <- function(input, output, session) {
  output$plot <- render_d3po({
    set.seed(123)

    sim <- data.frame(
      x = rnorm(100),
      y = rnorm(100),
      letter = sample(letters[1:3], 100, replace = TRUE)
    )

    # for light theme
    axis_color <- "#000"
    tooltip_color <- "#fff"

    # for dark theme
    axis_color <- "#fff"
    tooltip_color <- "#000"

    d3po(sim) %>%
      po_scatter(daes(x = x, y = y, group = letter)) %>%
      po_labels(title = "Weight Distribution by Type") %>%
      po_background("transparent") %>%
      po_theme(axis = axis_color, tooltips = tooltip_color)
  })
}

shinyApp(ui, server)

Available layouts

All examples use the same basic structure as the Quick Start example above. Here are the main differences for each layout:

• In box (standard): Basic dashboard with top navigation bar and limited width content area. This is the standard format.
• Combination: Combines vertical sidebar navigation with top header.
• Condensed: Compact layout with less padding/margins.
• Liquid: Full-width layout without container restrictions.
• Flowing vertically: Full-width layout with vertical sidebar.
• Horizontal: Layout with horizontal navigation menu.
• Navigation bar Dark: Dark navigation bar theme layout.
• Navigation bar overlay: Layout where the content overlaps with the navigation bar for a modern look.
• Navigation bar sticky: Layout with pinned/fixed navigation bar that stays on top while scrolling.
• RTL: Right to left format for Hebrew/Arabic languages.
• Vertical: Vertical sidebar layout without top navigation bar.
• Vertical right: Vertical sidebar on the right.
• Vertically transparent: Vertical layout with transparent sidebar.