Variants to aggregate values for a grouped column.

CellEditor

• DefaultEditor will set an editor derived from the renderer
• LargeTextEditor will use the agLargeTextCellEditor
• SelectionEditor will use the agRichSelectCellEditor
• PredefinedEditor allows to use an existing ag-grid editor
• AppEditor allows to use an Elm app as custom editor

Column dataType

Represents a column in Aggird, this could be a normal or a group of columns

Column configuration settings.

Possible variants of callbacks that can lead to a certain change.

Possible filter options for columns.

Lock a column to position to left or right to always have this column displayed in that position.

Or can be configured to not lock in one position and move the column freely.

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, ... }]

Row Group Panel allows the users to control which columns the rows are grouped by.

Type of row selection, set to either SingleRowSelection or MultipleRowSelection to enable selection.

• SingleRowSelection will use single row selection, such that when you select a row, any previously selected row gets unselected.
• MultipleRowSelection allows multiple rows to be selected.
• NoRowSelection will not perform a row selection, only selecting the cell.

Possible pre-configured column sorting.

Change event data for a table state changes.

Possible configuration for the CSV export.

Possible configuration for the Excel export.

Grid configurations.

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.

    { autoGroupColumnDef =
        { cellRendererParams =
            { suppressCount = False
            , checkbox = False
            }
        , headerName = Nothing
        , minWidth = Nothing
        , resizable = True
        }
    , autoSizeColumns = False
    , cacheQuickFilter = False
    , columnStates = []
    , columnHoverHighlight = False
    , detailRenderer = Nothing
    , disableResizeOnScroll = False
    , filterStates = Dict.empty
    , groupDefaultExpanded = 0
    , groupIncludeFooter = False
    , groupIncludeTotalFooter = False
    , groupSelectsChildren = False
    , isRowSelectable = always True
    , pagination = False
    , quickFilterText = ""
    , rowGroupPanelShow = NeverVisible
    , rowHeight = Nothing
    , rowHoverHighlight = True
    , rowMultiSelectWithClick = False
    , rowSelection = MultipleRowSelection
    , selectedIds = []
    , sideBar = defaultSidebar
    , size = "65vh"
    , sizeToFitAfterFirstDataRendered = True
    , stopEditingWhenCellsLoseFocus = True
    , suppressAggFuncInHeader = False
    , suppressMenuHide = False
    , suppressRowClickSelection = False
    , suppressRowDeselection = False
    , themeClasses = Nothing
    }

Retrieve a ColumnSettings record with default configuration.

Can be used when implementing column configurations for the table.

Default column settings:

{ aggFunc = NoAggregation
, allowedAggFuncs = Nothing
, autoHeight = False
, defaultAggFunc = SumAggregation
, autoHeaderHeight = False
, cellClassRules = []
, checkboxSelection = False
, customCellEditor = DefaultEditor
, editable = Const False
, enablePivot = True
, enableRowGroup = True
, enableValue = True
, filter = DefaultFilter
, filterParams =
    { buttons = [ ClearButton ]
    , closeOnApply = False
    }
, filterValueGetter = Nothing
, flex = Nothing
, floatingFilter = False
, headerCheckboxSelection = False
, hide = False
, lockPinned = False
, lockPosition = NoPositionLock
, minWidth = Nothing
, pinned = Unpinned
, pivot = False
, pivotIndex = Nothing
, resizable = True
, rowGroup = False
, rowGroupIndex = Nothing
, showDisabledCheckboxes = False
, sortable = True
, sort = NoSorting
, sortIndex = Nothing
, suppressColumnsToolPanel = False
, suppressFiltersToolPanel = False
, suppressMenu = False
, suppressSizeToFit = True
, valueFormatter = Nothing
, valueGetter = Nothing
, valueParser = Nothing
, valueSetter = Nothing
, width = Nothing
, wrapHeaderText = False
, wrapText = False
}

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.

Detect click 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 cellClicked event from Ag Grid.

Detect selection change events.

Sends the current selection of nodes to the toMsg.

Detect click on custom context menu actions

Column state.

Can be used to evaluate the current table state whenever a change to the structure of the table happens (e.g. sorting, order, sizing, or visiblity of columns changed).

Might be used to persist the table state of the user to the localstorage or some other external storage. Column states can be restored through the columnState on the GridConfig.

Detect change events to the table structure (e.g. sorting or moved columns).

Decodes the EventType of the change and the current states of the grid columns and passes the result to the toMsg.

Decoder for the current column states.

Can be used to retrieve and decode the column states from an external storage.

Encode a collection of ColumnState.

Can be used to persist the current list of ColumnState for the grid to an external storage.

Apply the column state from the GridConfig to the given ColumnDefs.

The values from the cache overwrite the values on the ColumnDef. The order is also according to the order in the column state. New columns, that don't exist in the column state, are appended to the end.

This function is mainly exposed to allow unit-testing, as this is automatically applied to ColumnDefs passed to the grid.

Filter state.

Can be used to evaluate the current filter configuration whenever a filter on a column gets changed.

Might be used to persist the filters applied to the table for the users to the localstorage or some other external storage. Filter states can be restored through the filterState on the GridConfig.

AG Grid reference: https://www.ag-grid.com/javascript-data-grid/filtering/#column-filter-types

Detect change events to the table filters.

Decodes the EventType of the change and the filter configuration of the grid columns and passes the result to the toMsg.

Encode a collection of FilterState.

Can be used to persist the current collection of FilterState for the grid to an external storage.

Decoder for the filter states.

Can be used to retrieve and decode the filter states from an external storage.

Sidebar configuration.

Possible options for displayed sidebars.

Position for the sidebar.

Retrieve a Sidebar with default configuration.

Can be used to ease the sidebar configuration.

    { panels = []
    , defaultToolPanel = Nothing
    , position = SidebarRight
    }

Stringify an Aggregation.

This matches the configuration for AgGrid and equals the value retrieved from the ColumnState. Further, it can be used for external communication if necessary.

Stringify a PinningType.

This matches the configuration for AgGrid and equals the value retrieved from the ColumnState. Further, it can be used for external communication if necessary.

Stringify the Sorting.

This matches the configuration for AgGrid and equals the value retrieved from the ColumnState. Further, it can be used for external communication if necessary.

Parse a string to an Aggregation.

This can be used in combination with the value on the ColumnState. Further, it can be used for external communication if necessary.

Parse a string to a PinningType.

This can be used in combination with the value on the ColumnState. Further, it can be used for external communication if necessary.

Parse a string to the Sorting type.

This can be used in combination with the value on the ColumnState. Further, it can be used for external communication if necessary.