Is 3rd party javascript datagrid possible in Webflow?

Design help Custom code
1

Hi I am new to Webflow and wondering if embeded 3rd party Javascript datagrid like ag-grid.com is possible?

Thanks,

Tim

2

I’ve just read through their docs and I would say that this is doable.

3

Thanks and that is encouraging. Any suggestion on docs in Webflow on how to make this happen?
I found this: https://university.webflow.com/article/how-to-add-custom-head-and-body-code-to-a-webflow-site but not sure if it is enough

4

That’s pretty much it, you can follow the instructions in the original link you posted.

For example here:

image
image1065×285 26.7 KB

You would just copy and paste the script and CSS links into the head code of the page.

And here:

image
image1025×309 26.1 KB

You would make a div in Webflow, and give it the same sizing, ID and class name as the example.

Then here:

image
image1004×729 67.6 KB

You would just copy and paste that script into the page body code.

5

Thanks a huge help. Is there also a way to add css for the Grid like is described here:

https://www.ag-grid.com/javascript-grid-row-styles/

6

Those examples are using JavaScript to set the styling, so you could either modify the gridOptions object directly or add JavaScript to do it like in the example.

The gridOptions object is marked below for reference:
image

So in this example here:
image

You can add that snippet to your code after the object has been declared. So it would end up looking like this:

<script type="text/javascript" charset="utf-8">
    const columnDefs = [
        { headerName: 'Make', field: 'make' },
        { headerName: 'Model', field: 'model' },
        { headerName: 'Price', field: 'price', editable: true }
    ];
    const rowData = [
        { make: 'Toyota', model: 'Celica', price: 35000 },
        { make: 'Ford', model: 'Mondeo', price: 32000 },
        { make: 'Porsche', model: 'Boxter', price: 72000 }
    ];
    const gridOptions = {
        columnDefs: columnDefs,
        rowData: rowData
    };
    // Part I added below
    gridOptions.rowStyle = { background: 'black' };

    const eGridDiv = document.querySelector('#myGrid');
    new agGrid.Grid(eGridDiv, gridOptions);
</script>
7

Hi Jason,

I cant seem to get it to work. I created a blank page with a body, added a container and then added a div and named it myGrid like in the example.

This Loom video explains what I have done… Any suggestions would be helpful before I give up on Webflow as I need it to work with this tool

Watch Video

8

Hi Tim,

First thing:
image
In this screenshot from your video I can see that you are missing the end of the script. This is the part that actually creates the grid. See my code snippet above and note the difference.

Secondly you need to give your div block an ID (different to a class name) of myGrid. To do this you go to this part in the Webflow designer:
image

This ID is what the script uses to reference the div block. Try that and see how you get on.