Introducing Feliz AgGrid

AG Grid is a Javascript data grid library which features a lot of customisation options. Self titled as "The Best JavaScript Grid in the World", they have a community version as well as an Enterprise option, which includes many advanced features enabling you to display, edit, sort, filter and group data in a multitude of different ways.

The package has modules for just Javascript/Typescript as well as the following popular web frameworks

• React
• Solid
• Vue
• Angular

Feliz.AgGrid

Feliz.AgGrid is an open-source package which allows you to use AG Grid inside a SAFE stack application all written in F#, and this week we have released version 1 which upgrades to the latest technologies used in SAFE Stack 5.

The F# wrapper looks something like the below:

Html.div [
    prop.className ThemeClass.Balham
    prop.children [
        AgGrid.grid [
            AgGrid.rowData olympicData
            AgGrid.pagination true
            AgGrid.defaultColDef [
                ColumnDef.resizable true
                ColumnDef.sortable true
            ]

            AgGrid.paginationPageSize 20
            AgGrid.singleClickEdit true

            AgGrid.columnDefs [
                ColumnDef.create<string> [
                    ColumnDef.filter RowFilter.Text
                    ColumnDef.headerName "Athlete (editable)"
                    ColumnDef.valueGetter (fun x -> x.Athlete)
                    ColumnDef.editable (fun _ _ -> true)
                    ColumnDef.valueSetter (fun newValue _ row -> updateRowAthleteName newValue row)
                ]

            // more column definitions

Requirements to use

• React 18
• Fable 4
• Feliz 2

All of these technologies are included with the SAFE stack v5 template (if you are using a SAFE stack template prior to v5 or Fable < v4/Feliz < v2, then you will need to use v0.0.6 of the Feliz.AgGrid package).