Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

332
Visualizações
render javascript component (ag-grid) in r shiny

I am trying to include the most basic example of ag-grid from their website in a R-shiny application, starting from there I will add more and more trying to setup a proper communication frontend-backend on data edit. However I am stuck at the basics of the inclusion. The component is included in source code but not rendered:

This is the basic example from ag-grid website: https://plnkr.co/edit/nmWxAxWONarW5gj2?p=preview%3Fp%3Dpreview&preview

This is my R-Shiny application

library(shiny)
library(tidyverse)

ui <- fluidPage(
  #This tells shiny to include both css and scripts of aggrid
  tags$script(src="https://unpkg.com/ag-grid-community/dist/ag-grid-community.min.js"),
  titlePanel("Ag-Grid Basic Example"),
  uiOutput("myGrid")
)

server <- function(input, output, session) {
  #This tells shiny to run our javascript file "script.js" and send it to the UI for rendering
  output$myGrid<- renderUI({
    HTML('<script type="text/javascript", src="script.js">  </script>')
  })
}
shinyApp(ui = ui, server = server)

where in www folder I have script.js that is a simple copy paste of the content of main.js from the example linked above.

const columnDefs = [
  { field: "make" },
  { field: "model" },
  { field: "price" }
];

// specify the data
const rowData = [
  { make: "Toyota", model: "Celica", price: 35000 },
  { make: "Ford", model: "Mondeo", price: 32000 },
  { make: "Porsche", model: "Boxster", price: 72000 }
];

// let the grid know which columns and what data to use
const gridOptions = {
  columnDefs: columnDefs,
  rowData: rowData
};

// setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', () => {
    const gridDiv = document.querySelector('#myGrid');
    new agGrid.Grid(gridDiv, gridOptions);
});

Any hint on how to proceed? The console is unfortunately not telling me anything relevant, css cdn and local script are read properly, but for some reasons it is not rendering the output.

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

  1. You don't want to use something directly inside renderUI to directly modify the uiOutput container.
  2. The table container must have some initial height and width.
  3. Since this is loaded after the document is ready in a renderUI event, addEventListener('DOMContentLoaded' should not be used. Document will not be ready again, so this listener will not be triggered.
library(shiny)
library(tidyverse)
ui <- fluidPage(
    #This tells shiny to include both css and scripts of aggrid
    tags$script(src="https://unpkg.com/ag-grid-community/dist/ag-grid-community.min.js"),
    titlePanel("Ag-Grid Basic Example"),
    uiOutput("myGrid_container")
)

server <- function(input, output, session) {
    #This tells shiny to run our javascript file "script.js" and send it to the UI for rendering
    output$myGrid_container<- renderUI({
        tagList(
            div(id = "myGrid", style="height: 200px; width:500px;", class="ag-theme-alpine"),
            tags$script(src="script.js")
        )
    })
}

shinyApp(ui = ui, server = server)
const columnDefs = [
  { field: "make" },
  { field: "model" },
  { field: "price" }
];

// specify the data
const rowData = [
  { make: "Toyota", model: "Celica", price: 35000 },
  { make: "Ford", model: "Mondeo", price: 32000 },
  { make: "Porsche", model: "Boxster", price: 72000 }
];

// let the grid know which columns and what data to use
const gridOptions = {
  columnDefs: columnDefs,
  rowData: rowData
};

// setup the grid after the page has finished loading
const gridDiv = document.querySelector('#myGrid');
new agGrid.Grid(gridDiv, gridOptions);

enter image description here

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda