17 releases (10 stable)
1.1.7 | May 30, 2024 |
---|---|
1.1.5 | May 29, 2024 |
0.1.6 | May 17, 2024 |
#13 in #styled
43 downloads per month
36KB
516 lines
leptab
Leptos data table using tailwind as style
Additional details
This projects is still under development. If you are using Leptos with tailwind, it can be a perfect match for your data table UI.
Features
- Sort
- Download
- Search
- Row per page control
- Pagination
Example
#[component]
#[allow(non_snake_case)]
pub fn ExampleTable() -> impl IntoView {
//Create headers
let headers = RwSignal::new(vec![
TableHeader::new("user_id", "user_id", "Id", false, "", false, "", "", "", false, None),
TableHeader::new("name", "name", "Name", false, "", false, "", "", "", false, None),
TableHeader::new("profit", "profit_amount", "Profit Amount", true, "profit_currency", true, "- -", "", "", false, None),
//Use Prefix for something you want to add at the beginning, such as currency symbol
//TableHeader::new("profit", "profit_amount", "Profit Amount", false, "", false, "- -", "", "", false, Some("$".to_string())),
TableHeader::new("current_status", "current_status", "Status", false, "", false, "No movement", "Gain", "Loss", false. None),
]);
//Signal for sort, ascending is true, descending is false
let sort = RwSignal::new(false);
//Signal for sort_by (name of the column to sort)
let sort_by = RwSignal::new("".to_string());
//Offset, the start of the row to show
let offset = RwSignal::new(0u32);
//Limit, the end index of row to show
let limit = RwSignal::new(5u32);
//Search, keyword for search
let search = RwSignal::new("".to_string());
//Filter, a filter string for your query
let filter = RwSignal::new("set some query filter here".to_string());
let fields = RwSignal::new("set some fields here".to_string());
//Create a resource for data count, make sure that search is a dependency (dependes on your implementation)
let data_count_resource = create_local_resource(move || (search.get()), move |a| get_collection_count(filter.get(), Some(a)));
//Get collection here, make the necessary signals as dependency (dependes on your implementation)
let data_resource = create_local_resource(move || (filter.get(), fields.get(), offset.get(), limit.get(), search.get(), sort.get(), sort_by.get()),
move |(a,b,c,d,e,f ,g)| get_collection::<UserProfitResponse>(a, b, c, Some(d), Some(e), Some(f), Some(g)));
//Data count, it will hold the current count
let data_count = RwSignal::new(0u32);
//Some extraction (not necessary, depends on you implementation)
let extracted_data = RwSignal::new(Vec::<ExtractedUserProfit>::default());
//Convert to json data
let json_data = Signal::derive(move || {
extracted_data
.get()
.into_iter()
.map(serde_json::to_value)
.collect::<Result<Vec<serde_json::Value>, _>>()
.expect("Failed to serialize to JSON")
});
//If you want a download then add it here
let download_data_request = Signal::derive(move || {
DownloadDataRequest {
table_name: "trade".to_string(),
filter: filter.get(),
fields: fields.get(),
search: search.get(),
}
});
//Create a download resource, with DownloadDataRequest as request parameter
let download_resource: Resource<DownloadDataRequest, Result<String, ServerFnError>> = create_local_resource(move || (download_data_request.get()), move |d| get_collection_file::<UserProfitResponse>(d));
let allow_download = RwSignal::new(true);
let download_filename = RwSignal::new("user_profit_file".to_string());
//Current page number
let current_page = RwSignal::new(1u32);
view! {
<div>
<Transition
fallback = move || view! {
<div class = "items-center">
<div class = "flex justify-center h-screen">
//Add some loading spinners
</div>
</div>
}
>
{
move || {
data_count_resource.and_then(|c| {
data_count.set(*c);
data_resource.and_then(|d| {
extracted_data.set(d.extract());
view! {
<DataTable
headers = headers
data = json_data
offset = offset
search = search
sort = sort
sort_by = sort_by
limit = limit
total = data_count
current_page = current_page
allow_download = allow_download
download_filename = download_filename
download_resource = download_resource
/>
}
})
})
}
}
</Transition>
</div>
}
}
Dependencies
~21–33MB
~517K SLoC