compositionalit / feliz-ag-grid Goto Github PK

View Code? Open in Web Editor NEW

9.0 9.0 4.0 3.47 MB

F# 100.00%

feliz-ag-grid's People

Contributors

Stargazers

Watchers

Forkers

mrbliz twuttiwat martinbryant jordanmarr

feliz-ag-grid's Issues

Publish to Nuget github action has been deprecated

The action is used in the github workflow

https://github.com/brandedoutcast/publish-nuget

AgGrid.fsproj file reference package files from inside demo. Is this correct?

https://github.com/CompositionalIT/feliz-ag-grid/blob/main/src/Feliz.AgGrid.fsproj#L20-L25

Need to look at bumping versions as AgGrid now on v31

The maximum version we allow in this package is 25.x.

AgGrid now on version 31.x

This package no longer will work on a v5 SAFE Stack application for a few reasons.

The styles are not stored in the same location inside the ag-grid-community (v31) package so the references are broken and styles have also been removed (dark themes :( )
You cannot use ag-grid-react 25.x as it is only compatible with React 17.x. SAFE Stack v5 uses React 18.x

Inside CompositionalIT/safe-search-3#12 I managed to use ag-grid-react, ag-grid-community v31.x inside a SAFE stack v5 app with v0.0.5 of this package. I did however have to cheat a little with getting the references to the moved style files and get some removed dark theme styles manually put in to make it compile correctly.

Custom props cannot be used as AgGrid props

AgGrid.grid [
    AgGrid.rowClassName "hover:cursor-pointer"
    AgGrid.suppressRowHoverHighlight
// removed for brevity
]

Expected

AgGrid.suppressRowHoverHighlight can be used as a prop here

Actual

The type IReactProperty is not compatible with the type IAgGridProp<'row>

Workaround

I have defined an extension to give add this behaviour in my project, unfortunately it cannot be overridden

static member inline suppressRowHoverHighlighting (v: bool) = 
    agGridProp<'row>("suppressRowHoverHighlight" ==> v)

Free vs Enterprise

Do these bindings have support for any of the AG Grid Enterprise edition features?
Specifically, I am interested in the Cell Range Selection feature.
(I would imagine that feature may not even require any difference in the API as it may "just work".)

React 18

Hi guys , just wanted to hear if there are any plans for updating to support React 18 ?

Thanks

No longer need to tag the commit as per readme

When doing the version 1 release, I did not tag the commit as per the readme so the github action uses the version identified in the AgGrdi.fsproj file to add as a tag

Make publish workflow add Git tag

At the moment we have to remember to tag the commit that corresponds to a NuGet package version published by the GitHub Actions workflow. If the workflow could do that automatically, that would save some manual work and reduce the chance of missing a tag.

Any idea what would cause "cannot get grid to draw rows when it is in the middle of drawing rows."

Full error:

Uncaught Error: AG Grid: cannot get grid to draw rows when it is in the middle of drawing rows. Your code probably called a grid API method while the grid was in the render stage. To overcome this, put the API call into a timeout, e.g. instead of api.refreshView(), call setTimeout(function() { api.refreshView(); }, 0). To see what part of your code that caused the refresh check this stacktrace.
    at RowRenderer.getLockOnRefresh (ag-grid-community.cjs.js?982d:22864:1)
    at RowRenderer.redrawAfterModelUpdate (ag-grid-community.cjs.js?982d:22796:1)
    at RowRenderer.onPageLoaded (ag-grid-community.cjs.js?982d:22698:1)
    at eval (ag-grid-community.cjs.js?982d:1351:1)
    at Set.forEach (<anonymous>)
    at processEventListeners (ag-grid-community.cjs.js?982d:1346:60)
    at EventService.dispatchToListeners (ag-grid-community.cjs.js?982d:1356:1)
    at EventService.dispatchEvent (ag-grid-community.cjs.js?982d:1335:1)
    at PaginationProxy.onModelUpdated (ag-grid-community.cjs.js?982d:35832:1)
    at eval (ag-grid-community.cjs.js?982d:1351:1)
RowRenderer.getLockOnRefresh @ ag-grid-community.cjs.js?982d:22864
RowRenderer.redrawAfterModelUpdate @ ag-grid-community.cjs.js?982d:22796
RowRenderer.onPageLoaded @ ag-grid-community.cjs.js?982d:22698
eval @ ag-grid-community.cjs.js?982d:1351
processEventListeners @ ag-grid-community.cjs.js?982d:1346
EventService.dispatchToListeners @ ag-grid-community.cjs.js?982d:1356
EventService.dispatchEvent @ ag-grid-community.cjs.js?982d:1335
PaginationProxy.onModelUpdated @ ag-grid-community.cjs.js?982d:35832
eval @ ag-grid-community.cjs.js?982d:1351
processEventListeners @ ag-grid-community.cjs.js?982d:1346
EventService.dispatchToListeners @ ag-grid-community.cjs.js?982d:1356
EventService.dispatchEvent @ ag-grid-community.cjs.js?982d:1335
ClientSideRowModel.refreshModel @ ag-grid-community.cjs.js?982d:44650
eval @ ag-grid-community.cjs.js?982d:1351
processEventListeners @ ag-grid-community.cjs.js?982d:1346
EventService.dispatchToListeners @ ag-grid-community.cjs.js?982d:1356
EventService.dispatchEvent @ ag-grid-community.cjs.js?982d:1335
ColumnController.dispatchNewColumnsLoaded @ ag-grid-community.cjs.js?982d:3941
ColumnController.setColumnDefs @ ag-grid-community.cjs.js?982d:3933
GridApi.setColumnDefs @ ag-grid-community.cjs.js?982d:31118
ComponentUtil.processOnChange @ ag-grid-community.cjs.js?982d:8410
eval @ agGridReact.js?d244:276
setTimeout (async)
AgGridReact.processAsynchronousChanges @ agGridReact.js?d244:273
AgGridReact.processPropsChanges @ agGridReact.js?d244:179
AgGridReact.shouldComponentUpdate @ agGridReact.js?d244:165
checkShouldComponentUpdate @ react-dom.development.js?e444:12525
updateClassInstance @ react-dom.development.js?e444:13039
updateClassComponent @ react-dom.development.js?e444:17432
beginWork @ react-dom.development.js?e444:19073
beginWork$1 @ react-dom.development.js?e444:23940
performUnitOfWork @ react-dom.development.js?e444:22779
workLoopSync @ react-dom.development.js?e444:22707
renderRootSync @ react-dom.development.js?e444:22670
performSyncWorkOnRoot @ react-dom.development.js?e444:22293
eval @ react-dom.development.js?e444:11327
unstable_runWithPriority @ scheduler.development.js?ab12:468
runWithPriority$1 @ react-dom.development.js?e444:11276
flushSyncCallbackQueueImpl @ react-dom.development.js?e444:11322
flushSyncCallbackQueue @ react-dom.development.js?e444:11309
discreteUpdates$1 @ react-dom.development.js?e444:22420
discreteUpdates @ react-dom.development.js?e444:3756
dispatchDiscreteEvent @ react-dom.development.js?e444:5889

I don't think I am doing anything special here. I have 2 grids, on 2 different tabs.
I click a button which is located in the first grid, which opens the other tab and populates content on the other grid. Switching back to the first tab raises this error.

Update the demo

The demo will be using the most recent version of AgGrid but the following will need looking at

Fable v4
Feliz v2
React v18(the package has been done but need to re write the entry point as per https://react.dev/blog/2022/03/08/react-18-upgrade-guide#updates-to-client-rendering-apis)
vite

Missing method `cellEditor` in ColumnDef

Just want to check whether this awesome library is being maintained?
I want to add a "select" component to my grid, and according to these docs I need to pass a custom component to the cellEditor.

Am I missing it somewhere? Sorry if it is a stupid question.

Pin Fable.React to version 7 or below

Currently, the following doesn't work:

dotnet new SAFE (v4.2.0)
dotnet tool restore
dotnet femto install Feliz.AgGrid src/Client

It results in the following error:

matt@matt-framework:~/dev-cit/cit/exploratory/SafeWithAgGrid$ dotnet femto install Feliz.AgGrid src/Client
[15:31:18 INF] Analyzing project /home/matt/dev-cit/cit/exploratory/SafeWithAgGrid/src/Client/Client.fsproj
[15:31:18 INF] Running dotnet restore against the project
[15:31:20 INF] Detected paket.references file -> use paket
[15:31:20 INF] Installing Feliz.AgGrid within dependency group Main
[15:31:20 INF] Using locally installed paket
[15:31:27 INF] ✔ Nuget package Feliz.AgGrid installed successfully
[15:31:27 INF] Resolving potentially required npm packages with femto --resolve
[15:31:27 INF] Analyzing project /home/matt/dev-cit/cit/exploratory/SafeWithAgGrid/src/Client/Client.fsproj
[15:31:27 INF] Running dotnet restore against the project
[15:31:30 INF] Using npm for package management
[15:31:35 INF] Found package.json in /home/matt/dev-cit/cit/exploratory/SafeWithAgGrid
[15:31:36 INF] Executing required actions for package resolution
[15:31:36 INF] Uninstalling [react, react-dom]
[15:31:38 INF] Installing dependencies [[email protected], [email protected], [email protected], [email protected], [email protected]]
[15:31:40 ERR] Error while installing [email protected], [email protected], [email protected], [email protected], [email protected]

The problem seems to be that this upgrades Feliz to v2, which relies on Fable.React.Types v18 (NuGet), which in turn relies on React 18 (npm), while Feliz.AgGrid relies on ag-grid-react v25 (npm), which in turn relies on React 16 or 17 (npm).

To get around this problem, we need to ensure that there is no dependency on Fable.React.Types v18. This can be achieved by pinning Feliz to v1 and Fable.React (which Feliz v1 relies on) to v7. We have to pin Fable.React to v7, because v8 relies on React 18, and v9 relies on Fable.React.Types v18 (relies on React 18 (npm)).

This needs to take effect in the NuGet package, which I think probably means adding Fable.React to ./src/Client/paket.references. It's not enough to restrict just Feliz, because Feliz v1 specifies Fable.React >= 7.4.0, so allows Fable.React 8 or 9.

Wrong link to npm packages

On the bindings section here: https://compositionalit.github.io/feliz-ag-grid/
the links take you to the wrong packages.
Also, it would be good to have a reminder that you need to install a bunch of npm packages before the wrapper works. It probably seems obvious, but if someone hasn't done much web development before then it would be useful.

Femto does not work with SAFE v3

[17:54:31 INF] Analyzing project C:\Users\isaac\code\bladebla\src\Client\Client.fsproj
[17:54:31 INF] Running dotnet restore against the project
[17:54:34 INF] Detected paket.references file -> use paket
[17:54:34 INF] Installing Feliz.AgGrid within dependency group Main
[17:54:34 INF] Using locally installed paket
[17:54:41 INF] ✔ Nuget package Feliz.AgGrid installed successfully
[17:54:41 INF] Resolving potentially required npm packages with femto --resolve
[17:54:41 INF] Analyzing project C:\Users\isaac\code\bladebla\src\Client\Client.fsproj
[17:54:41 INF] Running dotnet restore against the project
[17:54:49 INF] Using npm for package management
[17:54:57 INF] Found package.json in C:\Users\isaac\code\bladebla
[17:54:57 INF] Npm packages need to be restored first for project analysis
[17:54:57 INF] Restoring npm packages using 'npm install' inside C:\Users\isaac\code\bladebla
[17:55:04 INF] Executing required actions for package resolution
[17:55:04 INF] Uninstalling [react, react-dom]
[17:55:07 INF] Installing dependencies [[email protected], [email protected], [email protected], [email protected], [email protected]]
[17:55:10 ERR] Error while installing [email protected], [email protected], [email protected], [email protected], [email protected]

@Zaid-Ajaj is there any way to get more information on the source of this error?

Add PR template and/or contributing guidelines

We should ensure that new props are added to the demo site, to both test that they work and document how to use them. Maybe we could do this with a PR template and/or CONTRIBUTING.md?

How to make cell text selectable?

From ag-grid document: https://ag-grid.com/javascript-data-grid/selection-overview/#cell-text-selection
It says:
If you want to use a regular text selection as if the grid were a regular table, set enableCellTextSelection=true and ensureDomOrder=true in the gridOptions.

How to set this in Feliz-ag-grid?

Or how to select the text of a selected row?
I could output certain information of a clicked row into console by:
AgGrid.onRowClicked
But I want to copy a selected （clicked on a row） row's text into clipboard.

Document how to add new bindings to the package

List places where changes need to be made. Could go in the README.

Add data to code sample

In the Ag-Grid code sample, we have the type, then the Feliz code, but no actual example data that would enable the code sample to be run immediately. This would be nice just to get something working.

Also, the data that is used for the example isn't displaying properly in the grid - the date is mismatching somewhere.