I am trying to shift the filtering to the right hand side but not able to. Can anyone please help. please refer the expected output. Is it possible to achieve this?
This might be a solution you are looking for (surely there are others).
As I understood, you need to align your elements (selectInput, dateRangeInput) to the right. You may try different values for width and/or offset for better alignment.
Also, see what happens when you add argument filter = "top" to the function datatable.
fluidRow(
column(width = 6, offset = 9,
# width The grid width of the column (must be between 1 and 12(max.))
# offset The number of columns to offset this column from the end of the previous column
column(width = 3,
selectInput("Tic","Ticker",choices = c("","ALL",as.character(iris$Species)),selected = NULL)
),
column(width = 3,
dateRangeInput("Date","Date",start = '2016-01-01', end = Sys.time(),format = "yyyy-mm-dd")
)))
DT::DTOutput('SUMMARY_GENERAL_table')
output$SUMMARY_GENERAL_table <- DT::renderDT(datatable(iris, filter = "top"))
Thanks it helped me. But sorry, another question strike to my mind. if I add submit button at the end, why it is not aligned. below is the code
fluidRow(
column(width = 6, offset = 9,
# width The grid width of the column (must be between 1 and 12(max.))
# offset The number of columns to offset this column from the end of the previous column
column(width = 2,
selectInput("Tic","Ticker",choices = c("","ALL",as.character(iris$Species)),selected = NULL)
),
column(width = 2,
dateRangeInput("Date","Date",start = '2016-01-01', end = Sys.time(),format = "yyyy-mm-dd")
),
column(width = 2,
actionButton("Submit","Submit")
)))
I would change the value of offset = 8 and the value of actionButton arguement width = "130px".
I often find useful Shiny HTML tags like line break br(), using it above actionButton column turns aligment a bit smoother.
You may ignore actionButton's arguments icon and class if you don't like Bootsrap customization.
Does this look better?
fluidRow(
column(width = 6, offset = 8,
# width The grid width of the column (must be between 1 and 12(max.))
# offset The number of columns to offset this column from the end of the previous column
column(width = 3,
selectInput("Tic","Ticker",choices = c("","ALL",as.character(iris$Species)),selected = NULL)
),
column(width = 3,
dateRangeInput("Date","Date",start = '2016-01-01', end = Sys.time(),format = "yyyy-mm-dd")
),
tags$br(), # or just br()
column(width = 3,
actionButton("Submit", "Submit", width = "130px", icon("refresh"), class = "btn btn-primary")
# you may try smaller button with: class = "btn btn-primary btn-sm"
)))
Hi, All looks good as me as I expected. But can we have daterange input in line ? If you observe carefully, it is not in line with Actionbutton and Filter box. Right
and, one very promissing book comming in 2020, Building Big Shiny Apps - A Workflow by Colin Fay, Vincent Guyader, Cervan Girard and Sébastien Rochette (unfortunately, Chapter 8: A Gentle Introduction to CSS is currently under development); definitely worth keeping eye on it.