How to do something when a button in a table row is clicked

[Timmmm]

Hi, firstly I wanted to say gpui-component is really impressive. I'm making a structured log viewer and I tried the Table widget with a million rows and it was fast (virtualised by default!) and easy, and looks great, which is more than I can say for many other GUI frameworks. I even managed to get a button in a row pretty easily.

However, I can't figure out how to add an on_click() handler to that button that does anything useful (i.e. modify app state).

I found this example but it too just does a println!(). How would I for example append a row to the table when I click on a button within a row?

[huacnlee]

And you want add a new row to table. You just need to add new items into the somewhere(self.data) that provides rows_count

impl TableDelegate for MyTableDelegate {
    fn columns_count(&self, _: &App) -> usize {
        self.columns.len()
    }

    fn rows_count(&self, _: &App) -> usize {
        self.data.len()
    }

https://longbridge.github.io/gpui-component/docs/components/table

[Timmmm]

Right that's the easy bit. The question is how do I actually modify the on_click handler to actually do stuff like that. Currently it just println!()s.

Adding a new row was maybe a bad example since it has access to self... but look at all the other on_click handlers in that example. They can do stuff because they have access to cx: &mut Context<Self>, but the table delegate on_click doesn't have access to that.

[huacnlee]

I have made the change for this API.

#1712

[Timmmm]

Ah wow that was fast! I'll give it a go, thanks!

[Timmmm]

That's definitely better, but I ran into another problem. If you try to do this it doesn't work:

    fn render_td(
        &mut self,
        row_ix: usize,
        col_ix: usize,
        _: &mut Window,
        cx: &mut Context<TableState<Self>>,
    ) -> impl IntoElement {
        let row = &self.data[row_ix];
        let col = &self.columns[col_ix];

        match col.key.as_ref() {
          "foo" =>  div()
                    .h_flex()
                    .children(row.xreg_writes.iter().map(|(reg, val)| {
                        Button::new("follow_reg")
                            .label(format!("x{reg} <- {}", val.to_hex()))
                            .on_click(cx.listener(move |table, _ev, _window, cx| {
                                table.vertical_scroll_handle.scroll_to_item_strict(0, gpui::ScrollStrategy::Center);
                                cx.notify();
                            }))

The problem is, the scroll_to_item_strict() sets the deferred_scroll_to_item as expected, however after this button's on_click handler fires, then row's on_click handler also fires and that overwrites the deferred_scroll_to_item.

                .on_click(cx.listener(move |this, e, window, cx| {
                    this.on_row_left_click(e, row_ix, window, cx);
                }))
                
...

    fn on_row_left_click(
        &mut self,
        e: &ClickEvent,
        row_ix: usize,
        _: &mut Window,
        cx: &mut Context<Self>,
    ) {
        self.set_selected_row(row_ix, cx);

...

    pub fn set_selected_row(&mut self, row_ix: usize, cx: &mut Context<Self>) {
        let is_down = match self.selected_row {
            Some(selected_row) => row_ix > selected_row,
            None => true,
        };

        self.selection_state = SelectionState::Row;
        self.right_clicked_row = None;
        self.selected_row = Some(row_ix);
        if let Some(row_ix) = self.selected_row {
            self.vertical_scroll_handle.scroll_to_item(

Is that a bug? I guess in something like the web platform this is what you use preventDefault() for. Does GPUI have something like that?

Sorry for the noob questions and thanks for the help!

[huacnlee]

You should not to set selected index, the Table already did that.

This you can read the story example to learn about it.

[huacnlee]

If you want scrolling to item by click on a button, you can try use cx.defer to delay to set scroll handle offset.

Or maybe there have another way to arrived this, but you need try.