Table

Semantic table element for presenting data.

use radix_yew_themes::{
    Table, TableBody, TableCell, TableColumnHeaderCell, TableHeader, TableRow, TableRowHeaderCell,
};
use yew::prelude::*;

#[function_component]
pub fn TableExample() -> Html {
    html! {
        <Table>
            <TableHeader>
                <TableRow>
                    <TableColumnHeaderCell>{"Full name"}</TableColumnHeaderCell>
                    <TableColumnHeaderCell>{"Email"}</TableColumnHeaderCell>
                    <TableColumnHeaderCell>{"Group"}</TableColumnHeaderCell>
                </TableRow>
            </TableHeader>

            <TableBody>
                <TableRow>
                    <TableRowHeaderCell>{"Danilo Sousa"}</TableRowHeaderCell>
                    <TableCell>{"danilo@example.com"}</TableCell>
                    <TableCell>{"Developer"}</TableCell>
                </TableRow>

                <TableRow>
                    <TableRowHeaderCell>{"Zahra Ambessa"}</TableRowHeaderCell>
                    <TableCell>{"zahra@example.com"}</TableCell>
                    <TableCell>{"Admin"}</TableCell>
                </TableRow>

                <TableRow>
                    <TableRowHeaderCell>{"Jasper Eriksson"}</TableRowHeaderCell>
                    <TableCell>{"jasper@example.com"}</TableCell>
                    <TableCell>{"Developer"}</TableCell>
                </TableRow>
            </TableBody>
        </Table>
    }
}

API Reference

Root

Groups the Header and Body parts. This component is based on the table element and supports common margin props.

Prop	Type	Default
`size`	`Responsive<1..3>`	`1`
`variant`	`TableVariant`	`TableVariant::Ghost`
`layout`	`Option<Responsive<TableLayout>>`	-

Contains the column headings for the table, based on the thead element.

Body

Displays the table data. This component is based on the tbody element.

Row

A row of table cells. Based on the tr element.

Prop	Type	Default
`align`	`Option<Responsive<TableRowAlign>>`	-

Cell

A basic table cell. This component is based on the td element, but uses justify instead of align to control how horizontal space is distributed within the table cell.

Prop	Type	Default
`justify`	`Option<Responsive<TableCellJustify>>`	-
`width`	`Option<Responsive<String>>`	-
`min_width`	`Option<Responsive<String>>`	-
`max_width`	`Option<Responsive<String>>`	-
`p`	`Option<Responsive<0..9>>`	-
`px`	`Option<Responsive<0..9>>`	-
`py`	`Option<Responsive<0..9>>`	-
`pt`	`Option<Responsive<0..9>>`	-
`pr`	`Option<Responsive<0..9>>`	-
`pb`	`Option<Responsive<0..9>>`	-
`pl`	`Option<Responsive<0..9>>`	-

ColumnHeaderCell

The header of a table column. Based on the th element and provides the same props interface as the Cell part.

Prop	Type	Default
`justify`	`Option<Responsive<TableCellJustify>>`	-
`width`	`Option<Responsive<String>>`	-
`min_width`	`Option<Responsive<String>>`	-
`max_width`	`Option<Responsive<String>>`	-
`p`	`Option<Responsive<0..9>>`	-
`px`	`Option<Responsive<0..9>>`	-
`py`	`Option<Responsive<0..9>>`	-
`pt`	`Option<Responsive<0..9>>`	-
`pr`	`Option<Responsive<0..9>>`	-
`pb`	`Option<Responsive<0..9>>`	-
`pl`	`Option<Responsive<0..9>>`	-

RowHeaderCell

The header of a table row. Based on the th element and provides the same props interface as the Cell part.

Prop	Type	Default
`justify`	`Option<Responsive<TableCellJustify>>`	-
`width`	`Option<Responsive<String>>`	-
`min_width`	`Option<Responsive<String>>`	-
`max_width`	`Option<Responsive<String>>`	-
`p`	`Option<Responsive<0..9>>`	-
`px`	`Option<Responsive<0..9>>`	-
`py`	`Option<Responsive<0..9>>`	-
`pt`	`Option<Responsive<0..9>>`	-
`pr`	`Option<Responsive<0..9>>`	-
`pb`	`Option<Responsive<0..9>>`	-
`pl`	`Option<Responsive<0..9>>`	-

Examples

Size

