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.
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!
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!
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>
Hi @doghousedev, In case it's still helpful, in vanilla Javascript custom components such as yours you can only reference the Custom Component model inside of window.Retool.subscribe(function (model) {
Hi, new to retool so might be missing a really simple thing.
I am trying to add AG-Grid in my custom component with React. I tried to directly import AG-Grid using CDNjs script tag. The component seems to be imported but it gives an gridOptions being undefined error.
Here is the json for the app I am trying to use this in. Hierarchical View.json (35.1 KB)
// This is the entrypoint for the React component.
const ConnectedComponent = Retool.connectReactComponent(MyCustomComponent)
const container = document.getElementById('react')
const root = ReactDOM.createRoot(container)
root.render()
Along with that I tried to import agGrid library by adding it to the libraries sections of scripts and styles for the app.
I am unable to access agGrid any where in the app when trying to import this way. I have also checked that the minified umd I am using does not use require statements as specified here.
I would really like any help enabling using agGrid since I am looking for a solution to create hierarchical tables in retool. If there is any other solution for creating hierarchical tables. Please let me know.
It looks as though you may need to specifically import the AG Grid React library. The snippet from this thread seems to work in a custom component:
It looks like the prop types packaged is required as well. Adding both scripts to your custom component and referencing AgGridReact.AgGridReact instead of agGrid.Grid yields:
