Tabler 0.1.0 is here!

If this post is useful to you I kindly ask a minimal donation on Buy Me a Coffee. It shall be used to continue my Open Source efforts.

You can send me questions for the blog using this form and subscribe to receive an email when there is a new post.

< section id="about" class="level2">

About

Tabler for R is a modern dashboard framework for R Shiny using the beautiful Tabler Dashboard.

Here is a short video overview of Tabler for R:

I am aware there is a TablerDash package. This is a different implementation that I started from scratch to provide more flexibility and options for layouts, themes, and colours.

Furthermore, 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 worrying about licensing fees. D3po (see the previous) post is also Apache 2.0 licensed for the same reason.

While this project is a one man show, I welcome contributions and suggestions via GitHub issues or pull requests that adhere to The Apache Way.

Here are some screenshots of different layouts and themes:

< section id="installation" class="level2">

Installation

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

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

< section id="quick-start" class="level2">

Quick Start

Please see the documentation: https://pacha.dev/tabler/

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

Here’s a minimal example using the “combo” layout with sidebar and top navbar: 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)

< section id="available-layouts" class="level2">

Available Layouts

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

• Boxed (Default): Basic dashboard with top navbar and constrained width content area. This is the default layout.
• Combo: Combines vertical sidebar navigation with top header.
• Condensed: Compact layout with reduced padding/margins.
• Fluid: Full-width layout without container constraints.
• Fluid Vertical: Full-width layout with vertical sidebar.
• Horizontal: Layout with horizontal navigation menu.
• Navbar Dark: Layout with dark navbar theme.
• Navbar Overlap: Layout where content overlaps with navbar for a modern look.
• Navbar Sticky: Layout with sticky/fixed navbar that stays at the top when scrolling.
• RTL: Right-to-left layout for Hebrew/Arabic languages.
• Vertical: Vertical sidebar layout without top navbar.
• Vertical Right: Vertical sidebar positioned on the right side.
• Vertical Transparent: Vertical layout with transparent sidebar.