michaelkim / ag-grid-svelte Goto Github PK

Hi,

Juste to say, there are a problem with the component when I compile with VITE in development mode.
I want to use the license "entreprise" about AgGrid.
The problem: features "entreprise" doesn't work, like "columns" panel or column with hierarchical, no alert message about license in the console, ...
I import the component dynamically with "await import".
At this moment, I see in "network" tab from Chrome, le module "entreprise" and after "community".
Perhaps "community" replace something. (I don't know)

But, if I change the name of the package in "AgGridSvelte" like below,=> it works :)

How can one use this approach ( https://blog.ag-grid.com/minimising-bundle-size/#how-to-minimise-your-bundle-size ) with ag-grid-svelte to minize the size used with ag-grid lib as it may go to 2.6MB which is excessive most times, if we don't use all features.

using

<script context="module">
	import { LicenseManager } from '@ag-grid-enterprise/core';
	import { ModuleRegistry } from '@ag-grid-community/core';
	import { ServerSideRowModelModule } from '@ag-grid-enterprise/server-side-row-model';

	ModuleRegistry.registerModules([ServerSideRowModelModule]);
</script>

still results on

AG Grid: unable to use rowModelType = 'serverSide' as the ServerSideRowModelModule is not registered. Check if you have registered the module:
           
    import { ModuleRegistry } from '@ag-grid-community/core';
    import { ServerSideRowModelModule } from '@ag-grid-enterprise/server-side-row-model';
    
    ModuleRegistry.registerModules([ ServerSideRowModelModule ]);

For more info see: https://www.ag-grid.com/javascript-grid/modules/

The saving were also not very large, 500KB at best I reckon.

Got this warning when running the install command recommended in the guide: npm install ag-grid-community ag-grid-svelte.

  └── ✕ unmet peer ag-grid-community@^28: found 29.0.0

Wondering if this is a quick upgrade or if more involved. But FYI maybe the guide could be updated so that ag-grid-community@^28 is recommended instead?

See the error when I try to npm i ag-grid-svelte when ag-grid 29 is already installed:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/ag-grid-community
npm ERR! dev ag-grid-community@"^29.3.3" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer ag-grid-community@"^28" from [email protected]
npm ERR! node_modules/ag-grid-svelte
npm ERR! ag-grid-svelte@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!

Support Svelte 4

peerDependencies is using svelte 3.

See the Svelte migration guide

Reproduce

"svelte": "^4.0.5",
"ag-grid-community": "^30.0.3",
"ag-grid-svelte": "^0.3.0",

Then npm i

Error

I'm wondering if alignedGrids is supported? I see it as a prop but am not able to make it work.

Versions

"@sveltejs/kit": "^1.16.0",
"ag-grid-community": "^29.3.4",
"ag-grid-svelte": "^0.2.0",

Get error when running build:

[commonjs--resolver] Missing "./AgGridSvelte.svelte" specifier in "ag-grid-svelte" package
error during build:
Error: Missing "./AgGridSvelte.svelte" specifier in "ag-grid-svelte" package
    at e (file:///D:/projects/accessit-v10-mgmt/node_modules/vite/dist/node/chunks/dep-f7d05e3f.js:16649:25)
    at n (file:///D:/projects/accessit-v10-mgmt/node_modules/vite/dist/node/chunks/dep-f7d05e3f.js:16649:627)
    at o (file:///D:/projects/accessit-v10-mgmt/node_modules/vite/dist/node/chunks/dep-f7d05e3f.js:16649:1297)
    at resolveExportsOrImports (file:///D:/projects/accessit-v10-mgmt/node_modules/vite/dist/node/chunks/dep-f7d05e3f.js:23407:20)
    at resolveDeepImport (file:///D:/projects/accessit-v10-mgmt/node_modules/vite/dist/node/chunks/dep-f7d05e3f.js:23426:31)
    at tryNodeResolve (file:///D:/projects/accessit-v10-mgmt/node_modules/vite/dist/node/chunks/dep-f7d05e3f.js:23115:20)
    at Object.resolveId (file:///D:/projects/accessit-v10-mgmt/node_modules/vite/dist/node/chunks/dep-f7d05e3f.js:22876:28)
    at Object.handler (file:///D:/projects/accessit-v10-mgmt/node_modules/vite/dist/node/chunks/dep-f7d05e3f.js:46631:19)
    at file:///D:/projects/accessit-v10-mgmt/node_modules/rollup/dist/es/shared/node-entry.js:24526:40
    at async PluginDriver.hookFirstAndGetPlugin (file:///D:/projects/accessit-v10-mgmt/node_modules/rollup/dist/es/shared/node-entry.js:24426:28)
 ELIFECYCLE  Command failed with exit code 1.

Have tried changing import in the following ways:

import AgGridSvelte from 'ag-grid-svelte';
import AgGridSvelte from 'ag-grid-svelte/AgGridSvelte.svelte';
import AgGridSvelte from 'ag-grid-svelte/dist/AgGridSvelte.svelte';

NB: Still working when running with dev server.

The goal is to use agSetColumnFilter but cannot get ag-grid-enterprise to load regardless of being on <script> or <script context=module>

Error is
23:13:58 [vite] Error when evaluating SSR module /src/routes/aggrid/+page.svelte: failed to import "ag-grid-enterprise"

SyntaxError: Cannot use import statement outside a module

Code based on

#7 (comment)

<script>
	import AgGridSvelte from 'ag-grid-svelte';
	import 'ag-grid-community/styles/ag-grid.css';
	import 'ag-grid-community/styles/ag-theme-alpine.css';
    import 'ag-grid-enterprise';
	import { children } from 'svelte/internal';

	const columnDefs = [
		{
			headerName: 'Athlete Details',
			children: [
				{ field: 'athlete', filter: true },
				{ field: 'age', filter: 'agNumberColumnFilter' },
				{
					field: 'country',
					// filter: 'agSetColumnFilter',
					filterParams: {
						applyMiniFilterWhileTyping: true
					}
				}
			]
		},
		{
			headerName: 'Sports Results',
			children: [
				{ field: 'sport' },
				{ field: 'total', columnGroupShow: 'closed' },
				{ field: 'gold', columnGroupShow: 'open' },
				{ field: 'silver', columnGroupShow: 'open' },
				{ field: 'bronze', columnGroupShow: 'open' }
			]
		}
	];

	let rowData = [];
	function onGridReady() {
		fetch('/data/olympic-winners.json')
			.then((resp) => resp.json())
			.then((data) => (rowData = data));
	}
</script>

<div style:height="90vh" class="ag-theme-alpine">
	<AgGridSvelte {rowData} {columnDefs} {onGridReady} />
</div>

<style>
	.ag-theme-alpine {
		--ag-background-color: #ddd;
	}
</style>

AG Grid: Grid API function setIsFullWidthRow() cannot be called as the grid has been destroyed.
Please don't call grid API functions on destroyed grids - as a matter of fact you shouldn't
be keeping the API reference, your application has a memory leak! Remove the API reference
when the grid is destroyed.

Sometimes when grids are destroyed and re-rendered I see this error thousands of times in the console, for many functions. I am binding the gridApi and columnApi properties but don't actually call them anywhere. I'm wondering if this is a known issue if there's a way around it?

Hi,

i'm setting a quick-filter like this but it's only applied on page-refreshes.

<script>
 ... 
let quickFilterText = '';
</script>

<input type="text" bind:value={quickFilterText} />

<AGGridSvelte
	bind:quickFilterText
... />

ag-grid-community version 30 has been released can this project work with it

Hi,

Great project!

I tried deploying an app with ag-grid-svelte, however the app just got bogged down when time came to load ag grid's CSS. Is anyone else experiencing this behaviour?

It was bad enough for me to disable ag grid from the project (sadly).

If i were using the static adapter, this would likely not be a problem due to S3 / cloudfront. But with node it seems unusable; unless i'm doing something wrong.

Thanks.

I have tried the steps listed on the docs but it doesn't render the side bar.

i have imported 'ag-grid-enterprise' before rendering the grid
I have tried 'npm run dev '--force'
I have modified the vite.config.ts to include the 'optimize:include'

The enterprise watermark does show in the console, however no Enterprise features seem to be enabled.

I am using version 29.0