on_change event for cells

[emirror-de]

Hi there!

I would like to render a table where the user is able to edit the content of the cells. I already noticed the on_click event on the RowRenderer which is basically what I am looking for, but on change in the cell renderer.

Something like:

fn CustomCellEditRenderer(...) -> impl IntoView {
    view!{
        cx,
        <td>
            <select on:change=move |_| on_change(/* parameters that contain information like row key, column and updated value */)>
                <option value="1">Something</option>
                <option value="2">Else</option>
            </select>
        </td>
    }
}

Is there a simple way to do this?

[maccesch]

Editing cells is definitely on the roadmap but right now it’s not implemented yet. We’re open to a PR though

[emirror-de]

Sounds good, I would be happy to give it a try. Can you give me a short guideline what needs to be changed or where to look at first, so I have a starting point?

[maccesch]

Awesome!

Some changes will be in the leptos-struct-table-macro crate which lives here.

To actually modify the data I think we should add a method like

async fn set_row(&mut self, index: usize, row: T);

to the trait TableDataProvider that will be called from the event handler.

The event handler closure would probably be defined around here. And then this function provides the props for whatever cell renderer is used. This would be the place to provide the event handler as a prop. That means of course that cell renderer components will have to take an event handler argument which includes the default renderers that live in this repo.

To make the table component easy to use a default implementation of TableDataProvider<T> is provided for Vec<T>. There we have to implement the new trait method as well. This would be place to do it.

I think that should get you started. If you have more questions feel free to DM me on Discord (handle: maccesch).

[emirror-de]

Thanks for your explanations, they have been very helpful for me to get started!

I prepared a PR for each of the repositories:
#4
Synphonyte/leptos-struct-table-macro#1

The first one contains explanations about the changes and my thoughts on it.

[emirror-de]

In addition to the updates in #4 I already have some other things added like support for DateTime<Utc> and double click event on rows. You can have a look here. For the macro crate the same branch exists.
Still the server_function example is not updated yet, but if you are happy with the additions I did we can replace #4 with the feature/opus-rs branch.

[maccesch]

I like your changes in the feature/opus-rs branch. Let's go back to the TableDataProvider as it was with the synchronous set_row method and I'll merge everything. We can figure out the async later.

[maccesch]

Implemented in 34db429