packages_ii.Rmd

---
title: "Packages II"
description: |
  Interactive tables with DT
output: 
  distill::distill_article:
    toc: true
    toc_float: true
    toc_depth: 4
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE, eval = FALSE)
```
Start with a new file: `intro-shiny/babynames/04-packages-02/app-baby-04.R`

Allow users to sort or filter your tables without having to expand the UI. Simply use packages such as [DT](https://rstudio.github.io/DT/) or [Reactable](https://glin.github.io/reactable/) to present data frames as interactive tables. 

# DT

DT stands for DataTables (not to be confused with the wrangling/processing package `data.table`). Like, `Plotly`, DT is part of the [htmlwidgets](https://www.htmlwidgets.org/) family. Developers have taken the JavaScript version of DT and bound it with R. We don't have to learn JS in order to experience its benefits!

```{r}
# Load package
library(DT)
```

Change the output and render function names.

```{r}
# UI

# in lieu of tableOutput(), use DT's version
tbl_disp <- DTOutput("main_table")

```

```{r}
# Server

  # in lieu of renderTable(), use DT's version
  output$main_table <- renderDT({
    filtered_df()
  })
```

## Options

DT offers options to customize the appearance of your table without manipulating the data itself.

```{r}
# Server

  output$main_table <- renderDT({
    df <- filtered_df()
    
    # customize the appearance of the DT
    datatable(df,
              rownames = FALSE,
              colnames = str_to_title(str_replace_all(colnames(df), "_", " ")),
              options = list(pageLength = 20,
                             lengthMenu = c(20, 60, 100),
                             dom = 'ltipr' # default is 'lftipr', exclude f to remove search bar 
                             ),
              filter = 'top'
              )
   
  })
```

By default DT includes some table control elements such as page length, pagination, and the filter (search) bar. Toggle these elements with the `dom` keyword argument. The `dom` options and their definitions can be found here: [https://datatables.net/reference/option/dom](https://datatables.net/reference/option/dom)

### Hide Columns

```{r}
# Server

  output$main_table <- renderDT({
    
    # remove the last three columns
    df <- filtered_df()[, 1:(ncol(df)-3)]
    
    datatable(df,
              rownames = FALSE,
              colnames = str_to_title(str_replace_all(colnames(df), "_", " ")),
              options = list(pageLength = 20,
                             lengthMenu = c(20, 60, 100),
                             dom = 'ltipr' # default is 'lftipr', exclude f to remove search bar 
                             ),
              filter = 'top'
              )
   
  })

```

In the previous example, to remove the last three columns from the table we manipulated the data frame itself. In lieu of altering the data, it's possible to use DT to simply hide the columns by using the `columnDefs` argument within `options`. There are, however, several quirks to know!

1) The targets argument require a numeric vector. Column names don't work.
2) The first column in the DT is 0 not 1.

```{r}

# hiding the last 3 columns in an 8 column table.
datatable(...,
          options = list(columnDefs = list(list(visible = FALSE, targets = c(5, 6, 7))))
          )
```

## Format & Styling

Format and style the table with some [helper functions](https://rstudio.github.io/DT/functions.html). Without manipulating the data itself, table columns can be displayed as currency, percentages, round numbers, or dates.

- `formatCurrency()`
- `formatPercentage()`
- `formatRound()`
- `formatDate()`

Additionally, [styles](https://rstudio.github.io/DT/010-style.html) can also be applied to table cells with a few helping functions:

- `styleInterval()`: style for intervals of data.
- `styleColorBar()`: displaying a color bar in the cell. Its size is relative to the share of the largest value in the column.
- `styleEqual()`: style based on unique values.

```{r}
# Server

   output$main_table <- renderDT({
    
    # remove last three columns
    df <- filtered_df()[, 1:(ncol(df)-3)]
    
    # customize the appearance of the DT
    datatable(df,
              rownames = FALSE,
              colnames = str_to_title(str_replace_all(colnames(df), "_", " ")),
              options = list(pageLength = 20,
                             lengthMenu = c(20, 60, 100),
                             dom = 'ltipr' # default is 'lftipr'
                             ),
              filter = 'top'
              ) %>%
      
      # conditional styling of cell text
      formatStyle('name',
                  'sex',
                  color = styleEqual(unique(df$sex), c('dodgerblue', 'orange'))
      ) %>% 
      
      # add a color bar to a numeric column.
      formatStyle('count',
                  background = styleColorBar(df$count, 'rgba(0, 128, 255, .2)'),
                  backgroundSize = '100% 90%',
                  backgroundRepeat = 'no-repeat',
                  backgroundPosition = 'center'
                  )
    
  })
```

Keyword arguments in `formatStyle()` are simply CSS properties. Properties are written in camel case (`backgroundSize`) instead of kebab case (`background-size`).

# Reactable

[Reactable](https://glin.github.io/reactable/) is a more recent interactive data table package. It is similar to DT but also includes additional features such as:

- [embedding htmlwidgets](https://glin.github.io/reactable/articles/examples.html#embedding-html-widgets) (e.g. sparklines, boxplots, etc.) within cells.
- [other custom rendering](https://glin.github.io/reactable/articles/examples.html#custom-rendering-1)
- [custom grouping and aggregation](https://glin.github.io/reactable/articles/examples.html#grouping-and-aggregation-1)
- [expandable row details](https://glin.github.io/reactable/articles/examples.html#nested-tables-1)

```{r, echo = FALSE, eval = TRUE}
knitr::include_url("https://glin.github.io/reactable/articles/womens-world-cup/womens-world-cup.html")
```