tabler: Create Dashboards with 'Tabler' and 'Shiny'

Description

Provides functions to build interactive dashboards combining the 'Tabler UI Kit' with 'Shiny', making it easy to create professional-looking web applications. 'Tabler' is fully responsive and compatible with all modern browsers. Offers customizable layouts and components built with 'HTML5' and 'CSS3'. The underlying 'Tabler' (https://github.com/tabler/tabler) and 'Tabler Icons' (https://github.com/tabler/tabler-icons) were pre-built from source to eliminate the need for 'Node.js' and 'NPM' on package installation.

Author(s)

Maintainer: Mauricio Vargas Sepulveda m.vargas.sepulveda@gmail.com

Other contributors:

• Tabler (Tabler Dashboard) [contributor, copyright holder]

See Also

Useful links:

• https://github.com/pachadotdev/tabler

• Report bugs at https://github.com/pachadotdev/tabler/issues

Create a Tabler Card

Description

Build a modern card component with optional header, body, and footer

Small helper to render the page pretitle element used by Tabler examples

Small helper to render the page title element used by Tabler examples

Create the full page header structure with pretitle and title

Display a key metric or value prominently

Display an icon from Tabler Icons or other icon libraries

Display important messages to users

Create interactive buttons with Tabler styling

Usage

card(..., title = NULL, footer = NULL, status = NULL, class = NULL)

pre_title(text)

title(text)

page_header(title_text, pretitle_text = NULL, ...)

value_box(value, title, icon = NULL, color = "primary", width = 3)

icon(name, library = "tabler", class = NULL)

alert(..., type = "info", dismissible = FALSE, title = NULL)

button(
  label,
  href = NULL,
  onclick = NULL,
  color = "primary",
  size = "md",
  outline = FALSE,
  icon = NULL,
  icon_right = FALSE,
  disabled = FALSE,
  block = FALSE,
  pill = FALSE,
  square = FALSE,
  loading = FALSE,
  class = NULL,
  type = "button",
  ...
)

Arguments

Value

An HTML tag representing the card

An HTML tag representing the value box

An HTML tag representing the icon

An HTML tag representing the alert

An HTML tag representing the button

Get layout-specific body attributes

Description

Determine body classes and attributes based on layout

Usage

get_layout_attributes(layout)

Arguments

Value

A list of body attributes

Tabler Icons Data

Description

A dataset containing Tabler icon names and their categories.

Usage

icons

Format

A data frame with 6,019 rows and 3 variables:

root

The root category of the icon (e.g., "arrow/arrows", "brand", "device", etc.)

icon

The full icon name (e.g., "arrow-up", "arrow-down", "circle-arrow-up", "circle-arrow-up-filled", etc.)

filled

Logical indicating whether the icon is a filled or not.

Source

Derived from the icons from https://github.com/tabler/tabler-icons

Examples

icons[grepl("paw", icons$icon), ]

Build boxed layout structure

Description

Build the HTML structure for the boxed layout. This layout has a top navbar.

Usage

layout_boxed(
  navbar,
  sidebar,
  body,
  footer,
  theme = "light",
  color = NULL,
  show_theme_button = TRUE
)

Arguments

Build combo layout structure

Description

Build the HTML structure for the combo layout. This layout has BOTH a sidebar (vertical navbar with dark theme) AND a top navbar.

Usage

layout_combo(
  navbar,
  sidebar,
  body,
  footer,
  theme = "light",
  color = NULL,
  show_theme_button = TRUE
)

Arguments

Build condensed layout structure

Description

Build the HTML structure for the condensed layout. This accepts either a single navbar tag, or a named list with 'top' and 'side' for compatibility with combo-like callers. Returns the full page tag structure (including optional top navbar, page wrapper, body and footer)

Usage

layout_condensed(
  navbar,
  sidebar,
  body,
  footer,
  theme = "light",
  color = NULL,
  show_theme_button = TRUE
)

Arguments

Build fluid layout structure

Description

Build structure for the fluid layout which uses a top navbar

Usage

layout_fluid(
  navbar,
  sidebar,
  body,
  footer,
  theme = "light",
  color = NULL,
  show_theme_button = TRUE
)

Arguments

Build fluid vertical layout structure

Description

Vertical fluid layout uses a sidebar (<aside>) and page wrapper

Usage

layout_fluid_vertical(
  navbar,
  sidebar,
  body,
  footer,
  theme = "light",
  color = NULL,
  show_theme_button = TRUE
)

Arguments

Build horizontal layout structure

Description

Horizontal layout uses a top header/navigation

Usage

layout_horizontal(
  navbar,
  sidebar,
  body,
  footer,
  theme = "light",
  color = NULL,
  show_theme_button = TRUE
)

Arguments

Build navbar dark layout structure

Description

Top navbar variant with dark theme wrapper

Usage

layout_navbar_dark(
  navbar,
  sidebar,
  body,
  footer,
  theme = "light",
  color = NULL,
  show_theme_button = TRUE
)

Build navbar overlap layout structure

Description

Overlap navbar variant - similar to condensed but with text-white page header

Usage

layout_navbar_overlap(
  navbar,
  sidebar,
  body,
  footer,
  theme = "light",
  color = NULL,
  show_theme_button = TRUE
)

Build navbar sticky layout structure

Description

Sticky navbar wrapper - transforms vertical navbar to horizontal sticky structure

Usage

layout_navbar_sticky(
  navbar,
  sidebar,
  body,
  footer,
  theme = "light",
  color = NULL,
  show_theme_button = TRUE
)

Build rtl layout structure

Description

Right-to-left layout variant - transforms vertical navbar to horizontal with brand and theme inside ul

Usage

layout_rtl(
  navbar,
  sidebar,
  body,
  footer,
  theme = "light",
  color = NULL,
  show_theme_button = TRUE
)

Build vertical layout structure

Description

Vertical layout with sidebar on the left

Usage

layout_vertical(
  navbar,
  sidebar,
  body,
  footer,
  theme = "light",
  color = NULL,
  show_theme_button = TRUE
)

Build vertical-right layout structure

Description

Vertical layout with sidebar on the right

Usage

layout_vertical_right(
  navbar,
  sidebar,
  body,
  footer,
  theme = "light",
  color = NULL,
  show_theme_button = TRUE
)

Build vertical transparent layout structure

Description

Vertical layout with transparent sidebar

Usage

layout_vertical_transparent(
  navbar,
  sidebar,
  body,
  footer,
  theme = "light",
  color = NULL,
  show_theme_button = TRUE
)

Create a Dropdown Menu Item

Description

Create a nav-item with a dropdown menu using columns like the example

Usage

menu_dropdown(text, icon = NULL, href = NULL, items = list())

Arguments

Value

An HTML tag representing the dropdown nav item

Build a standard navbar/header

Description

Create the top header used in boxed layout. This function accepts raw 'li' items (created by 'menu_item') or a 'sidebar_brand()' attached as 'title' attribute on a 'ul'.

Usage

navbar_menu(..., brand = NULL, show_theme_button = FALSE)

Arguments

Value

An HTML tag for the header

Create a Tabler Dashboard Page

Description

Main function to create a complete dashboard page with Tabler theme

Container for dashboard content

Helper to create a top navigation header. This replaces the previous top-navbar behavior when users passed a header-like component.

Footer for the dashboard

Container for navigation items in sidebar

Container for navigation items in horizontal layout

Individual navigation item for sidebar

Container for multiple tab panels in tabbed layouts

Individual tab panel content

Usage

page(
  title = NULL,
  navbar = NULL,
  body = NULL,
  footer = NULL,
  layout = "boxed",
  theme = "light",
  color = "blue",
  show_theme_button = FALSE
)

body(..., class = NULL)

topbar(title = NULL, brand_image = NULL, ...)

footer(left = NULL, right = NULL)

sidebar_menu(..., title = NULL)

horizontal_menu(...)

menu_item(text, tab_name = NULL, icon = NULL, href = NULL, badge = NULL)

tab_items(...)

tab_item(tab_name, ...)

Arguments

Value

HTML tag with dependencies attached

An HTML tag representing the body

An HTML tag representing the top header

An HTML tag representing the footer

An HTML tag representing the sidebar menu

An HTML tag representing the horizontal menu

An HTML tag representing the menu item

An HTML tag representing the tab items container

An HTML tag representing the tab item

Examples

ui <- page(
  title = "Combo Dashboard",
  layout = "combo",
  navbar = list(
    top = topbar(title = "My App"),
    side = sidebar_menu(
      menu_item("Dogs", icon = "dog"),
      menu_item("Cats", icon = "cat")
    )
  ),
  body = body("Welcome to Tabler!")
)

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

# shinyApp(ui, server)

Create a Sidebar Brand

Description

Helper to build a brand structure for 'sidebar_menu(title = ...)'.

Usage

sidebar_brand(text = NULL, img = NULL, href = "#")

Arguments

Value

A named list suitable to pass to 'sidebar_menu(title = )'

Examples

sidebar_brand("My App", img = "logo.png")