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

**URL:** <https://discourse.elm-lang.org/t/elm-ui-table-edit-row-using-button-and-how-to-get-row-id/9043>\
**Category:** Learn\
**Created:** [March 31, 2023, 11:13am UTC](https://discourse.elm-lang.org/t/elm-ui-table-edit-row-using-button-and-how-to-get-row-id/9043 "2023-03-31T11:13:04Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![nalui444](https://avatars.discourse-cdn.com/v4/letter/n/ed655f/32.png) [@nalui444](https://discourse.elm-lang.org/u/nalui444)\
**Post date:** [March 31, 2023, 11:13am UTC](https://discourse.elm-lang.org/t/elm-ui-table-edit-row-using-button-and-how-to-get-row-id/9043/1 "2023-03-31T11:13:04Z")

</div>

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:

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

```

where makeButton is of shape:

```auto
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?

---

<div class="post-metadata">

**Author:** ![AlanQ](https://avatars.discourse-cdn.com/v4/letter/a/e9bcb4/32.png) [@AlanQ](https://discourse.elm-lang.org/u/AlanQ)\
**Post date:** [March 31, 2023, 12:06pm UTC](https://discourse.elm-lang.org/t/elm-ui-table-edit-row-using-button-and-how-to-get-row-id/9043/2 "2023-03-31T12:06:54Z")

</div>

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:

```auto
type Msg = 
   LaunchEditModal Int MyRecord
   ...

```

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

Then

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

```

And

```auto
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._

---

<div class="post-metadata">

**Author:** ![nalui444](https://avatars.discourse-cdn.com/v4/letter/n/ed655f/32.png) [@nalui444](https://discourse.elm-lang.org/u/nalui444)\
**Post date:** [March 31, 2023, 12:12pm UTC](https://discourse.elm-lang.org/t/elm-ui-table-edit-row-using-button-and-how-to-get-row-id/9043/3 "2023-03-31T12:12:24Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![AlanQ](https://avatars.discourse-cdn.com/v4/letter/a/e9bcb4/32.png) [@AlanQ](https://discourse.elm-lang.org/u/AlanQ)\
**Post date:** [March 31, 2023, 1:09pm UTC](https://discourse.elm-lang.org/t/elm-ui-table-edit-row-using-button-and-how-to-get-row-id/9043/4 "2023-03-31T13:09:53Z")

</div>

You’re welcome.

The best place to start is probably [The Elm Guide](https://guide.elm-lang.org/).

The relevant section for `Just` is [The section about the Maybe type](https://guide.elm-lang.org/error_handling/maybe.html).

```auto
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_.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/1X/50a05e53677a2c3b47776d7abd0f113eb50193a1.png) [@system](https://discourse.elm-lang.org/u/system)\
**Post date:** [April 10, 2023, 1:10pm UTC](https://discourse.elm-lang.org/t/elm-ui-table-edit-row-using-button-and-how-to-get-row-id/9043/5 "2023-04-10T13:10:42Z")

</div>

Closed on April 10, 2023, 1:10pm UTC

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