Variants to aggregate values for a grouped column.

CellEditor

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

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

Column configuration settings.

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.

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 = []
    , 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
    , rowMultiSelectWithClick = False
    , rowSelection = MultipleRowSelection
    , selectedIds = []
    , sideBar = defaultSidebar
    , size = "65vh"
    , sizeToFitAfterFirstDataRendered = True
    , stopEditingWhenCellsLoseFocus = True
    , 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
, checkboxSelection = False
, editable = False
, enablePivot = True
, enableRowGroup = True
, enableValue = True
, filter = Nothing
, filterParams =
    { buttons = [ ClearButton ]
    , closeOnApply = False
    }
, filterValueGetter = Nothing
, headerCheckboxSelection = False
, hide = False
, lockPosition = NoLock
, minWidth = Nothing
, pinned = Unpinned
, resizable = True
, rowGroup = False
, showDisabledCheckboxes = False
, sortable = True
, suppressColumnsToolPanel = False
, suppressFiltersToolPanel = False
, suppressMenu = False
, suppressSizeToFit = True
, valueFormatter = Nothing
, valueGetter = Nothing
, valueParser = Nothing
, valueSetter = Nothing
, 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.

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.

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.

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
    }