rakutentech / r10 / R10.Table


type Column data msg context

Describes how to turn data into a column in your table.

columnCustom : { name : String, viewCell : R10.Palette.Palette -> Maybe data -> Element.WithContext.Element (R10.Context.ContextInternal context) msg, viewHeader : R10.Palette.Palette -> Internal.Config.HeaderInfo msg -> Element.WithContext.Element (R10.Context.ContextInternal context) msg, sorter : Internal.Types.Sorter data } -> Column data msg context

columnSimple : { name : String, toStr : data -> String } -> Column data msg context

columnWithAttrs : { name : String, toStr : data -> String, maybeToCmp : Maybe (data -> comparable), maybeAttrs : Maybe { header : List (Element.WithContext.Attribute (R10.Context.ContextInternal context) msg), cell : List (Element.WithContext.Attribute (R10.Context.ContextInternal context) msg) } } -> Column data msg context

columnWithViews : { name : String, viewCell : R10.Palette.Palette -> Maybe data -> Element.WithContext.Element (R10.Context.ContextInternal context) msg, viewHeader : R10.Palette.Palette -> Internal.Config.HeaderInfo msg -> Element.WithContext.Element (R10.Context.ContextInternal context) msg, maybeToCmp : Maybe (data -> comparable) } -> Column data msg context

config : { toId : data -> String, toMsg : Internal.Msg.Msg -> msg, columns : List (Column data msg context) } -> Internal.Config.Config data msg context

Create the Config for your view function. Everything you need to render your columns efficiently and handle selection of columns.

Say we have a List Person that we want to show as a table. The table should have a column for name and age. We would create a Config like this:

import Table

type Msg = NewTableTable.Model.State R10.Table.Internal.State.State | ...

config : R10.Table.Internal.Config Person Msg
config =
  R10.Table.config
    { toId = .name
    , toMsg = NewTableTable.Model.State
    , columns =
        [ R10.Table.stringColumn "Name" .name
        , R10.Table.intColumn "Age" .age
        ]
    }

You provide the followerLimiting information in your table configuration:

See the examples to get a better feel for this!

configWithAccordionRow : (Maybe data -> Element.WithContext.Element (R10.Context.ContextInternal context) msg) -> Basics.Int -> (Maybe data -> Basics.Bool) -> (Maybe data -> Basics.Bool) -> Internal.Config.Config data msg context -> Internal.Config.Config data msg context

customConfig : { toId : data -> String, toMsg : Internal.Msg.Msg -> msg, columns : List (Column data msg context), bodyAttrs : List (Element.WithContext.Attribute (R10.Context.ContextInternal context) msg), rowAttrsBuilder : Maybe data -> List (Element.WithContext.Attribute (R10.Context.ContextInternal context) msg), pagination : Maybe Internal.Config.PaginationConfig, filters : Maybe Internal.Config.FiltersConfig } -> Internal.Config.Config data msg context

Just like config but you can specify a bunch of table customizations.

getActiveFilters : Internal.State.State -> Dict String String

getPaginationStateRecord : Internal.State.State -> Maybe Internal.State.PaginationStateRecord

initialStateFilters : { filterValues : Dict String String } -> Internal.State.State -> Internal.State.State

initialStatePagination : { length : Basics.Int } -> Internal.State.State -> Internal.State.State

initialStateSort : { name : String, isReversed : Basics.Bool } -> Internal.State.State

Create a table state. By providing a column name, you determine which column should be used for sorting by default. So if you want your table of yachts to be sorted by length by default, you might say:

import Table

R10.Table.initialSort "Length"

isLoading : Internal.State.State -> Basics.Bool

isLoadingByPagination : Internal.State.State -> Basics.Bool

paginationButtonDisableAll : Internal.State.State -> Internal.State.State

paginationButtonEnableAll : Internal.State.State -> Internal.State.State

paginationButtonEnableOther : Internal.State.State -> Internal.State.State

paginationButtonNextFetch : Internal.State.State -> Internal.State.State

paginationButtonPrevFetch : Internal.State.State -> Internal.State.State

setLoading : Basics.Bool -> Internal.State.State -> Internal.State.State

updatePaginationState : Internal.State.PaginationStateRecord -> Internal.State.State -> Internal.State.State

view : R10.Palette.Palette -> Internal.Config.Config data msg context -> Internal.State.State -> List data -> Element.WithContext.Element (R10.Context.ContextInternal context) msg

Take a list of data and turn it into a table. The Config argument is the configuration for the table. It describes the columns that we want to show. The Table.State.State argument describes which column we are sorting by at the moment.

Note: The Table.State.State and List data should live in your Model. The Config for the table belongs in your view code. I very strongly recommend against putting Config in your model. Describe any potential table configurations statically, and look for a different library if you need something crazier than that.

viewHeaderRowHelp : R10.Palette.Palette -> Internal.State.State -> List (Internal.Config.ColumnConf data msg context) -> (String -> Basics.Bool -> msg) -> Element.WithContext.Element (R10.Context.ContextInternal context) msg


type alias State =
Internal.State.State