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:
toId
— turn a Person
into a unique ID. This lets us use
Html.Keyed
under the hood to make resorts faster.columns
— specify some columns to show.toMsg
— a way to send new table states to your app as messages.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
Internal.State.State