-
Notifications
You must be signed in to change notification settings - Fork 80
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Range filtering #9
Comments
Only text filtering is supported for now, but I've always wanted different filter types like a range input or dropdown list in the table. I don't know when I'll get to it, but it's definitely high on the to-do list! Thanks for the feedback. |
Found this after Twitter discussion. Lines disallow any custom
and assuming user is very JS literate we can then define a custom filter with the code below
|
@nistara I added an example of a range slider using material-ui.
|
Thanks @glin, much appreciated!!! @timelyportfolio Thanks a lot for showing the examples above! I'm going to try to get this working with my data. This slider looks nicer than the one from the |
@timelyportfolio Nice examples! Looks like exposing |
Hope there's future capability to do multi-entity filtering on character columns too 🤩 |
@glin - Thanks for the amazing package. Really nice output! Love it! @timelyportfolio & @glin - Do you believe that the approach that @timelyportfolio took for the value filter could be used for factors? But this time doing the selection via drop down. Do you believe that it could be possible the approach of @timelyportfolio and do you believe it could work? I would love your view on the feasibility:) |
Just wanted to say that this would be a great addition. If could set |
Hey @tyluRp Can I see the implementation of the dropdown with |
@shahreyar-abeer To clarify, I use |
Oh, yeah I am looking for a dropdown inside the reactable. Looks like it isn't getting much attention here! |
I hope to get back to this, but unfortunately have not had the time or a project that requires it. |
@glin This package is indeed amazing.
|
+1 for this feature request. I like using this package (thanks @glin ) because it doesn't have those slider filters like we have in |
Just played a little with |
I'd like to +1 this feature request. A new reactable adopter and loving it, but this keeps me from making the switch from DT in a lot of places. |
+1 for the dropdown filter. This is also preventing me from switching from DT |
Far from perfect, but I updated the example to work with newest
|
Just wanted to express my wish for allowing different column-based filter methods based on the column type (e.g., dropdown for character/factor, range for numeric). Would make this already invaluable package even more perfect! |
+1 on this! slider range filters on continuous data as in |
Thanks all for the feedback and @timelyportfolio for those examples. Custom filtering is now first-class supported in the development version. See the Custom Filtering article for usage and a bunch of examples. There are a few examples about range filtering specifically:
There's still no built-in range filter though, so I'm keeping this issue open. That might be added some day, but it's not in my short-term priorities because of the required effort and lack of time. Unfortunately, the native |
Hey, I am currently switching from |
@glin this is amazing, and I really appreciate all the efforts that you have so generously expended on
|
@timelyportfolio Nice example. And yeah, using the filter slot for just arbitrary custom rendering is totally valid, and that had occurred to me as well. A better named feature might be a separate row of "sub headers", where you can render whatever you want just below the table headers. I could imagine wanting to show sparklines there while also keeping the default filter inputs. |
I like code provided by @timelyportfolio, however, I've encountered an issue with it. In some cases, filter range is invalid - instead of real max value from the provided data, it shows Infinity or some other (lower) value from the column. library(reactable)
library(htmltools)
example_data <- read.csv2("data.csv", sep = ",")
material_ui_range_filter_dependency_function <- function() {
list(
# Material UI requires React
reactR::html_dependency_react(),
# Material UI dependency
htmltools::htmlDependency(
name = "mui",
version = "5.6.3",
src = c(href = "https://unpkg.com/@mui/[email protected]/umd/"),
script = "material-ui.production.min.js"
),
# filter functions written in javascript
htmltools::htmlDependency(
name = "material_ui_range_filter",
version = "0.1.0",
src = c(file = here::here("inst/material_ui_range_filter")),
script = "material-ui-range-filter.js",
all_files = TRUE
)
)
}
browsable(
tagList(
material_ui_range_filter_dependency_function(),
reactable(
example_data,
columns = list(
Visibility.Score = colDef(
filterable = TRUE,
filterMethod = JS("filterRange"),
filterInput = JS("muiRangeFilter")
)
),
defaultPageSize = 5,
minRows = 5
)
))
example_data$Visibility.Score |> summary()
Min. 1st Qu. Median Mean 3rd Qu. Max.
0.0 10.0 40.0 511.1 187.0 28081.0
class(example_data$Visibility.Score)
[1] "integer" File for error reproduction: |
Thanks a lot for this great package! Is it possible to implement filtering by a range of values? For e.g. filtering rows with prices ranging from 15 to 30, instead of a single value filter. I'm not quite sure if there's another option I could use for this in addition to
filterable = TRUE
. Thanks again!The text was updated successfully, but these errors were encountered: