ag-grid在qwik astro中的显示

1. 创建工程

pnpm create @qwik.dev/astro@latest

2. 删除biome.json

3. 升级biome到最新版

4. 生成biome.json

biome init

5. 修改biome.json

添加：

"overrides": [{"includes": ["**/*.svelte", "**/*.astro", "**/*.vue"],"linter": {"rules": {"style": {"useConst": "off","useImportType": "off"},"correctness": {"noUnusedVariables": "off","noUnusedImports": "off"}}}}]

6. 编写控件

src/components/grid.tsx:

import { AG_GRID_LOCALE_CN } from "@ag-grid-community/locale";
import { component$, useVisibleTask$ } from "@qwik.dev/core";
import { createGrid, ModuleRegistry, themeQuartz } from "ag-grid-community";
import { AllEnterpriseModule, LicenseManager } from "ag-grid-enterprise";export const Grid = component$(() => {useVisibleTask$(() => {ModuleRegistry.registerModules([AllEnterpriseModule]);LicenseManager.setLicenseKey("xxx",);const gridEl = document.getElementById("myGrid") as HTMLDivElement;createGrid(gridEl, {columnDefs: [{ field: "make" }, { field: "model" }, { field: "price" }],defaultColDef: {editable: true,enableRowGroup: true,enablePivot: true,enableValue: true,filter: true,flex: 1,minWidth: 100,},enableAdvancedFilter: true,localeText: AG_GRID_LOCALE_CN,theme: themeQuartz,rowData: [{ make: "Tesla", model: "Model Y", price: 64950 },{ make: "BMW", model: "Model X", price: 649 },{ make: "Fords", model: "Model Z", price: 74950 },],});});return (<divid="myGrid"style="height: 100vh; width: 100vw; display: flex; flex-direction: column"/>);
});

7. 在页面中添加控件

在某个页面中导入控件，然后添加标签即可：

<Grid />