Hard to find where to edit empty cells.

[jjesusfilho]

If I have an editable table where one of the columns has a long text and the other is empty or NA, where I want the user to add a comment, he/she has a hard time finding where to click:

df  <-  tibble::tibble(comment = NA_character_, v2 ="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")

DT::datatable(df, editable=TRUE)

Is there a way to solve this issue?

[stla]

I don't understand what you mean: one can click anywhere in a cell. No?

[mtyszler]

Hi @jjesusfilho ,

This sounds to me much more like an usage problem than a package issue.

I suggest you simply initialize the cell with "Click here to edit" instead of NaN.

[jjesusfilho]

Hi @jjesusfilho ,

This sounds to me much more like an usage problem than a package issue.

I suggest you simply initialize the cell with "Click here to edit" instead of NaN.

Then the user has to delete that phrase. Ideally, a placeholder would work. Right now, I am using formatString to add a suffix indicating where to click. The advantage is that the suffix, though it keeps showing up, is ignored when the user saves the comments on the database.

[stla]

Here is how to set a placeholder:

library(shiny)
library(DT)

dat <- data.frame(
  Col1 = c("", ""),
  Col2 = c("a", "b")
)

CSS <- "
table td.withPlaceholder:empty:before {
  content: 'Edit me';
  color: gray;
}
"

ui <- fluidPage(
  tags$head(
    tags$style(HTML(CSS))
  ),
  br(),
  DTOutput("dtable")
)

server <- function(input, output){
  
  output[["dtable"]] <- renderDT({
    datatable(
      dat, 
      rownames = FALSE,
      editable = "cell",
      options = list(
        columnDefs = list(
          list(targets = 0, className = "withPlaceholder")
        )
      )
    )
  })
  
}

shinyApp(ui, server)

[jjesusfilho]

Here is how to set a placeholder:

library(shiny)
library(DT)

dat <- data.frame(
  Col1 = c("", ""),
  Col2 = c("a", "b")
)

CSS <- "
table td.withPlaceholder:empty:before {
  content: 'Edit me';
  color: gray;
}
"

ui <- fluidPage(
  tags$head(
    tags$style(HTML(CSS))
  ),
  br(),
  DTOutput("dtable")
)

server <- function(input, output){
  
  output[["dtable"]] <- renderDT({
    datatable(
      dat, 
      rownames = FALSE,
      editable = "cell",
      options = list(
        columnDefs = list(
          list(targets = 0, className = "withPlaceholder")
        )
      )
    )
  })
  
}

shinyApp(ui, server)

This is great.