Adding a library "AG-Grid" not working despite UMD

I am trying to use a JS Library called Ag-Grid. According to their documentation, the library (community and enterprise versions) are both UMD libraries.

Can someone assist me in determining if the library is going to be compatible with Retool. While the Retool Table component is great, this library supports a lot of customized control for calculations, grouping, filtering, sorting, and a multitude of other functions we rely upon.

www.ag-grid.com

They also have documentation on how to create a custom UMD, but for the life of me I can't seem to make Webpack work to produce the custom UMD

Any help would be appreciated greatly.

Hi @doghousedev according to our documentation on preloaded JS and pulling in custom JS libraries, you should be able to if you follow the instructions in the custom JavaScript libraries section: Preloaded JavaScript and Libraries

Let me know if there's anything else I can help with!

Hi Alina

I created the UMD bundle and have used it in my custom component Iframe. Still not working.

I must be doing something incorrectly, because I am unable to make it work.

I've read the doc links you sent me and I think I'm just unsure what to do next.

Can you help? What info do you need?
Here is the code in the customComponent iframe:

<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/Docs-27.2.1-20220420/styles/ag-grid.min.css" integrity="sha512-2euLJS00YpxIOHKIinN1Nb+MtmeMLxiDYMz7R0no2bt1/BzdMXaNHByElWmLkqrWMrjOt9oNEFzoyHSzRJiIWw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/Docs-27.2.1-20220420/styles/ag-theme-alpine.min.css" integrity="sha512-sX8jh14MeLV4mGNmCKF4GvayY6f52nD1DjKBnvGa2McxjH+GeY8k7YOTlWvGT0DkHkwyUKyafIcYC6GRGWBq7g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <script src="https://doghousedev.com/testing/dist/bundle.umd.js"></script>

    <script>
        var columnDefs = [
            { field: 'make' },
            { field: 'model' },
            { field: 'price' }
        ];

        // specify the data
        var 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
        var gridOptions = {
            columnDefs: columnDefs,
            rowData: rowData
        };

        // setup the grid after the page has finished loading
        document.addEventListener('DOMContentLoaded', function () {
            var gridDiv = document.querySelector('#myGrid');
            new agGrid.Grid(gridDiv, gridOptions);
        });
    </script>
</head>
<body>
    <div id="myGrid" style="height: 200px; width:500px;" class="ag-theme-alpine"></div>
</body>

So, I ran your code from my end and added a console.log() statement inside the event listener for 'DOMContentLoaded' -- since it didn't print, the event didn't fire. I'm not sure why this didn't fire but the code appears to run if you move it outside the event listener (the code prints an error message to the console that says it doesn't have a valid license).

window.addEventListener('DOMContentLoaded', function () {
    console.log('INSIDE EVENT LISTENER');
    var gridDiv = document.querySelector('#myGrid');
    new agGrid.Grid(gridDiv, gridOptions);
});

I hope this helps with debugging, but if you have other questions, I'll try my best to help!

Alina -

Yeah!

Thanks. I figured out how to get it to render by removing DOM event and refactoring the code a little bit.

Can you tell me how I pass the query5.data into the Iframe for use as the data for the component? I am seeing the "model" field showing a valid array, but I don't seem to know how to pass it in as the "rowdata".

Can i pass as following code? :

var rowData= model? or 
 var rowData = formatDataArray({[query5.data}})

doesn't seem to like that
here is the working code

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/Docs-27.2.1-20220420/styles/ag-grid.min.css"/>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/Docs-27.2.1-20220420/styles/ag-theme-alpine.min.css" />
 <script src="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/Docs-27.2.1-20220420/ag-grid-community.min.js"></script>
</head>

<body>
  <div id="myGrid" style="height: 100%; width:100%;" class="ag-theme-alpine">
   <script>
    var columnDefs = [{
      field: 'make'
    }, {
      field: 'model'
    }, {
      field: 'price'
    }];

    // specify the data

    //   var rowData = model     //doesn't work

    var rowData = [{
        make: 'Toyota',
        model: 'Celica',
        price: 35000
      },
    ];

   // let the grid know which columns and what data to use
    var gridOptions = {
      columnDefs: columnDefs,
      rowData: rowData
    };
var gridDiv = document.querySelector('#myGrid');
      new agGrid.Grid(gridDiv, gridOptions)
   </script>
  </div>
</body>

thanks