50 lines
2.0 KiB
Rust
50 lines
2.0 KiB
Rust
use yew::{function_component, html, Children, Html, Properties};
|
|
|
|
#[derive(Properties, PartialEq, Default)]
|
|
pub struct Props {
|
|
pub headers: Vec<String>,
|
|
pub rows: Vec<Vec<String>>,
|
|
pub loading: bool,
|
|
|
|
#[prop_or_default]
|
|
pub children: Children,
|
|
}
|
|
|
|
#[function_component(Table)]
|
|
pub fn table(props: &Props) -> Html {
|
|
html! {
|
|
<div class="inline-block min-w-full py-2 align-middle">
|
|
<div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
|
|
<table class="min-w-full divide-y divide-gray-600">
|
|
<thead class="bg-gray-800">
|
|
<tr>
|
|
{props.headers.iter().map(|header| html! {
|
|
<th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-400">{header}</th>
|
|
}).collect::<Html>()}
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-gray-600 bg-gray-700">
|
|
{props.rows.iter().map(|row| html! {
|
|
<tr>
|
|
{row.iter().map(|value| html! {
|
|
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-400">{value}</td>
|
|
}).collect::<Html>()}
|
|
</tr>
|
|
}).collect::<Html>()}
|
|
{ for props.children.iter() }
|
|
{if props.loading == true { html! {
|
|
<tr>
|
|
<td colspan={(props.headers.len() + 1).to_string()} class="py-3">
|
|
<div class="grid place-items-center">
|
|
{ "Loading ..." }
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
}} else { html! {} }}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
}
|
|
}
|