Table#
Tables...
<TableContainer>
<Table bordered=true hoverable=true>
<TableHeader>
<TableRow>
<TableHeaderCell min_width=true>"#"</TableHeaderCell>
<TableHeaderCell>"Name"</TableHeaderCell>
<TableHeaderCell>"Appearance"</TableHeaderCell>
<TableHeaderCell>"Num. eyes"</TableHeaderCell>
</TableRow>
</TableHeader>
<TableBody>
<For
each=move || minions.get()
key=move |minion| minion.id
children=move |minion| view! {
<TableRow>
<TableCell>{minion.id}</TableCell>
<TableCell>{minion.name}</TableCell>
<TableCell>{minion.appearance}</TableCell>
<TableCell>{minion.num_eyes}</TableCell>
</TableRow>
}
/>
</TableBody>
</Table>
</TableContainer>
#NameAppearanceNum. eyes1KevinTall22BobShort23StuartMedium14OttoRound2Styling#
You may overwrite any of the following CSS variables to meet your styling needs.
// Table wrapper
--table-wrapper-box-shadow-color
// Table
--table-color
--table-background-color
--table-background-color-on-hover
--table-background-color-of-striped-rows
--table-header-background-color
--table-border-color
--table-cell-box-shadow-on-hover
--table-column-background-if-ordered
--table-header-cell-padding
--table-body-cell-padding
