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 (
		<div
			id="myGrid"
			style="height: 100vh; width: 100vw; display: flex; flex-direction: column"
		/>
	);
});

7. 在页面中添加控件

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

<Grid />