1. Visual enhancements
When building shiny apps, the usability, user experience, and aesthetics are just as important as the functionality of your app. Making an app easy to use is a key step in making sure others will use it. Let's look at a few ways to do that.
2. Shiny tables
Basic tables in Shiny, like the ones we've seen, display the entire data at once and are static. This can be sufficient for small datasets, but when there are hundreds of rows, it can be overwhelming to have the entire table appear at once. Very large tables are also difficult for your browser to display, and may take a few seconds to render, which is not a great user experience.
3. Make better tables with DT
The DT package, which stands for data table, offers a drop-in replacement for Shiny tables. A datatable allows the user
4. Make better tables with DT
to paginate through the data instead of seeing everything at once,
5. Make better tables with DT
to search for a value,
6. Make better tables with DT
and even to sort a column.
7. Make better tables with DT
Datatables have a very similar syntax to regular tables: instead of using tableOutput and renderTable, you use dataTableOutput and renderDataTable.
8. Split the UI into tabs
Another way to visually improve a Shiny app is by breaking up the UI into multiple tabs. Tabs are great to use when your Shiny app has grown large enough that there are too many items on the page and you want to separate them. In this image you can see an app that has 4 tabs,
9. Split the UI into tabs
with the "Table" tab being currently selected.
10. Split the UI into tabs
To create a tab, use the tabPanel function. A title argument is required, and the contents of the tab are then placed as comma-separated arguments.
You can place any UI elements, such as text, inputs, or outputs inside the tab.
All the tabs need to be wrapped inside a special container called a tabset. This is done by putting the tabPanels inside the tabsetPanel function, as seen here.
11. CSS: Fine-tune your app's look
The last method we'll discuss to improve a Shiny app's appearance is using CSS, which stands for Cascading Style Sheets.
CSS is a markup language that's used to tell your browser how to display elements on a webpage. Recall that the UI of a Shiny app is actually just a webpage. Therefore, CSS can be used to customize the look of any elements in your Shiny app.
CSS can modify many properties of elements, such as their background color, text color, text size, whitespace, fonts, and dozens of others.
12. CSS syntax
CSS is written as a collection of rules. For our purposes, each rule has the following syntax: a hashtag followed by an element id, and then as many property-value pairs as you want. Each property-value pair defines a single style rule for the element that has the given ID.
The way to then add the CSS to a Shiny app is by placing all the CSS code inside a call to tags dollar sign style, anywhere inside the UI.
13. CSS example
For example, take a look at the UI for this app. It has
14. CSS example
a text input with ID name and
15. CSS example
a table output with ID table. Suppose we want to change the appearance of the app to look
16. CSS example
like this.
First
17. CSS example
we need to define a few CSS rules: the element with id name, which is the text input, will have red colored text. The table gets a yellow background and the size of the text is defined as 24 pixels.
Then we simply add this CSS into the app using tags dollar-sign style, and the app will now pick up these style changes.
18. Let's practice!
Now let's put this new knowledge into practice.