Leptos Struct Table

Crates.io Docs MIT/Apache 2.0 Build Status

Easily create Leptos table components from structs.

Hero Image

Features

Usage

```rust use leptos::; use leptos_struct_table::; use serde::{Deserialize, Serialize}; use asynctrait::asynctrait;

// This generates the component PersonTable

[derive(TableComponent, Serialize, Deserialize, Debug, Clone, Default, PartialEq)]

pub struct Person { #[table(key)] id: u32, name: String, age: u32, }

fn main() { mounttobody(|cx| { // Create a few Person items let items = createrwsignal( cx, vec![ Person { id: 1, name: "John".tostring(), age: 32 }, Person { id: 2, name: "Jane".tostring(), age: 28 }, Person { id: 3, name: "Bob".to_string(), age: 45 }, ]);

    // Use the generated component
    view! { cx,
        <PersonTable items=items />
    }
});

} ```

Macro options

The #[table(...)] attribute can be used to customize the generated component. The following options are available:

Struct attributes

These attributes can be applied to the struct itself.

Field attributes

These attributes can be applied to any field in the struct.

Formatting

The format attribute can be used to customize the formatting of cells. It is an easier alternative to creating a custom renderer when you just want to customize some basic formatting.

Classes can be easily customized by using the classes_provider attribute on the struct. You can specify any type that implementats the trait [TableClassesProvider]. Please see the documentation for that trait for more information. You can also look at [TailwindClassesPreset] for an example how this can be implemented.

Example:

```rust

[derive(TableComponent, Serialize, Deserialize, Debug, Clone, Default, PartialEq)]

[table(classes_provider = "TailwindClassesPreset")]

pub struct Book { #[table(key)] id: u32, title: String, } ```

Field Getters

Sometimes you want to display a field that is not part of the struct but a derived value either from other fields or sth entirely different. For this you can use either the [FieldGetter] type or the getter attribute.

Let's start with [FieldGetter] and see an example:

```rust

[derive(TableComponent, Serialize, Deserialize, Debug, Clone, Default, PartialEq)]

[table(classes_provider = "TailwindClassesPreset")]

pub struct Book { #[table(key)] id: u32, title: String, author: String,

// this tells the macro that you're going to provide a method called `title_and_author` that returns a `String`
title_and_author: FieldGetter<String>

}

impl Book { // Returns the value that is displayed in the column pub fn titleandauthor(&self) -> String { format!("{} by {}", self.title, self.author) } } ```

To provide maximum flexibility you can use the getter attribute.

```rust

[derive(TableComponent, Serialize, Deserialize, Debug, Clone, Default, PartialEq)]

[table(classes_provider = "TailwindClassesPreset")]

pub struct Book { #[table(key)] id: u32,

// this tells the macro that you're going to provide a method called `get_title` that returns a `String`
#[table(getter = "get_title")]
title: String,

}

impl Book { pub fn get_title(&self) -> String { format!("Title: {}", self.title) } } ```

When to use FieldGetter vs getter attribute

A field of type FieldGetter<T> is a virtual field that doesn't really exist on the struct. Internally FieldGetter is just a new-typed PhatomData and thus is removed during compilation. Hence it doesn't increase memory usage. That means you should use it for purely derived data.

The getter attribute should be used on a field that actually exists on the struct but whose value you want to modify before it's rendered.

Custom Renderers

Custom renderers can be used to customize almost every aspect of the table. They are specified by using the various ...renderer attributes on the struct or fields. To implement a custom renderer please have a look at the default renderers listed below.

On the struct level you can use these attributes: - row_renderer - Defaults to [DefaultTableRowRenderer]. - head_row_renderer - Defaults to the tag tr. This only takes a class attribute. - head_cell_renderer - Defaults to [DefaultTableHeaderRenderer]. - thead_renderer - Defaults to the tag thead. Takes no attributes. - tbody_renderer - Defaults to the tag tbody. Takes no attributes.

On the field level you can use the renderer attribute.

It defaults to [DefaultNumberTableCellRenderer] for number types and [DefaultTableCellRenderer] for anything else. As long as Leptos supports rendering the type it will work. If the feature chrono is enabled then [DefaultNaiveDateTableCellRenderer], [DefaultNaiveDateTimeTableCellRenderer] and [DefaultNaiveTimeTableCellRenderer] are used for [chrono::NaiveDate], [chrono::NaiveDateTime] and [chrono::NaiveTime] respectively.

Example:

```rust

[derive(TableComponent, Serialize, Deserialize, Debug, Clone, Default, PartialEq)]

pub struct Book { #[table(key)] id: u32, title: String, #[table(renderer = "ImageTableCellRenderer")] img: String, }

// Easy cell renderer that just displays an image from an URL.

[component]

fn ImageTableCellRenderer( cx: Scope, #[prop(into)] class: MaybeSignal, #[prop(into)] value: MaybeSignal, index: usize, ) -> impl IntoView { view! { cx, Book image } } ```

For more detailed information please have a look at the custom_renderers_svg example for a complete customization.

Contribution

All contributions are welcome. Please open an issue or a pull request if you have any ideas or problems.