michaelkim / ag-grid-svelte Goto Github PK
View Code? Open in Web Editor NEWA Svelte wrapper for ag-grid
Home Page: https://ag-grid-svelte.michael.kim/guide
License: MIT License
A Svelte wrapper for ag-grid
Home Page: https://ag-grid-svelte.michael.kim/guide
License: MIT License
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!
Is there any news on having ag-grid v31 support?
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
<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>
Support Svelte 4
peerDependencies is using svelte 3.
See the Svelte migration guide
"svelte": "^4.0.5",
"ag-grid-community": "^30.0.3",
"ag-grid-svelte": "^0.3.0",
Then npm i
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.
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?
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
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.
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
... />
I'm wondering if alignedGrids
is supported? I see it as a prop but am not able to make it work.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.