communities.qmd

---
title: Communities
execute: 
  echo: false
---

```{r}
library(reactable)
library(htmltools)
```

```{r}
communities <- read.csv("communities.csv")
```

```{r}
filter_fct <- function(values, name) {
  tags$select(
    tags$option(value = "", "All"),
    purrr::map(unique(values), tags$option),
    onchange = glue::glue(
      "Reactable.setFilter(
        'communities-tbl', 
        '{name}', 
        event.target.value  // This is the value of the dropdown menu
      )"
    ),
    style = "width: 100%; height: 28px;"
  )
}

exact_match_fct <- function() {
  JS("(rows, columnId, filterValue) => {
        return rows.filter(row => row.values[columnId] === filterValue)
      }")
}
```


```{r}
reactable(
  communities,
  columns = list(
    Community.name = colDef(name = "Community name"),
    Description = colDef(name = "Description"),
    Website = colDef(cell = function(value) {
      tags$a(href = value, target = "_blank", value)
    }),
    Region = colDef(name = "Region",
                    filterInput = filter_fct,
                    # filterMethod contains some JavaScript code
                    # Specifies that the filter should be an exact match
                    # exact_match_fct is defined above
                    filterMethod = exact_match_fct()
    ),
    Theme = colDef(name = "Theme",
                   filterInput = filter_fct,
                   filterMethod = exact_match_fct()
    )
  ),
  filterable = TRUE,
  defaultPageSize = 20,
  elementId = "communities-tbl"
)
```