Column definition.

Requires field, renderer, headerName, and settings to be defined for each column.

• field: name of the column and specifically used to decode data properly (e.g. from events)

• renderer: used to render data to a cell (for more information see the documentation for Renderer)

• headerName: displayed text in the column header

• settings: allows to customize each column - a defaultSettings record is offered, which can be adjusted to your own needs to reduce the implemenation overhead.

Example

let
    defaultSettings =
        AgGrid.defaultSettings
in
[ { field = "id"
  , renderer = IntRenderer .id
  , headerName = "Id"
  , settings = defaultSettings
  }
, { field = "title"
  , renderer = StringRenderer .title
  , headerName = "Product"
  , settings =
        { defaultSettings
            | editable = False
            , pinned = AgGrid.PinnedToLeft
        }
  }
]

Possible filter options for columns.

Possible options to pin a column.

The Renderer expresses how the data is retrieved from the list of data and rendered to the view.

The editor and renderer views in the table depend on the type. For example, a BoolRenderer is displayed and can be edited with a checkbox in the table.

The Renderer may need a function to read the value for the cell from the records.

Example

If the data is list of Product, the Renderer to display the column for the title might be defined as:

type alias Product =
    { title : String }


-- Column definitions:
[{ renderer = StringRenderer .title, ... }]

Possible options for displayed sidebars.

Defines the data grid.

Example

let
    gridConfig =
        AgGrid.defaultGridConfig
            |> (\config -> { config | themeClasses = Just "ag-theme-balham ag-basic" })


    events =
        [ onCellChanged rowDecoder UpdateProduct ]


    defaultSettings =
        AgGrid.defaultSettings
            |> (\settings -> { settings | editable = True })


    columns =
        [ { field = "id"
          , renderer = IntRenderer .id
          , headerName = "Id"
          , settings = { defaultSettings | enablePivot = False }
          }
        , { field = "title"
          , renderer = StringRenderer .title
          , headerName = "Product"
          , settings = { defaultSettings | filter = StringFilter }
          }
        ]


    data =
        model.products
in
grid gridConfig events columns data

Retrieve a GridConfig record with default configuration.

Can be used when implementing the grid.

    { allowColResize = True
    , autoSizeColumns = False
    , cacheQuickFilter = False
    , disableResizeOnScroll = False
    , pagination = False
    , rowHeight = Nothing
    , quickFilterText = ""
    , sideBar = NoSidebar
    , size = "65vh"
    , suppressMenuHide = False
    , themeClasses = Nothing
    }

Retrieve a ColumnSettings record with default configuration.

Can be used when implementing column configurations for the table.

Default column settings:

{ editable = False
, enablePivot = True
, enableRowGroup = True
, enableValue = True
, filter = SetFilter
, hide = False
, pinned = Unpinned
, sortable = True
, suppressColumnsToolPanel = False
, suppressFiltersToolPanel = False
, suppressMenu = False
, suppressSizeToFit = True
, width = Nothing
}

Detect change events on cells.

Decodes the changed row according to the provided dataDecoder and passes the result to the message toMsg.

Handles the cellValueChanged event from Ag Grid.

Detect doubleclick events on cells.

Decodes the row of the clicked cell according to the provided dataDecoder and the field name of the clicked cells as tuple and passes the result to the message toMsg.

Handles the cellDoubleClicked event from Ag Grid.