United Kingdom: +44 (0)208 088 8978

Introducing Feliz AgGrid

In Enterprise applications you will often need to display tables of data. Feliz.AgGrid is a package that can be used with SAFE stack applications to quickly and easily achieve this goal.

We're hiring Software Developers

Click here to find out more

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.

Grid example

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

  • React
  • Solid
  • Vue
  • Angular


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).