kcuilla / reactablefmtr

Streamlined Table Styling and Formatting for Reactable
https://kcuilla.github.io/reactablefmtr/
Other
208 stars 27 forks source link

`data_bars()` + `color_tiles()` forcing reactable's Javascript API `Reactable.setData()` function to Index when trying to filter #65

Closed mrworthington closed 10 months ago

mrworthington commented 10 months ago

Hi Kyle,

While I'm not 100% sure why this is happening, I've noticed that when I apply data_bars() to one of my columns while using @glin's sJavascript API inside of reactable, it forces my table to index when filtered. As a result, the category deselected gets filtered out, but the numbers relating to it are inherited.

FWIW, I believe this issue is related to #58

Screenshare 1: Using {reactablefmtr}'s data_bars() +color_tiles() helpers.

In the screencapture below, Category 2 is deselected from the filter, but Category 3's data is dropped and Category 3 ends up inheriting the values from Category 2. This IS NOT the expected behavior

https://github.com/kcuilla/reactablefmtr/assets/8171106/c624f409-e6a9-4e3e-84f3-8fe8f99e07ff

Reproducible Example ````md --- title: "Category Analysis" engine: knit format: dashboard: theme: - cosmo execute: message: false echo: false --- ```{r} library(tidyverse) library(reactable) library(reactablefmtr) demo_table <- tibble( category = c("Category 1","Category 2", "Category 3"), value_1 = c(1000, 3000, 4800), value_2 = c(325, 783, 1149) ) |> mutate(value_3 = value_2/value_1) ojs_define(demo_table_ojs = demo_table) ``` ## {.sidebar} ```{ojs} //| panel: input viewof cat_selection = Inputs.checkbox(["Category 1", "Category 2", "Category 3"], {label: "Select A Category:", value: ["Category 1", "Category 2", "Category 3"] } ) ``` ## Row ```{ojs} //| include: false demo_ojs = transpose(demo_table_ojs) filtered = demo_ojs.filter(d => { return cat_selection.includes(d.category) }) Reactable.setData('tbl_1', filtered) ``` ```{r} #| title: "Category Overview" reactable( demo_table, elementId = "tbl_1", theme = fivethirtyeight(header_font_size = 12, header_font_color = "#6d6d6d"), columnGroups = list( colGroup(name = "Grouped Values", columns = c("value_2", "value_3")) ), columns = list( category = colDef(name = "Category"), value_1 = colDef(name = "Value 1", cell = color_tiles(demo_table, colors = rcartocolor::carto_pal(name = "Mint") |> rlist::list.reverse(), number_fmt = scales::dollar_format(accuracy =0.1) )), value_2 = colDef(name = "Value 2", cell = data_bars(demo_table, fill_color = rcartocolor::carto_pal(name = "Teal"), background = 'transparent', number_fmt = scales::dollar_format(scale = 0.001, accuracy = 0.1, suffix = "K"), fill_opacity = 0.8, text_color = "#2d2d2d", text_position = "outside-end")), value_3 = colDef(name = "Value 3", cell = data_bars(demo_table, fill_color = rcartocolor::carto_pal(name = "Temps") |> rlist::list.reverse(), background = 'transparent', number_fmt = scales::percent_format(accuracy =0.1), fill_opacity = 0.8, text_color = "#2d2d2d", text_position = "outside-end")) ) ) ``` ````

Screenshare 2: W/o using {reactablefmtr}'s data_bars() +color_tiles() helpers.

In the screencapture below, Category 2 is deselected from the filter, but Category 2's data is dropped and Category 3 retains the values from Category 3. This IS the expected behavior

https://github.com/kcuilla/reactablefmtr/assets/8171106/ea5bb16b-0bd5-4937-87b9-97b30d05c382

Reproducible Example ````md --- title: "Category Analysis" engine: knit format: dashboard: theme: - cosmo execute: message: false echo: false --- ```{r} library(tidyverse) library(reactable) library(reactablefmtr) demo_table <- tibble( category = c("Category 1","Category 2", "Category 3"), value_1 = c(1000, 3000, 4800), value_2 = c(325, 783, 1149) ) |> mutate(value_3 = value_2/value_1) ojs_define(demo_table_ojs = demo_table) ``` ## {.sidebar} ```{ojs} //| panel: input viewof cat_selection = Inputs.checkbox(["Category 1", "Category 2", "Category 3"], {label: "Select A Category:", value: ["Category 1", "Category 2", "Category 3"] } ) ``` ## Row ```{ojs} //| include: false demo_ojs = transpose(demo_table_ojs) filtered = demo_ojs.filter(d => { return cat_selection.includes(d.category) }) Reactable.setData('tbl_1', filtered) ``` ```{r} #| title: "Category Overview" reactable( demo_table, elementId = "tbl_1", theme = fivethirtyeight(header_font_size = 12, header_font_color = "#6d6d6d"), columnGroups = list( colGroup(name = "Grouped Values", columns = c("value_2", "value_3")) ), columns = list( category = colDef(name = "Category"), value_1 = colDef(name = "Value 1"), value_2 = colDef(name = "Value 2"), value_3 = colDef(name = "Value 3") ) ) ``` ````
mrworthington commented 10 months ago

I am closing this issue here as it's not a bug of this package. See the issue filed on reactable's repository for more info.