Elm ui table: edit row using button and how to get row id

Learn
1

Hi good people of elm land,
I’m new to elm. I’m trying to edit rows using elm ui’s indexedtable/table. I can’t seem to find a way to identify a particular row for edit using either the record params itself or the row index.

for the edit button i create it like so:

...
, { header...
, width ...
, view = \rowIndex rowData -> makeButton model rowIndex rowData
...

where makeButton is of shape:

row [ padding ....]
  [Input.button
     [padding...]
     { onPress = Just LaunchEditModal }
     , label = text "edit"}
  ]

is there a way to tie the button to the row/record with an id or element in the record, so as to be able to fire off a message with the button for that specific row?

2

Hi nalui

If I’ve understood your problem, the data you need is right there in the unnamed view function.
view = \rowIndex rowData → makeButton model rowIndex rowData

So I would have something like:

type Msg = 
   LaunchEditModal Int MyRecord
   ...

where MyRecord is the data you are representing in the table.

Then

makeButton model rowIndex rowData =
   row [ padding …]
       [ Input.button 
            [padding…]
            { onPress = Just <| LaunchEditModal rowIndex rowData 
            , label = text “edit”
            }
       ]

And

update msg model =
   case msg of
   ...
   LaunchEditModal rowIndex rowData ->
      ...
   ...

ps To make it easier to read, put single back ticks (`) around single lines of code, and triple back ticks (```) around multiple lines of code.

1 Like
3

Thanks I’ll try this.

Update: That worked. Appreciate the help. I guess I don’t understand how the passing a message to “Just” works. is there an article i can read up on that explains that.

4

You’re welcome.

The best place to start is probably The Elm Guide.

The relevant section for Just is The section about the Maybe type.

type Maybe a
  = Just a
  | Nothing

Just is a function that turns a value into a maybe.
Nothing is also a function that returns a Maybe, it simply has no value.

The Maybe type is used in the elm-ui button function so that you can have a button that sends no message (onPress = Nothing). This is useful as a ‘placekeeper’ for when you’re creating a button in the view and you haven’t yet done the update ‘wiring’.

onPress is a function that takes a Maybe Msg as its input, and sends the Msg part to your update function (or sends no message at all if onPress = Nothing).

The <| before Just is a pipe which creates a handy and neat alternative to using (...).
So, onPress = Just <| LaunchEditModal rowIndex rowData
could have been written, onPress = Just (LaunchEditModal rowIndex rowData).
It’s needed because the message now carries associated data (rowIndex and rowData), so the message with it’s data must be packaged up and given to Just as one lump.

2 Likes
5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.