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

By:
Paweł Przytuła
January 18, 2021

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: Note: presented 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 Developers, Fullstack Engineers, Frontend 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.

Have questions or insights?

Engage with experts, share ideas and take your data journey to the next level!

Is Your Software GxP Compliant?

Download a checklist designed for clinical managers in data departments to make sure that software meets requirements for FDA and EMA submissions.

Ensure Your R and Python Code Meets FDA and EMA Standards

A comprehensive diagnosis of your R and Python software and computing environment compliance with actionable recommendations and areas for improvement.
Explore Possibilities

Share Your Data Goals with Us

From advanced analytics to platform development and pharma consulting, we craft solutions tailored to your needs.

Talk to our Experts
shiny
shiny dashboards
open source
r
shiny semantic
tutorials