Reactable example #107
Reactable example #107
Conversation
There was a problem hiding this comment.
Couple of small comments to just remove data table. We're just wanting to push a single preferred solution.
Looks like a lot of lintr comments around unnecessary white space. Worth running styler::style_dir() if you haven't already.
Just to add as well, it'd be good to get some of the GDS style highlighting in as demoed in the css on one of our dashboards here:
https://github.com/dfe-analytical-services/local-authority-interactive-tool/blob/9f7aa4d06969614f55b002b50502a514d3c1d320/www/dfe_shiny_gov_style.css#L294
R/ui_panels/example_tab_1.R
Outdated
| @@ -120,7 +120,11 @@ example_tab_1_panel <- function() { | |||
| ) | |||
| ), | |||
| # Benchmarking table -------------------------------------- | |||
| dataTableOutput("tabBenchmark") | |||
| h2('An example Datatable'), | |||
| dataTableOutput("tabBenchmark"), | |||
There was a problem hiding this comment.
I think let's just remove the old reference to data table. We're moving towards reactable as we find it easier for to customise.
server.R
Outdated
| @@ -206,7 +206,7 @@ server <- function(input, output, session) { | |||
| height_svg = 5.0 | |||
| ) | |||
| }) | |||
|
|
|||
| # Benchmarking table | |||
| output$tabBenchmark <- renderDataTable({ | |||
There was a problem hiding this comment.
Again, let's just delete this, the idea is just to replace it with reactable
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
| paging = FALSE, | ||
| searching = FALSE | ||
| # defaultPageSize and minRows needed for Pagination: example here | ||
| # defaultPageSize = 4, |
Check notice
Code scanning / lintr
Commented code should be removed. Note
| searching = FALSE | ||
| # defaultPageSize and minRows needed for Pagination: example here | ||
| # defaultPageSize = 4, | ||
| # minRows = 4, |
Check notice
Code scanning / lintr
Commented code should be removed. Note
| scrollX = TRUE, | ||
| paging = FALSE, | ||
| searching = FALSE | ||
| # defaultPageSize and minRows needed for Pagination: example here |
There was a problem hiding this comment.
Let's avoid the commented out code. Just have it active (with some relatively appropriate values) and analysts can remove it if needed.
I'd also like to have highlight activated similarly to this table here:
https://github.com/dfe-analytical-services/local-authority-interactive-tool/blob/9f7aa4d06969614f55b002b50502a514d3c1d320/R/fn_table_helpers.R#L227
And then let's set an initial styling so we've got a starting point for editing the css as and when we come to that as well, e.g.:
headerClass = "bar-sort-header",
| word-break: keep-all; /* Prevents breaking words mid-word */ | ||
| white-space: normal; /* Allows line breaks between words */ | ||
| } | ||
|
|
There was a problem hiding this comment.
Initial css to back up the change requested in the reactable in server.R
| .bar-sort-header:hover, | |
| .bar-sort-header:focus { | |
| background: #fd0; | |
| } | |
| /* Add a top bar on ascending sort */ | |
| .bar-sort-header[aria-sort="ascending"] { | |
| box-shadow: inset 0 0.188rem 0 0 #1d70b8; | |
| } | |
| /* Add a bottom bar on descending sort */ | |
| .bar-sort-header[aria-sort="descending"] { | |
| box-shadow: inset 0 -0.188rem 0 0 #1d70b8; | |
| } | |
| /* Add an animation when toggling between ascending and descending sort */ | |
| .bar-sort-header { | |
| transition: box-shadow 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); | |
| } | |
| /* Table row highlighting -------------------------------------------------- */ | |
| .rt-tr-highlight:hover { | |
| background-color: #fd0; | |
| } |
Pull request overview
Reactable example beneath datatable example
...
Pull request checklist
Please check if your PR fulfills the following:
shinytest2::test_app())styler::style_dir()andlintr::lint_dir())What is the current behaviour?
...
What is the new behaviour?
...
Anything else
issue #84
...