show the search button inside a DT table as part of a guide #28

shahreyar-abeer · 2021-04-29T09:19:27Z

Hi John,

A couple of issues.

I want to show the search button inside a DT table as part of a guide.
It doesn't show at the moment. I've checked the id and its not wrong.
The guide just goes past this step!
The guide doesn't launch on startup so I've had to use an actionButton for triggering it.

Here is the app:

library(shiny)
library(DT)
library(cicerone)

ui <- fluidPage(
  use_cicerone(), # include dependencies
  br(),
  br(),
  actionButton("guide", "Guide"),
  DTOutput('tbl'),
  
)

server <- function(input, output){
  
  # initialise the guide
  guide$init()
  
  observeEvent(input$guide, {
    guide$start()
  })
  
  output$tbl = renderDT(
    iris, options = list(lengthChange = FALSE)
  )
}

shinyApp(ui, server)

guide <- Cicerone$
  new()$ 
  step(
    el = "tbl",
    title = "DT table",
    description = "This is a DT table"
  )$
  step(
    "DataTables_Table_0_filter",
    "Search",
    "This is search"
  )

The text was updated successfully, but these errors were encountered:

shahreyar-abeer · 2021-05-30T09:05:43Z

I understand that it's part of the data-table itself, but that doesn't mean it's not reachable. Since it has an unique id, I think there should be a way to use it as a step in cicerone.
Will leave it to @JohnCoene to solve the issue.

Thanks.

JohnCoene · 2021-05-31T10:25:15Z

Yes indeed, it should be "selectable" but for some reason driver.js refuses to.

// works
document.querySelector('#tbl input')

I'm not sure why. I'll see if I can come up with a solution.

etiennebacher · 2021-08-15T20:05:15Z