Use the size prop to control how large the text and padding of the table cells should be.

use radix_yew_themes::{
    Flex, FlexDirection, Table, TableBody, TableCell, TableColumnHeaderCell, TableHeader, TableRow,
    TableRowHeaderCell,
};
use yew::prelude::*;

#[function_component]
pub fn TableSizeExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column} gap=5 max_width="350px">
            <Table size=1>
                <TableHeader>
                    <TableRow>
                        <TableColumnHeaderCell>{"Full name"}</TableColumnHeaderCell>
                        <TableColumnHeaderCell>{"Email"}</TableColumnHeaderCell>
                    </TableRow>
                </TableHeader>

                <TableBody>
                    <TableRow>
                        <TableRowHeaderCell>{"Danilo Sousa"}</TableRowHeaderCell>
                        <TableCell>{"danilo@example.com"}</TableCell>
                    </TableRow>
                    <TableRow>
                        <TableRowHeaderCell>{"Zahra Ambessa"}</TableRowHeaderCell>
                        <TableCell>{"zahra@example.com"}</TableCell>
                    </TableRow>
                </TableBody>
            </Table>

            <Table size=2>
                <TableHeader>
                    <TableRow>
                        <TableColumnHeaderCell>{"Full name"}</TableColumnHeaderCell>
                        <TableColumnHeaderCell>{"Email"}</TableColumnHeaderCell>
                    </TableRow>
                </TableHeader>

                <TableBody>
                    <TableRow>
                        <TableRowHeaderCell>{"Danilo Sousa"}</TableRowHeaderCell>
                        <TableCell>{"danilo@example.com"}</TableCell>
                    </TableRow>
                    <TableRow>
                        <TableRowHeaderCell>{"Zahra Ambessa"}</TableRowHeaderCell>
                        <TableCell>{"zahra@example.com"}</TableCell>
                    </TableRow>
                </TableBody>
            </Table>

            <Table size=3>
                <TableHeader>
                    <TableRow>
                        <TableColumnHeaderCell>{"Full name"}</TableColumnHeaderCell>
                        <TableColumnHeaderCell>{"Email"}</TableColumnHeaderCell>
                    </TableRow>
                </TableHeader>

                <TableBody>
                    <TableRow>
                        <TableRowHeaderCell>{"Danilo Sousa"}</TableRowHeaderCell>
                        <TableCell>{"danilo@example.com"}</TableCell>
                    </TableRow>
                    <TableRow>
                        <TableRowHeaderCell>{"Zahra Ambessa"}</TableRowHeaderCell>
                        <TableCell>{"zahra@example.com"}</TableCell>
                    </TableRow>
                </TableBody>
            </Table>
        </Flex>
    }
}

With a Backplate

Use TableVariant::Surface to add a visually enclosed backplate to the table.

use radix_yew_themes::{
    Table, TableBody, TableCell, TableColumnHeaderCell, TableHeader, TableRow, TableRowHeaderCell,
    TableVariant,
};
use yew::prelude::*;

#[function_component]
pub fn TableWithABackplateExample() -> Html {
    html! {
        <Table variant={TableVariant::Surface}>
            <TableHeader>
                <TableRow>
                    <TableColumnHeaderCell>{"Full name"}</TableColumnHeaderCell>
                    <TableColumnHeaderCell>{"Email"}</TableColumnHeaderCell>
                    <TableColumnHeaderCell>{"Group"}</TableColumnHeaderCell>
                </TableRow>
            </TableHeader>

            <TableBody>
                <TableRow>
                    <TableRowHeaderCell>{"Danilo Sousa"}</TableRowHeaderCell>
                    <TableCell>{"danilo@example.com"}</TableCell>
                    <TableCell>{"Developer"}</TableCell>
                </TableRow>

                <TableRow>
                    <TableRowHeaderCell>{"Zahra Ambessa"}</TableRowHeaderCell>
                    <TableCell>{"zahra@example.com"}</TableCell>
                    <TableCell>{"Admin"}</TableCell>
                </TableRow>

                <TableRow>
                    <TableRowHeaderCell>{"Jasper Eriksson"}</TableRowHeaderCell>
                    <TableCell>{"jasper@example.com"}</TableCell>
                    <TableCell>{"Developer"}</TableCell>
                </TableRow>
            </TableBody>
        </Table>
    }
}

Rust Radix