colVisibility extension not showing

[afpapa2]

I copied code from the tutorial into R and can't get the colVisibility filter to show up at all. I used this code to enable the extension:

library(shiny)
library(htmlwidgets)
library(D3TableFilter)

data(mtcars);

shinyServer(function(input, output, session) {
  output$mtcars <- renderD3tf({
    
    # Define table properties. See http://tablefilter.free.fr/doc.php
    # for a complete reference
    tableProps <- list(
      btn_reset = TRUE,
      # alphabetic sorting for the row names column, numeric for all other columns
      col_types = c("string", rep("number", ncol(mtcars)))
    );
    
    extensions <-  list(
      list(name = "sort"),
      list( name = "colsVisibility",
            at_start =  c(1,2,3,4,5),
            text = 'Hide columns: ',
            enable_tick_all =  TRUE
      ),
      list( name = "filtersVisibility",
            visible_at_start =  TRUE)
    );
    
    d3tf(mtcars,
         tableProps = tableProps,
         extensions = extensions,
         edit = TRUE,
         showRowNames = TRUE,
         tableStyle = "table table-bordered");
  })
})

I do not get the "Display columns" column filter at the top right. The code also doesn't seem to hide the columns (1,2,3,4,5) at start.

[ThomasSiegmund]

Hi,

this may have been a recently fixed bug (missing/wrong dependency). Could you please try the current version of D3TableFilter? I've put your code in a complete app below for better reproducibilty.

Best

Thomas

library(shiny)
library(htmlwidgets)
library(D3TableFilter)
data(mtcars)

# ui.R
# --------------------------------------------------------
ui <- fluidPage(
  titlePanel('Test app'),
  sidebarLayout(
    sidebarPanel(
       wellPanel(HTML("Test app"))
    ),
    mainPanel(
      br(),
      d3tfOutput('mtcars')
    )
))

# server.R
# --------------------------------------------------------
server <- shinyServer(function(input, output, session) {
  
  output$mtcars <- renderD3tf({
    
    # Define table properties. See http://tablefilter.free.fr/doc.php
    # for a complete reference
    tableProps <- list(
      btn_reset = TRUE,
      # alphabetic sorting for the row names column, numeric for all other columns
      col_types = c("string", rep("number", ncol(mtcars)))
    );
    
    extensions <-  list(
      list(name = "sort"),
      list( name = "colsVisibility",
            at_start =  c(1,2,3,4,5),
            text = 'Hide columns: ',
            enable_tick_all =  TRUE
      ),
      list( name = "filtersVisibility",
            visible_at_start =  TRUE)
    );
    
    d3tf(mtcars,
         tableProps = tableProps,
         extensions = extensions,
         edit = TRUE,
         showRowNames = TRUE,
         tableStyle = "table table-bordered");
  })

})

[afpapa2]

The functionality now works, but there seems to be a visual glitch where the column utility buttons at the top right corner are overlapping no matter what resolution I am sized at.

[ThomasSiegmund]

In what environment do you see this problem? For me it works fine. Im using it on Linux and Windows, in Firefox and Chrome.

Sometimes such glitches are the result of stale files in the browser cache...

How does the TableFilter demo page look for you?

[afpapa2]

It works fine, but when I run it in R shiny in my chrome/windows7 browser it doesn't.

[afpapa2]

After more testing, it turns out that the real issue seems to be with the filtersVisibility extension. When I remove that the visual artifact goes away. According to this example: http://koalyptus.github.io/TableFilter/filters-visibility.html the filter visibility should be a small icon, however, in my application it is coming up as the word "Collapse" or "Expand" which takes up far more space than the small icon shown in the example. I think this is the root of the issue.

Not sure if this helps, but I went into dev tools in chrome and found some errors. Also, I cleared all the temp files in chrome.

I'm also running this application from a business. I had to configure the install_git to go through a proxy to install your package. Not sure if any of that information helps or not.

[ThomasSiegmund]

This error messages about missing css files look like a recently fixed bug. Can you please make sure that you run the latest version? I have updated the D3TableFilter version to 0.71 today. The test app below should print this version in the left panel. I've attached a screenshot how this looks for me.

library(shiny)
library(htmlwidgets)
library(D3TableFilter)
data(mtcars)

# ui.R
# --------------------------------------------------------
ui <- fluidPage(
  titlePanel('Test app'),
  sidebarLayout(
    sidebarPanel(
       wellPanel(HTML(paste("D3TableFilter test app<br>Package version",
                            sessionInfo()$otherPkgs$D3TableFilter$Version)))
    ),
    mainPanel(
      br(),
      d3tfOutput('mtcars')
    )
))

# server.R
# --------------------------------------------------------
server <- shinyServer(function(input, output, session) {
  
  output$mtcars <- renderD3tf({
    
    # Define table properties. See http://tablefilter.free.fr/doc.php
    # for a complete reference
    tableProps <- list(
      btn_reset = TRUE,
      # alphabetic sorting for the row names column, numeric for all other columns
      col_types = c("string", rep("number", ncol(mtcars)))
    );
    
    extensions <-  list(
      list(name = "sort"),
      list( name = "colsVisibility",
            btn_text = "Hide Columns",
            enable_tick_all =  TRUE
      ),
      list( name = "filtersVisibility",
            visible_at_start =  TRUE)
    );
    
    
     colsResizableOpts <- list(resizeMode = "flex",
                              liveDrag = TRUE)
     
    d3tf(mtcars,
         tableProps = tableProps,
         extensions = extensions,
         edit = TRUE,
         showRowNames = TRUE,
         tableStyle = "table table-bordered",
         colsResizable = TRUE,
         colsResizableOptions = colsResizableOpts);
  })

})

runApp(list(ui=ui,server=server))

[afpapa2]

It still does not work for me.

Are there any other dependencies that I need to check on?

[ThomasSiegmund]

Strange, I can't reproduce this. The text overlapping with the colum visibilty stuff seems to be a placeholder for the filters visibility icon. But this icon is in the package and should be found:

icn_exp.png

Any errors in the Javascript console?

[afpapa2]

Yes, I showed those errors in my 4th comment here. See above. Also, the file does exist and is the correct png, but still doesn't show in my app.