Dioxus 表格

使用 Dioxus 轻松实现数据驱动的表格渲染 (实时示例)

安装

将以下内容添加到您的 Cargo.toml 中

[dependencies]
dioxus-table = "0.1.1"

快速入门

将派生宏 TableData 添加到表示表格行的结构体。

// in mod hotel:

#[derive(PartialEq, TableData)]
pub struct Hotel {
    #[table(class = "text-end")] // right align numbers
    pub id: i32,

    #[table(title = "Hotel Name")] // custom title
    pub name: String,

    pub city: String,
    
    #[table(skip)] // don't show this column
    pub internal: u32,
}

这将在模块 hotel 中生成一个名为 Table 的 Dioxus 组件，供您在应用程序中使用。

// in your app:
use hotel::{Hotel, Table as HotelTable};

fn App(cx: Scope) -> Element {
    // get some hotels
    let hotels = vec![
        Hotel { id: 1, name: "Hotel 1".to_owned(), city: "City 1".to_owned(), internal: 42 },
        Hotel { id: 2, name: "Hotel 2".to_owned(), city: "City 2".to_owned(), internal: 42 },
    ];

    cx.render(rsx! {
        h1 { "Hotel Table" }
        HotelTable {
            class: "table",
            items: &hotels,
        }
    })
}

就是这样！简单，对吧？

您可以通过查看 examples 目录中的示例来获取 dioxus-table 可以做什么的更完整概述。

事件处理器

生成的表格组件提供了两个事件：点击行或头单元格。让我们在之前的示例中添加一些事件处理器。

cx.render(rsx! {
    h1 { "Hotel Table" }
    HotelTable {
        class: "table",
        items: &hotels,
        onrowclick: move |evt: TableRowEvent<_, _>| {
            web_sys::console::log_1(&format!("Row {}", evt.row_index).into());
        },
        onheadclick: move |evt: TableHeadEvent<_>| {
            web_sys::console::log_1(&format!("Head {} '{}'", evt.column_index, evt.field).into());
        },
    }
})

当您点击头单元格或数据行时，您会在控制台看到一些信息被记录。

自定义

您可以自定义表格渲染的多数方面。以下是所有可用选项的概述。

每列/字段选项

每表格选项

动态行类

给交互添加反馈的简单方法是为行元素添加一个类。例如，这使得高亮选中行变得容易。在 struct 中启用 dyn_row_classes 选项。

#[derive(PartialEq, TableData)]
#[table(dyn_row_classes)]
struct Hotel {
    ...
}

添加到行的类由调用 row_classes() 方法确定。因此，让我们来实现它。

impl Hotel {
    fn row_classes(&self, index: usize, cx: Scope<T>) -> Vec<String> {
        if /* this hotel is selected */ {
            vec!["selected".to_string()]
        } else {
            vec![]
        }
    }
}

row_classes() 方法为每一行调用。它接收行的 index 和当前上下文。请参阅 examples 目录中的酒店示例以获取完整示例。

自定义渲染器

自定义渲染器是自定义表格渲染几乎所有方面的强大方式。但它们非常容易使用。

自定义单元格渲染器

自定义渲染器的最常见用途可能是自定义表格单元格中的值的表示。

假设我们有一个包含 title 和 rating 字段的书籍表格。该 rating 字段是一个表示书籍获得星星数量的1到5的整数。

#[derive(PartialEq, TableData)]
pub struct Book {
    pub title: i32,
    pub rating: u8,
}

使用默认渲染器，我们只能在“评分”列中看到数字。如果我们想将此数字显示为星星，我们可以编写自定义渲染器。

#[derive(PartialEq, TableData)]
pub struct Book {
    pub title: i32,
    
    #[table(cell_renderer = "StarRenderer")] // specify the custom renderer
    pub rating: u8,
}

// The actual renderer component. It has to accept the DefaultTableCellProps.
pub fn StarRenderer(cx: Scope<DefaultTableCellProps<i32>>) -> Element {
    // the value of the rating field is provided as cx.props.value here
    let count = cx.props.value as usize; 

    // create a string with #count filled stars.
    let mut stars = "".to_owned();
    for _ in 0..count {
        stars += "★";
    }
    // then fill up the rest of the 5 stars with emtpy stars
    for _ in count..5 {
        stars += "☆";
    }

    // display the string
    cx.render(rsx! {
        td {
            class: "{cx.props.class}",
            "{stars}"
        }
    })
}

现在评分已正确显示为星星。要查看此功能，请在 examples/ 文件夹中运行酒店示例。

自定义行和表头单元格渲染器

它们基本上与单元格渲染器相同，但在结构定义上方指定。

#[derive(PartialEq, TableData)]
#[table(row_renderer = "MyRowRenderer", head_cell_renderer = "MyHeadCellRenderer")]
pub struct Book {
    pub title: i32,
    pub rating: u8,
}

要了解如何实现它们，请参阅 src/cell_renderers.rs 和 src/row_enderers.rs 中的默认渲染器。最快的方式是复制并粘贴相应的默认渲染器，并从那里进行自定义。