Small follow-up on that, here's a raw example that shows that driver.js can select the "Search" area. So I think the problem is on the R side, not driver.js:

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/dataTables.bootstrap.min.css"/>
      
      <!-- Files for driver.js --> 
      <script src="https://unpkg.com/driver.js/dist/driver.min.js"></script>
      <link rel="stylesheet" href="https://unpkg.com/driver.js/dist/driver.min.css">
  </head>

  <body>
    <button id="btn">launch driver.js</button>
      <div id="tbl" class="datatables html-widget html-widget-output shiny-bound-output" style="width:100%; height:auto; " aria-live="polite">
        <div id="DataTables_Table_0_wrapper" class="dataTables_wrapper no-footer"><div id="DataTables_Table_0_filter" class="dataTables_filter"><label>Search:<input type="search" class="" placeholder="" aria-controls="DataTables_Table_0"></label></div><div id="DataTables_Table_0_processing" class="dataTables_processing" style="display: none;">Processing...</div><table class="display dataTable no-footer" id="DataTables_Table_0" role="grid" aria-describedby="DataTables_Table_0_info">
          <thead>
            <tr role="row"><th class="sorting_disabled" rowspan="1" colspan="1" aria-label=" "> </th><th class="dt-right sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Sepal.Length: activate to sort column ascending">Sepal.Length</th><th class="dt-right sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Sepal.Width: activate to sort column ascending">Sepal.Width</th><th class="dt-right sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Petal.Length: activate to sort column ascending">Petal.Length</th><th class="dt-right sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Petal.Width: activate to sort column ascending">Petal.Width</th><th class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Species: activate to sort column ascending">Species</th></tr>
          </thead>
        <tbody><tr role="row" class="odd"><td>1</td><td class=" dt-right">5.1</td><td class=" dt-right">3.5</td><td class=" dt-right">1.4</td><td class=" dt-right">0.2</td><td>setosa</td></tr><tr role="row" class="even"><td>2</td><td class=" dt-right">4.9</td><td class=" dt-right">3</td><td class=" dt-right">1.4</td><td class=" dt-right">0.2</td><td>setosa</td></tr><tr role="row" class="odd"><td>3</td><td class=" dt-right">4.7</td><td class=" dt-right">3.2</td><td class=" dt-right">1.3</td><td class=" dt-right">0.2</td><td>setosa</td></tr><tr role="row" class="even"><td>4</td><td class=" dt-right">4.6</td><td class=" dt-right">3.1</td><td class=" dt-right">1.5</td><td class=" dt-right">0.2</td><td>setosa</td></tr><tr role="row" class="odd"><td>5</td><td class=" dt-right">5</td><td class=" dt-right">3.6</td><td class=" dt-right">1.4</td><td class=" dt-right">0.2</td><td>setosa</td></tr><tr role="row" class="even"><td>6</td><td class=" dt-right">5.4</td><td class=" dt-right">3.9</td><td class=" dt-right">1.7</td><td class=" dt-right">0.4</td><td>setosa</td></tr><tr role="row" class="odd"><td>7</td><td class=" dt-right">4.6</td><td class=" dt-right">3.4</td><td class=" dt-right">1.4</td><td class=" dt-right">0.3</td><td>setosa</td></tr><tr role="row" class="even"><td>8</td><td class=" dt-right">5</td><td class=" dt-right">3.4</td><td class=" dt-right">1.5</td><td class=" dt-right">0.2</td><td>setosa</td></tr><tr role="row" class="odd"><td>9</td><td class=" dt-right">4.4</td><td class=" dt-right">2.9</td><td class=" dt-right">1.4</td><td class=" dt-right">0.2</td><td>setosa</td></tr><tr role="row" class="even"><td>10</td><td class=" dt-right">4.9</td><td class=" dt-right">3.1</td><td class=" dt-right">1.5</td><td class=" dt-right">0.1</td><td>setosa</td></tr></tbody></table><div class="dataTables_info" id="DataTables_Table_0_info" role="status" aria-live="polite">Showing 1 to 10 of 150 entries</div><div class="dataTables_paginate paging_simple_numbers" id="DataTables_Table_0_paginate"><a class="paginate_button previous disabled" aria-controls="DataTables_Table_0" data-dt-idx="0" tabindex="-1" id="DataTables_Table_0_previous">Previous</a><span><a class="paginate_button current" aria-controls="DataTables_Table_0" data-dt-idx="1" tabindex="0">1</a><a class="paginate_button " aria-controls="DataTables_Table_0" data-dt-idx="2" tabindex="0">2</a><a class="paginate_button " aria-controls="DataTables_Table_0" data-dt-idx="3" tabindex="0">3</a><a class="paginate_button " aria-controls="DataTables_Table_0" data-dt-idx="4" tabindex="0">4</a><a class="paginate_button " aria-controls="DataTables_Table_0" data-dt-idx="5" tabindex="0">5</a><span class="ellipsis">…</span><a class="paginate_button " aria-controls="DataTables_Table_0" data-dt-idx="6" tabindex="0">15</a></span><a class="paginate_button next" aria-controls="DataTables_Table_0" data-dt-idx="7" tabindex="0" id="DataTables_Table_0_next">Next</a></div></div>
        </div>

      <script>
          const driver = new Driver();
          
          driver.defineSteps([
          {
            element: '#tbl',
            popover: {
              title: 'Test 1',
              position: 'bottom'
            }
           },
            {
            element: '#DataTables_Table_0_filter',
            popover: {
              title: 'Test 2',
              position: 'bottom'
            }
           }
         ]);
         let btn = document.querySelector('#btn');
         btn.addEventListener('click', function(){
          event.stopPropagation()
          driver.start(); 
         });
         </script>
      
  </body>
</html>

etiennebacher mentioned this issue Nov 16, 2021

Highlight "search" area in DataTable #33

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

show the search button inside a DT table as part of a guide #28

show the search button inside a DT table as part of a guide #28

shahreyar-abeer commented Apr 29, 2021 •

edited

shahreyar-abeer commented May 30, 2021 •

edited

JohnCoene commented May 31, 2021

etiennebacher commented Aug 15, 2021

show the search button inside a DT table as part of a guide #28

show the search button inside a DT table as part of a guide #28

Comments

shahreyar-abeer commented Apr 29, 2021 • edited

shahreyar-abeer commented May 30, 2021 • edited

JohnCoene commented May 31, 2021

etiennebacher commented Aug 15, 2021

shahreyar-abeer commented Apr 29, 2021 •

edited

shahreyar-abeer commented May 30, 2021 •

edited