How to implement a checkbox toggle state for table row.

[MoNaEcho]

我想实现一个带复选框的表格 ，但是 TableDelegate 的 render_td 传入的是一个 &self 我没法修改MyTableDelegate 的值，也不知道_window: &mut Window, _cx: &mut App 应该如何使用？

1、使用订阅？或监听？
2、还是MyTableDelegate 添加一个callback 方法 ？
3、还是用 mp 消息通讯
4、global state ?

现在一团糟，没有任何教程 关于组件间相互通讯

use gpui::*;
use gpui_component::checkbox::Checkbox;
use gpui_component::input::{Input, InputState};
use gpui_component::label::Label;
use gpui_component::table::{Column, ColumnSort, Table, TableDelegate, TableEvent, TableState};
use gpui_component::{button::*, *};
use rust_decimal::Decimal;
use std::path::PathBuf;

struct MyData {
    checked: bool,
    id: usize,
    name: String,
    age: u32,
    email: String,
}

struct MyTableDelegate {
    data: Vec<MyData>,
    columns: Vec<Column>,
    checked_rows: Vec<bool>, // 记录每行是否被选中
    select_all: bool,        // 全选状态
}

impl MyTableDelegate {
    fn new() -> Self {
        let data = vec![
            MyData {
                checked: false,
                id: 1,
                name: "John".to_string(),
                age: 30,
                email: "john@example.com".to_string(),
            },
            MyData {
                checked: true,
                id: 2,
                name: "Jane".to_string(),
                age: 25,
                email: "jane@example.com".to_string(),
            },
        ];

        Self {
            columns: vec![
                // 添加复选框列作为第一列
                Column::new("checkbox", "").width(40.),
                Column::new("id", "ID").width(60.),
                Column::new("name", "Name").width(150.).sortable(),
                Column::new("age", "Age").width(80.).sortable(),
                Column::new("email", "Email").width(200.),
            ],
            select_all: false,
            checked_rows: vec![false; data.len()],
            data,
        }
    }
}

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

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

    fn column(&self, col_ix: usize, _: &App) -> &Column {
        &self.columns[col_ix]
    }

    fn render_th(&self, col_ix: usize, _window: &mut Window, _cx: &mut App) -> impl IntoElement {
        let col = &self.columns[col_ix];

        match col.key.as_ref() {
            "checkbox" => {
                div().child(Checkbox::new("select_all_checkbox").checked(self.select_all))
            }
            _ => div().child(col.key.to_string()),
        }
    }

    fn render_td(
        &self,
        row_ix: usize,
        col_ix: usize,
        _window: &mut Window,
        _cx: &mut App,
    ) -> impl IntoElement {
        let MyData {
            checked,
            id,
            name,
            age,
            email,
        } = &self.data[row_ix];
        let col = &self.columns[col_ix];

        match col.key.as_ref() {
            "checkbox" => div().child(
                Checkbox::new("row_checkbox")
                    .checked(*checked)
                    .on_click(move |chcked, _, _| println!("row_ix:{} {}", row_ix, chcked)),
            ),
            "id" => div().child(id.to_string()),
            "name" => div().child(name.clone()),
            "age" => div().child(age.to_string()),
            "email" => div().child(email.clone()),
            _ => div().child("".to_string()),
        }
    }
}

pub struct CartItem {
    title: String,
    po_number: String,
    inventories: Vec<Inventory>,
}

pub struct Inventory {
    item_code: String,
    quantity: Decimal,
}

pub struct HelloWorld {
    file_path: Option<PathBuf>,
    input_state: Entity<InputState>,
    cart: Vec<CartItem>,
    table_state: Entity<TableState<MyTableDelegate>>,
}

