Hello everybody,
I've been trying for the past couple of days to integrate ParamQuery into an Astro component with no luck. I have installed pqgrid via npm by packing and doing an npm install after modifying the package.json file. Here's a snippet of my code
First Approach// components/paramquerytest.astro
---
---
<div id="grid_json" style="margin:100px;"></div>
<script>
import pq from "pqgrid";
$(function () {
var data = [
{ rank: 1, company: 'Exxon Mobil', revenues: 339938.0, profits: 36130.0 },
];
var obj = {
numberCell:{resizable:true,title:"#",width:30,minWidth:30},
//editor: {type: 'textbox'},
title: "ParamQuery Grid with JSON Data",
resizable:true,
menuIcon: true,
scrollModel:{autoFit:true}
};
obj.colModel = [
{ title: "Rank", width: 100, dataType: "integer", dataIndx: "rank" },
{ title: "Company", width: 200, dataType: "string", dataIndx: "company" },
{ title: "Revenues ($ millions)", width: 150, dataType: "float", format: '$#,###.00', dataIndx: "revenues" },
{ title: "Profits ($ millions)", width: 150, dataType: "float", format: '$#,###.00', dataIndx: "profits" }
];
obj.dataModel = { data: data };
$("#grid_json").pqGrid(obj);
});
</script>
in my index.astro file, I regularly import the component and mention it.
I get the error:
Uncaught SyntaxError: The requested module '/paramquery/index.js' does not provide an export named 'default'
I noticed that if I do console.log(pq) then the console will not show the object
Second approachIf I use the code above in index.js, I also receive nothing but pq's object appears in the console, however with this error:
Uncaught TypeError: $(...).pqGrid is not a function
at HTMLDocument.<anonymous> (index.astro:179:21)
at c (jquery.min.js:3:7857)
at Object.fireWith [as resolveWith] (jquery.min.js:3:8658)
at Function.ready (jquery.min.js:3:3266)
at HTMLDocument.H (jquery.min.js:3:695)
I'm trying to avoid react, vue, KO, and angular, to keep my work as lightweight as possible.
My theory is that it should work, because I used Highcharts in astro and imported it similar to how I imported 'pqgrid' and it worked.
Any help would be appreciated, thank you very much.
