Struct Table

pub struct Table { /* private fields */ }

Available on crate feature yew only.

A fully featured table component with pagination, sorting, and search support.

This component renders a complete <table> element, including headers (<thead>), body (<tbody>), and optional features such as client-side sorting, pagination, and search input. It is built using Yew and supports flexible styling and customization.

Arguments

• props - The properties passed to the component.
  • data - A Vec<HashMap<&'static str, String>> representing the table’s row data.
  • columns - A Vec<Column> defining the structure and behavior of each column.
  • page_size - A usize defining how many rows to show per page.
  • loading - A bool indicating whether the table is in a loading state.
  • classes - A TableClasses struct for customizing class names of elements.
  • styles - A HashMap<&'static str, &'static str> for inline style overrides.
  • paginate - A bool controlling whether pagination controls are displayed.
  • search - A bool enabling a search input above the table.
  • texts - A TableTexts struct for customizing placeholder and fallback texts.

Features

• Client-side search with URL hydration via ?search=
• Column sorting (ascending/descending toggle)
• Pagination controls
• Custom class and inline style support
• Displays a loading row or empty state message when appropriate

Returns

(Html): A complete, styled and interactive table component rendered in Yew.

Examples

use yew::prelude::*;
use maplit::hashmap;
use table_rs::yew::table::Table;
use table_rs::yew::types::{Column, TableClasses, TableTexts};

#[function_component(App)]
pub fn app() -> Html {
    let data = vec![
        hashmap! { "name" => "Ferris".into(), "email" => "ferris@opensass.org".into() },
        hashmap! { "name" => "Ferros".into(), "email" => "ferros@opensass.org".into() },
    ];

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

    html! {
        <Table
            data={data}
            columns={columns}
            page_size={10}
            loading={false}
            paginate={true}
            search={true}
            classes={TableClasses::default()}
            texts={TableTexts::default()}
        />
    }
}

See Also

• MDN table Element

Trait Implementations

impl BaseComponent for Table

where Self: 'static,

type Message = ()

The Component’s Message.

type Properties = TableProps

The Component’s Properties.

fn create(ctx: &Context<Self>) -> Self

Creates a component.

fn update(&mut self, _ctx: &Context<Self>, _msg: Self::Message) -> bool

Updates component’s internal state.

fn changed( &mut self, _ctx: &Context<Self>, _old_props: &Self::Properties, ) -> bool

React to changes of component properties.

fn view(&self, ctx: &Context<Self>) -> HtmlResult

Returns a component layout to be rendered.

fn rendered(&mut self, _ctx: &Context<Self>, _first_render: bool)

Notified after a layout is rendered.

fn destroy(&mut self, _ctx: &Context<Self>)

Notified before a component is destroyed.

fn prepare_state(&self) -> Option<String>

Prepares the server-side state.

impl Debug for Table

fn fmt(&self, f: &mut Formatter<'_>) -> Result

Formats the value using the given formatter.

impl FunctionProvider for Table

type Properties = TableProps

Properties for the Function Component.

fn run(ctx: &mut HookContext, props: &Self::Properties) -> HtmlResult

Render the component. This function returns the Html to be rendered for the component.