nls1200
nls1200

Reputation: 75

Adding regular button to datatable

I use datatable in my shiny app. I want to add a button close to the search button. When I click on the button I want to call the function: observeEvent(input[["btn"]]. This is my code:

   DT::renderDataTable(rownames = FALSE,                         
                               DT::datatable(my_df,extensions = 'Buttons',  
                  options = list(info  = FALSE, paging = FALSE, 
                                 dom='Bfrtip', buttons= list('copy')
                                  )))

It's looks great, but instead of the copy button I want a regular button that calls this function: observeEvent(input[["btn"]]. Do you have any idea how can I do it?

Upvotes: 0

Views: 1273

Answers (2)

Gregory Warnes
Gregory Warnes

Reputation: 9

Example for 'Select All' and 'Select None' buttons:

  output$data_table <- renderDT(
  datatable(
    iris,
    select = 'multiple',
    extensions=c(
      "Buttons",
    ),
    options = list(
      dom = 'Blfrtip',
      columnDefs = list(
        # hide columns with column_info$Show!='Yes'
        # adjusting for Javascript's 0 offset
        list(targets = which(column_info$Show!='Yes')-1,
             visible = FALSE)
      ),
      buttons = list(
        list(
          extend = 'collection',
          text = 'Select All',
          action = DT::JS(
            r"(
            function() {
                var node = this[0].node;
                var value = $(node).attr('data-value') || 0;
                value ++;
                $(node).attr('data-value', value);
                Shiny.setInputValue('select_all_btn', value, {priority: 'event'});
            }
            )"
          )
        ),
        list(
          extend = 'collection',
          text = 'Select None',
          action = DT::JS(
            r"(
            function() {
                var node = this[0].node;
                var value = $(node).attr('data-value') || 0;
                value ++;
                $(node).attr('data-value', value);
                Shiny.setInputValue('select_none_btn', value, {priority: 'event'});
            }
            )"
          )
        ),
        'copy',
        'csv',
        'excel',
        'print'
      )
    )
  )

  observeEvent(
    input$select_all_btn,
    {
      DT::dataTableProxy('data_table') |>
        selectRows(selected=1:nrow(project_data()))
    }
  )
  
  
 observeEvent(
    input$select_none_btn,
    {
      DT::dataTableProxy('data_table') |>
        selectRows(selected=NULL)
    }
  )

Upvotes: 0

lz100
lz100

Reputation: 7340

Let's define a custom button.

Change the button label by text, change the shiny input ID in setInputValue, change mydf_btn to whatever you want.

library(shiny)

ui <- fluidPage(
  DT::DTOutput("mydf")
)

server <- function(input, output, session) {
    output$mydf <- DT::renderDataTable(                       
                        DT::datatable(
                            iris,extensions = 'Buttons', rownames = FALSE,  
                            options = list(
                            info  = FALSE, paging = FALSE, dom='lfBrtip', 
                            buttons= list(
                                list(
                                    extend = 'collection',
                                    text = 'My Action',
                                    action = DT::JS(
                                    "function() {
                                        var node = this[0].node;
                                        var value = $(node).attr('data-value') || 0;
                                        value ++;
                                        $(node).attr('data-value', value);
                                        Shiny.setInputValue('mydf_btn', value, {priority: 'event'});
                                    }"
                                    )
                                )
                            )
                          )
                        )
    )
    observe(print(input$mydf_btn))
}

shinyApp(ui, server)

enter image description here

Upvotes: 3

Related Questions