impl HelloWorld {
    fn new(window: &mut Window, cx: &mut Context<Self>) -> Self {
        let input = cx.new(|cx| InputState::new(window, cx));
        let table_delegate = MyTableDelegate::new();
        let table_state = cx.new(|cx| TableState::new(table_delegate, window, cx));

        cx.subscribe_in(&table_state, window, |view, table, event, _, cx| {
            match event {
                TableEvent::SelectRow(row_ix) => {
                    println!("Row {} selected", row_ix);
                }
                TableEvent::DoubleClickedRow(row_ix) => {
                    println!("Row {} double-clicked", row_ix);
                    // Open detail view or edit mode
                }
                TableEvent::SelectColumn(col_ix) => {
                    println!("Column {} selected", col_ix);
                }
                _ => {}
            }
        })
        .detach();

        HelloWorld {
            file_path: None,
            input_state: input,
            cart: Vec::new(),
            table_state,
        }
    }

    fn add_cart_item(&mut self, item: CartItem) {
        self.cart.push(item);
    }

    fn select_file(&mut self, _: &ClickEvent, window: &mut Window, cx: &mut Context<Self>) {
        let file_options = PathPromptOptions {
            files: true,                                              // Enable file selection
            directories: false,                                       // Disable directory selection
            multiple: false,                                          // Disable multi-selection
            prompt: Some(SharedString::from("Please select a file")), // Custom prompt
        };

        let receiver = cx.prompt_for_paths(file_options);

        cx.spawn_in(window, async move |state, cx| match receiver.await {
            Ok(file_result) => match file_result {
                Ok(Some(paths)) => {
                    if let Some(selected_file) = paths.into_iter().next() {
                        println!("Selected single file: {}", selected_file.display());
                        let value = selected_file.display().to_string();
                        let _ = cx.update(|window, cx| {
                            let _ = state.update(cx, |state, cx| {
                                state.file_path = Some(selected_file);
                                state
                                    .input_state
                                    .update(cx, |input, cx| input.set_value(value, window, cx))
                            });
                        });
                    }
                }
                Ok(None) => println!("User canceled file selection"),
                Err(e) => eprintln!("File selection failed: {}", e),
            },
            Err(canceled) => eprintln!("File selection was canceled: {}", canceled),
        })
        .detach();
    }
}

impl Render for HelloWorld {
    fn render(&mut self, _: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
        div()
            .v_flex() // Vertical Flex layout
            .size_full() // Parent container takes full height
            .gap_3()
            .justify_start()
            .bg(rgb(0x505050))
            .child("Hello, World!")
            .child(
                div()
                    .h_flex()
                    .justify_between()
                    .child(Label::new("File:").w_1_12())
                    .child(
                        Input::new(&self.input_state)
                            .focus_bordered(false)
                            .disabled(false)
                            .prefix(Icon::new(IconName::Search).small())
                            .suffix(
                                Button::new("btn")
                                    .primary()
                                    .label("Please select!")
                                    .on_click(cx.listener(Self::select_file)),
                            ),
                    ),
            )
            .child(
                // In render
                Table::new(&self.table_state)
                    .stripe(true) // Alternating row colors
                    .bordered(true) // Border around table
                    .scrollbar_visible(true, true), // Vertical, horizontal scrollbars
            )
    }
}

fn main() {
    let app = Application::new();

    app.run(move |cx| {
        // This must be called before using any GPUI Component features.
        gpui_component::init(cx);

        cx.spawn(async move |cx| {
            cx.open_window(WindowOptions::default(), |window, cx| {
                let view = cx.new(|cx| HelloWorld::new(window, cx));
                // This first level on the window, should be a Root.
                cx.new(|cx| Root::new(view.into(), window, cx))
            })?;

            Ok::<_, anyhow::Error>(())
        })
        .detach();
    });
}

[huacnlee]

You can do like this:

struct MyTableDelegate {
    parent: Entity<HelloWorld>,
}

struct HelloWorld {
    checked_rows: Vec<bool>, 
}

impl TableDelegate for MyTableDelegate {
    fn render_td(
        &self,
        row_ix: usize,
        col_ix: usize,
        window: &mut Window,
        cx: &mut App,
    ) -> impl IntoElement {
        let MyData {
            checked,
            id,
            name,
            age,
            email,
        } = &self.data[row_ix];
        let col = &self.columns[col_ix];

        match col.key.as_ref() {
            "checkbox" => div().child(
                Checkbox::new("row_checkbox")
                    .checked(*checked)
                    .on_click(window.listener_for(&self.parent, HelloWorld::toggle_row_checked(row_ix))),
            ),
            _ => div().child("".to_string()),
        }
    }
}

