Add number_extra() for numeric inputs in reactable

[Johan-rosa]

Have you read the Contributing Guidelines?

Issue #25

Changes description

1. number_extra function and its js wrapper numberExtras were added

How to test

Run this example and play with the numbers

library(shiny)
library(reactable)
library(reactable.extras)

string_list <- function(values) {
  paste0(
    "{", paste0(names(values), " : ", unlist(values), collapse = ", "), "}"
  )}

ui <- fluidPage(
  reactable_extras_dependency(),
  reactableOutput("react"),
  textOutput("number_text"),
  textOutput("text")
)

server <- function(input, output, session) {
  output$react <- renderReactable({
    tibble::tibble(
      name = c("Portfolio 1", "Portfolio 2", "Portfolio 3"),
      expected_return = c(0.0687, 0.060, 0.050) * 100,
      expected_volatility = c(0.1575, 0.140, 0.120) * 100
    ) |>
      reactable(
        columns = list(
          name = colDef(cell = text_extra("text")),
          expected_return = colDef(cell = number_extra("number", class = "number-extra"))
        )
      )
  })
  output$text <- renderText({
    req(input$text)
    values <- input$text
    paste0(
      "Text: ",
      string_list(values)
    )
  })

  output$number_text <- renderText({
    req(input$number)
    values <- input$number
    paste0(
      "Text: ",
      string_list(values)
    )
  })
}

shinyApp(ui, server)

[prasan2421]

I cannot see number_extra() working yet. Is this function still yet to be released?

[Andryas]

When this feature will be released?

[Johan-rosa]

I see now that the PR is close since I deleted the fork from my profile. @jakubnowicki It looks like a needed feature.

cc: @vibalre

[Johan-rosa]

@Andryas this can be a workaround, I added a event listener to format the input values :

library(shiny)
library(reactable)
library(reactable.extras)

ui <- fluidPage(
  reactable_extras_dependency(),
  reactableOutput("table", width = 400)
)

server <- function(input, output, session) {
  output$table <- renderReactable({
    print(input$salary)
    
    data.frame(
      name = c("Johan Rosa", "Oscar Pascual"),
      salary = c(NA, NA)
    ) |>
      reactable(
        columns = list(
          salary = colDef(cell = text_extra("salary", class = "salary-input"))
        )
      ) |>
      htmlwidgets::onRender(
        "
          $('.salary-input').each(function() {
            $(this).on('input', function() {
                // Remove letters and commas, then format with commas
                const newValue = $(this).val().replace(/[^\\d]/g, '');
                $(this).val(formatNumberWithComma(newValue));
            });
          });

          const formatNumberWithComma = (number) => {
              return number.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',');
          };
        "
      )
  })
}

shinyApp(ui, server)

[Andryas]

Thank you @Johan-rosa, nice workaround.