table_rs::dioxus::header

Function TableHeader

Source 
pub fn TableHeader(_: TableHeaderProps) -> Element
Available on crate feature dio only.
Expand description

A table header component that renders sortable column headers for use within the Table component.

This component produces the <thead> section of a table using the provided column definitions, handling rendering, sorting indicators (aria-sort), and user interaction to trigger sort changes.

§Props

  • columns: A Vec<Column> defining the columns to display in the header. Each Column may be sortable and have optional styles or class overrides.
  • sort_column: A Signal<Option<&'static str>> indicating which column (if any) is currently being sorted.
  • sort_order: A Signal<SortOrder> indicating the current sort direction (Asc or Desc).
  • on_sort_column: An EventHandler<&'static str> triggered when a sortable header cell is clicked. The column ID is passed as the event payload.
  • classes: A TableClasses struct allowing custom class names for <thead>, <tr>, and <th> elements.

§Behavior

  • Sortable columns show proper aria-sort attributes for accessibility (ascending, descending, or none).
  • Clicking a sortable column emits an event to update sort state.
  • Each column can override default styles and classes via Column::style and Column::class.

§Returns

Returns a Dioxus Element containing the <thead> with all column headers rendered as <th> elements.

§Example

use dioxus::prelude::*;
use maplit::hashmap;
use table_rs::dioxus::table::Table;
use table_rs::dioxus::types::{Column, TableClasses, SortOrder};
use table_rs::dioxus::header::TableHeader;


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

    let sort_column = use_signal(|| Some("name"));
    let sort_order = use_signal(|| SortOrder::Asc);

    rsx! {
        TableHeader {
            columns: columns,
            sort_column: sort_column,
            sort_order: sort_order,
            on_sort_column: move |col_id| println!("Sort column changed: {}", col_id),
            classes: TableClasses::default(),
        }
    }
}

§See Also

§Props

For details, see the props struct definition.