Join the Shiny Community every month at Shiny Gatherings

Shiny semantic grid article thumbnail

Introducing shiny.semantic::grid() – Build Your Shiny Dashboard Layout in Seconds


shiny.semantic::grid()

The main job of a data scientist is to provide meaningful insights, mostly through data visualizations and dashboards. More often than not, data science professionals struggle with HTML and CSS, which makes building an aesthetically-pleasing layout near to impossible. And they are not to blame – that’s a job for frontend developers. Still, there’s a simple solution available. 

Want to learn Shiny from the ground up? Register for our free 90-minute workshop on the 20th of January, 2021.

At Appsilon, we’ve developed the shiny.semantic package, which comes with predefined components for your dashboard. One of these components is the grid, enabling you to build any layout in seconds, not hours or days.

Navigate to a section:

Notepresented functionality is available from shiny.semantic 0.4.2

Image 1 - CSS positioning meme

Credit: XKCD

What is Grid?

CSS Grid system is a modern approach for complex responsive web layouts. Appsilon’s shiny.semantic package gives you two grid functions:

  1. grid_template() – for defining how your layout should be displayed on desktop and mobile
  2. grid() – for rendering a layout template in your Shiny UI

The key to the grid are grid template areas. They allow you to define a layout like this (in raw CSS):

Image 2 - CSS grid template areas example

Image 2 – CSS grid template areas example

The code displayed in the previous image results in this layout:

Image 3 - Example CSS grid layout (code from Image 2)

Image 3 – Example CSS grid layout (code from Image 2)

Let’s explore how to build a simple grid-powered layout next.

Create Your First Grid Layout

The shiny.semantic package simplifies low-level CSS and gives you a convenient grid_template() function. You provide the desired desktop and mobile layout inside it. Area names will be used later as keys in the grid() function upon providing area content (inner HTML).

And here is how you render it in Shiny:

For debugging your template, use the display_grid() function, which lets you view your current layout and try it out:

The corresponding results are shown in the image below:

Image 4 - Displaying the CSS grid in Shiny app

Image 4 – Displaying the CSS grid in Shiny app

Grid in Action

Here is an example Shiny POC dashboard built in a couple of hours using shiny.semantic package and grid layout: 

Image 5 - Polluter Alert - an application built with Shiny and Grid

Polluter Alert: an application built in under 24 hours of development time with shiny.semantic and Grid

If you like the package and want more functionalities like this, don’t forget to ⭐ the repository

Learn More

Appsilon is hiring for remote roles! See our Careers page for all open positions, including R Shiny DevelopersFullstack EngineersFrontend Engineers, a Senior Infrastructure Engineer, and a Community Manager. Join Appsilon and work on groundbreaking projects with the world’s most influential Fortune 500 companies.