[MoNaEcho]

it work! thanks

#[derive(Debug, Clone)]
pub struct InventoryItem {
    pub item_code: String,
    pub item_desc: String,
    pub stock_quantity: Decimal,
    pub used_quantity: Decimal,
    pub available_quantity: Decimal,
}


pub struct HelloWorld {
    pub table_state: Entity<TableState<MyTableDelegate>>,
    pub grouped_inventory: HashMap<String, Vec<InventoryItem>>,
    pub checked_rows: HashSet<usize>,
    pub select_all: bool,
}

impl HelloWorld {
    pub fn new(window: &mut Window, cx: &mut Context<Self>) -> Self {
............

}}

use crate::model::InventoryItem;
use crate::windows::HelloWorld;
use gpui::*;
use gpui_component::checkbox::Checkbox;
use gpui_component::table::{Column, TableDelegate};

pub struct MyTableDelegate {
    parent: Entity<HelloWorld>,
    pub data: Vec<InventoryItem>,
    columns: Vec<Column>,
}

impl MyTableDelegate {
    pub fn new(parent: Entity<HelloWorld>, _window: &mut Window, _cx: &mut App) -> Self {
        let data = vec![];

        Self {
            parent,
            columns: vec![
                // 添加复选框列作为第一列
                Column::new("checkbox", "").width(40.),
                Column::new("stock_quantity", "库存数量")
                    .width(200.)
                    .sortable(),
                Column::new("used_quantity", "已使用量")
                    .width(200.)
                    .sortable(),
                Column::new("available_quantity", "可用量").width(200.),
                Column::new("item_code", "物料编码").width(200.),
                Column::new("item_desc", "物料描述").width(300.),
            ],

            data,
        }
    }
}

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

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

    fn column(&self, col_ix: usize, _: &App) -> &Column {
        &self.columns[col_ix]
    }

    fn render_th(&self, col_ix: usize, window: &mut Window, cx: &mut App) -> impl IntoElement {
        let col = &self.columns[col_ix];
        let rows_count = self.rows_count(cx);
        match col.key.as_ref() {
            "checkbox" => div().child(
                Checkbox::new("select_all_checkbox")
                    .checked(self.parent.read(cx).select_all)
                    .on_click(window.listener_for(
                        &self.parent,
                        move |state, checked, _window, cx| {
                            if *checked {
                                state.checked_rows = (0..rows_count).collect();
                            } else {
                                state.checked_rows.clear();
                            }
                            state.select_all = *checked;

                            cx.notify();
                        },
                    )),
            ),
            _ => div().child(col.name.to_string()),
        }
    }

    fn render_td(
        &self,
        row_ix: usize,
        col_ix: usize,
        window: &mut Window,
        cx: &mut App,
    ) -> impl IntoElement {
        let InventoryItem {
            item_code,
            item_desc,
            stock_quantity,
            used_quantity,
            available_quantity,
        } = &self.data[row_ix];
        let col = &self.columns[col_ix];
        let rows_count = self.rows_count(cx);

        match col.key.as_ref() {
            "checkbox" => div().child(
                Checkbox::new("row_checkbox")
                    .checked(self.parent.read(cx).checked_rows.contains(&row_ix))
                    .on_click(window.listener_for(
                        &self.parent,
                        move |state, checked, _window, cx| {
                            if *checked {
                                // 不存在则插入
                                state.checked_rows.insert(row_ix);
                            } else {
                                // 存在则删除
                                state.checked_rows.remove(&row_ix);
                            }
                            // 更新全选状态
                            state.select_all = state.checked_rows.len() == rows_count;
                            cx.notify();
                        },
                    )),
            ),

            "stock_quantity" => div().child(stock_quantity.to_string()),
            "used_quantity" => div().child(used_quantity.to_string()),
            "available_quantity" => div().child(available_quantity.to_string()),
            "item_code" => div().child(item_code.to_string()),
            "item_desc" => div().child(item_desc.clone()),
            _ => div().child("".to_string()),
        }
    }
}