Dear all,
ag-grid is well known to be the most feature rich javascript table, a widget named RAG-GRID was created long time ago however it so so long ago that it became unusable.
Since it is so popular, are you aware of somebody having created an updated wrapper for that component?
Are there alternatives available?
Unfortunately the default data table is not enough for what I need in my project, I need something more feature rich, like multiple dropdowns selections and so on.
Without a wrapper I am feeling lost, however I am trying to include it as a pure javascript component, here below my try that you might be able to help with.
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: Plunker - Custom Sorting
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.