Function Table

pub fn Table(props: TableProps) -> Element

Available on crate feature dio only.

A fully featured table component with sorting, pagination, and search functionality in Dioxus.

This component renders an interactive HTML <table> with customizable columns, data, class names, and labels. It supports client-side sorting, search with URL hydration, and pagination.

Props

TableProps defines the configuration for this component:

• data: A Vec<HashMap<&'static str, String>> representing row data.
• columns: A Vec<Column> describing each column’s ID, header text, and behavior.
• page_size: Number of rows to display per page (default: 10).
• loading: When true, displays a loading indicator (default: false).
• paginate: Enables pagination controls (default: false).
• search: Enables a search input for client-side filtering (default: false).
• texts: Customizable text labels for UI strings (default: TableTexts::default()).
• classes: Customizable CSS class names for each table part (default: TableClasses::default()).

Features

• Search: Filters rows client-side using a text input; the query is persisted in the URL via ?search=.
• Sorting: Clickable headers allow sorting columns ascending or descending.
• Pagination: Navigate between pages using prev/next buttons, with an indicator showing current page.
• Custom Classes: All elements are styled via TableClasses for full customization.
• Text Overrides: All UI strings (e.g., empty state, loading, buttons) can be customized using TableTexts.

Returns

Returns a Dioxus Element that renders a complete table with the above features.

Example

use dioxus::prelude::*;
use maplit::hashmap;
use table_rs::dioxus::table::Table;
use table_rs::dioxus::types::Column;


fn App() -> Element {
    let data = vec![
        hashmap! { "name" => "ferris".to_string(), "email" => "ferris@opensass.org".to_string() },
        hashmap! { "name" => "ferros".to_string(), "email" => "ferros@opensass.org".to_string() },
    ];

    let columns = vec![
        Column { id: "name", header: "Name", sortable: true, ..Default::default() },
        Column { id: "email", header: "Email", ..Default::default() },
    ];

    rsx! {
        Table {
            data: data,
            columns: columns,
            paginate: true,
            search: true,
        }
    }
}

See Also

• MDN <table> Element