Struct Table 

pub struct Table<C, M>
where
    C: Clone + Eq + 'static,
    M: PartialEq + TableModel<C> + 'static,
{ /* private fields */ }

Table component

A table is used to display large data sets that can be easily laid out in a simple grid with column headers.

See: https://www.patternfly.org/components/table/html

Properties

Defined by TableProperties.

Usage

The table component is a more complex component than most others. It is recommended to check out the more complete examples in the quickstart project: https://github.com/patternfly-yew/patternfly-yew-quickstart/tree/main/src/components/table.

Summarizing it, you will need:

• A type defining the column/index (this can be an enum or a numeric like usize).
• A type defining an item/entry/row.
• Let the item type implement TableEntryRenderer.
• Create a table state model (e.g. using MemoizedTableModel).
• Wire up the table state model (e.g. using use_table_data).

If the table is too limiting (one example is wanting to save state per row) you may have to use ComposableTable. However, it is recommended to use Table where possible.

Example

use yew::prelude::*;
use patternfly_yew::prelude::*;

#[derive(Copy, Clone, Eq, PartialEq)]
enum Column { First, Second };
#[derive(Clone)]
struct ExampleEntry { foo: String };

impl TableEntryRenderer<Column> for ExampleEntry {
  fn render_cell(&self, context: CellContext<'_, Column>) -> Cell {
    match context.column {
      Column::First => html!(&self.foo).into(),
      Column::Second => html!({self.foo.len()}).into(),
    }
  }
}

#[function_component(Example)]
fn example() -> Html {

  let entries = use_memo((), |()| {
      vec![
          ExampleEntry { foo: "bar".into() },
          ExampleEntry {
              foo: "Much, much longer foo".into(),
          },
      ]
  });

  let (entries, _) = use_table_data(MemoizedTableModel::new(entries));

  let header = html_nested! {
    <TableHeader<Column>>
      <TableColumn<Column> label="foo" index={Column::First} />
      <TableColumn<Column> label="bar" index={Column::Second} />
    </TableHeader<Column>>
 };

  html! (
    <Table<Column, UseTableData<Column, MemoizedTableModel<ExampleEntry>>>
      {header}
      {entries}
    />
  )
}

Trait Implementations

impl<C, M> BaseComponent for Table<C, M>

where C: Clone + Eq + 'static, M: PartialEq + TableModel<C> + 'static, Self: 'static,

type Message = ()

The Component’s Message.

type Properties = TableProperties<C, M>

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<C, M> Debug for Table<C, M>

where C: Clone + Eq + 'static, M: PartialEq + TableModel<C> + 'static,

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

Formats the value using the given formatter.

impl<C, M> FunctionProvider for Table<C, M>

where C: Clone + Eq + 'static, M: PartialEq + TableModel<C> + 'static,

type Properties = TableProperties<C, M>

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.