Yew Table

为Yew网页框架提供的简单表格组件。

用法

通过设置 columns、data 和 options 属性来使用表格组件

impl Renderable<Model> for Model {
    fn view(&self) -> Html<Self> {
        // Define the columns. The first string is the field name, the second is the label.
        let columns = columns![
            ("id", "Id.")
            ("description", "Description")
            ("due_date", "Due date")
            ("status", "Status")
            ("is_favorite", "Favorite", "Fav.")
            ("is_archived", "Archived", "Arch.")
        ];

        let options = TableOptions {
            orderable: true,
        };

        html! {
            <>
                // Here, self.tasks is a vector of structs
                <Table<Task>: columns=columns, data=&self.tasks, options=Some(options),/>
            </>
        }
    }
}

为要使用的结构体实现 TableData 特性

#[derive(Default, Clone, PartialEq, Serialize)]
pub struct Task {
    pub id: String,
    // ...
}

impl TableData for Task {
    fn get_field_as_html(&self, field_name: &str) -> Html<Table<Self>> {
        match field_name {
            // Define how each field should be rendered. No restrictions.
            "id" => html! {
                { &self.id }
            },
            // ...
        }
    }

    fn get_field_as_value(&self, field_name: &str) -> TableResult<Value> {
        let value = match field_name {
            // Provide a processed version of your value. Keep the computation cheap! 
            "id" => serde_value::to_value(&self.id),
            // ...
        };
        Ok(value.unwrap())
    }
}

示例

可以在 examples 文件夹中找到一个示例Yew应用程序，显示一个普通表格。只需运行包含的 run.sh 脚本。

待办事项

• 添加排序功能
• 添加搜索功能
• 提高可访问性
• 添加分页

许可证

MIT © 2019 Alexis Luengas