https://github.com/DanpowerGruppe/Fable.ReactAgGrid

Fable bindings for AgGrid.
https://github.com/DanpowerGruppe/Fable.ReactAgGrid

Last synced: 2 months ago
JSON representation

Fable bindings for AgGrid.

• Host: GitHub
• URL: https://github.com/DanpowerGruppe/Fable.ReactAgGrid
• Owner: DanpowerGruppe
• License: apache-2.0
• Created: 2020-03-03T21:00:38.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T15:30:41.000Z (over 1 year ago)
• Last Synced: 2024-03-27T20:07:47.594Z (3 months ago)
• Language: CSS
• Homepage: https://danpowergruppe.github.io/Fable.ReactAgGrid/
• Size: 6.71 MB
• Stars: 3
• Watchers: 2
• Forks: 1
• Open Issues: 55
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome-fable - Fable.ReactAgGrid - Fable Binding for [ReactAgGrid](https://www.ag-grid.com/react-grid/) (Libraries)

README

        
# Fable Binding for ReactAgGrid

[![Fable.ReactAgGrid on Nuget](https://buildstats.info/nuget/Fable.ReactAgGrid)](https://www.nuget.org/packages/Fable.ReactAgGrid/)

[![Build Status](https://dev.azure.com/DanpowerEnergyData/Fable.ReactAgGrid/_apis/build/status/DanpowerGruppe.Fable.ReactAgGrid?branchName=master)](https://dev.azure.com/DanpowerEnergyData/Fable.ReactAgGrid/_build/latest?definitionId=11&branchName=master)

## Example TableInput

![AgGridTableImput](https://github.com/DanpowerGruppe/Fable.ReactAgGrid/blob/master/images/agGridExample.PNG "aggrid image")

## Start test app

- Start your test app by cloning this repository and then execute:

```

build.cmd run

```

## Example agGrid

Here is an example how to use agGrid

```fs

type GridInput =

    {

        Row : int

        Col : int

        Value : string

    }

type TableRep =

    {

        HeadCol : string []

        HeadRow : DateTimeOffset []

        Values : float [] []

        Grid : obj []

    }

type Model =

    {

        TableRep : TableRep option

    }

type State = {

    TableRep : TableRep

}

type Msg =

| SetGridInput of GridInput

open Fable.ReactAgGrid

let agGrid (tableRep :TableRep) dispatch =

    div [ Class "ag-theme-balham"; Style [ Height "400px"; CSSProp.Width "800px"  ] ] [

        Grid.grid [

            Grid.ColumnDefs [|  Grid.ColumnDef [Grid.HeaderName "Datum"; Grid.Field "date"; Grid.Sortable true]

                                for i,header in tableRep.HeadCol |> Array.indexed do

                                    Grid.ColumnDef

                                              [ Grid.HeaderName header;

                                                Grid.Field (string i);

                                                Grid.Width 100

                                                Grid.Editable true

                                                Grid.Sortable true

                                                Grid.OnCellValueChanged (fun ev -> dispatch (SetGridInput ({Row = int ev.node.id; Col = int ev.colDef.field; Value = string ev.newValue})))] |]

            Grid.RowData (tableRep.Grid |> Array.map box)

            Grid.RowHeight 36.

            Grid.RowStyle (createObj [ "font-size" ==> "16px" ])

            Grid.StopEditingWhenGridLosesFocus true

        ] [ ]

    ]

```