In glin/reactable: Interactive Data Tables for R

knitr::opts_chunk$set(echo = TRUE)

library(reactable)

Custom sort icons using CSS pseudo-elements

library(reactable)
library(htmltools)

reactable(
  MASS::Cars93[, 1:5],
  defaultSorted = "Min.Price",
  defaultColDef = colDef(
    header = function(value) {
      # Add custom sort icons to the right of each column header.
      # They don't have any content by themselves, but we'll insert
      # text content (arrow symbols) in them using CSS.
      # Also, ensure these are hidden from screen readers using aria-hidden="true".
      sort_icon <- span(class = "my-sort-icon", "aria-hidden" = TRUE)
      tagList(value, sort_icon)
    }
  ),
  # Hide the built-in sort icon
  showSortIcon = FALSE
)

Sortable column headers will have an aria-sort attribute set to either none (unsorted), ascending (ascending sort), or descending (descending sort).

You can use the aria-sort state, along with CSS pseudo-elements, to insert custom arrow arrow symbols (or any other symbol, emoji, text) for each sorting state.

/* Styling for all sort icons */
[aria-sort] .my-sort-icon {
  margin-left: 5px;
  color: #3f51b5;
}

/* Styling for ascending sort icon */
[aria-sort='ascending'] .my-sort-icon::after {
  /* Up arrow (Unicode) */
  content: '\2bc5';
}

/* Styling for descending sort icon */
[aria-sort='descending'] .my-sort-icon::after {
  /* Down arrow (Unicode) */
  content: '\2bc6';
}

/* Styling for unsorted sort icon */
[aria-sort='none'] .my-sort-icon::after {
  /* Up-and-down arrow (Unicode) */
  content: '\2195';
  opacity: 0.8;
}

To find other Unicode arrows and symbols, see https://en.wikipedia.org/wiki/Arrow_(symbol)#Arrows_in_Unicode or https://www.fileformat.info/info/unicode/block/geometric_shapes/list.htm.

```{css echo=FALSE} / rmarkdown html documents / .main-container { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }

.main-container blockquote { font-size: inherit; } ```

glin/reactable documentation built on Jan. 25, 2025, 7:41 p.m.