use_tabular

Function use_tabular 

Source
pub fn use_tabular<C: Columns<R>, R: Row>(
    columns: C,
    rows: ReadSignal<Vec<R>>,
) -> TableData<C, R>
Expand description

Creates a reactive table with the given columns and rows.

This is the main hook for setting up a table. It returns a TableData that can be used with TableHeaders and TableCells components to render the table.

§Parameters

  • columns: A tuple of columns implementing TableColumn
  • rows: A reactive signal containing the row data

§Example

use dioxus::prelude::*;
use dioxus_tabular::*;

fn app() -> Element {
    let users = use_signal(|| vec![
        User { id: 1, name: "Alice".to_string() },
        User { id: 2, name: "Bob".to_string() },
    ]);

    // Create table with single column
    let data = use_tabular((NameColumn,), users.into());

    rsx! {
        table {
            thead { tr { TableHeaders { data } } }
            tbody {
                for row in data.rows() {
                    tr { key: "{row.key()}", TableCells { row } }
                }
            }
        }
    }
}

§Multiple Columns

// Use tuple for multiple columns (supports up to 12 columns)
let data = use_tabular((IdColumn, NameColumn), users.into());