{"id":13597323,"url":"https://github.com/Synphonyte/leptos-struct-table","last_synced_at":"2025-04-10T00:31:59.852Z","repository":{"id":161804882,"uuid":"636446382","full_name":"Synphonyte/leptos-struct-table","owner":"Synphonyte","description":"Easily create Leptos table components from structs","archived":false,"fork":false,"pushed_at":"2025-03-18T00:00:03.000Z","size":1081,"stargazers_count":197,"open_issues_count":9,"forks_count":28,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-31T23:31:55.080Z","etag":null,"topics":["datasheet","leptos","macros-rust","tables"],"latest_commit_sha":null,"homepage":"","language":"Rust","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Synphonyte.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE-APACHE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["Synphonyte"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null,"custom":null}},"created_at":"2023-05-04T21:41:24.000Z","updated_at":"2025-03-27T20:02:03.000Z","dependencies_parsed_at":null,"dependency_job_id":"b34ab5b1-ee18-4f16-90e6-fcaa07ea59b9","html_url":"https://github.com/Synphonyte/leptos-struct-table","commit_stats":null,"previous_names":[],"tags_count":36,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Synphonyte%2Fleptos-struct-table","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Synphonyte%2Fleptos-struct-table/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Synphonyte%2Fleptos-struct-table/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Synphonyte%2Fleptos-struct-table/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Synphonyte","download_url":"https://codeload.github.com/Synphonyte/leptos-struct-table/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247755489,"owners_count":20990618,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["datasheet","leptos","macros-rust","tables"],"created_at":"2024-08-01T17:00:30.550Z","updated_at":"2025-04-10T00:31:59.836Z","avatar_url":"https://github.com/Synphonyte.png","language":"Rust","funding_links":["https://github.com/sponsors/Synphonyte"],"categories":["Rust","Components","others"],"sub_categories":["Unofficial"],"readme":"# Leptos Struct Table\n\n[![Crates.io](https://img.shields.io/crates/v/leptos-struct-table.svg)](https://crates.io/crates/leptos-struct-table)\n[![Docs](https://docs.rs/leptos-struct-table/badge.svg)](https://docs.rs/leptos-struct-table/)\n[![MIT/Apache 2.0](https://img.shields.io/badge/license-MIT%2FApache-blue.svg)](https://github.com/synphonyte/leptos-struct-table#license)\n[![Build Status](https://github.com/synphonyte/leptos-struct-table/actions/workflows/cd.yml/badge.svg)](https://github.com/synphonyte/leptos-struct-table/actions/workflows/cd.yml)\n\n\u003c!-- cargo-rdme start --\u003e\n\nEasily create Leptos table components from structs.\n\n![Hero Image](https://raw.githubusercontent.com/synphonyte/leptos-struct-table/master/hero.webp)\n\n## Features\n\n- **Easy to use** - yet powerful.\n- **Async data loading** - The data is loaded asynchronously. This allows to load data from a REST API or a database etc.\n- **Selection** - Can be turned off or single/multi select\n- **Customization** - You can customize every aspect of the table by plugging in your own components for rendering rows, cells, headers. See [Custom Renderers](#custom-renderers) for more information.\n- **Headless** - No default styling is applied to the table. You can fully customize the classes that are applied to the table. See [Classes customization](#classes-customization) for more information.\n- **Sorting** - Optional. If turned on: Click on a column header to sort the table by that column. You can even sort by multiple columns.\n- **Virtualization** - Only the visible rows are rendered. This allows for very large tables.\n- **Pagination** - Instead of virtualization you can paginate the table.\n- **Caching** - Only visible rows are loaded and cached.\n- **Editing** - Optional. You can provide custom renderers for editable cells. See [Editable Cells](#editable-cells) for more information.\n\n## Usage\n\n```rust\nuse leptos::prelude::*;\nuse leptos_struct_table::*;\n\n#[derive(TableRow, Clone)]\n#[table(impl_vec_data_provider)]\npub struct Person {\n    id: u32,\n    name: String,\n    age: u32,\n}\n\n#[component]\nfn Demo() -\u003e impl IntoView {\n    let rows = vec![\n        Person { id: 1, name: \"John\".to_string(), age: 32 },\n        Person { id: 2, name: \"Jane\".to_string(), age: 28 },\n        Person { id: 3, name: \"Bob\".to_string(), age: 45 },\n    ];\n\n    view! {\n        \u003ctable\u003e\n            \u003cTableContent rows scroll_container=\"html\" /\u003e\n        \u003c/table\u003e\n    }\n}\n```\n\n## Leptos Compatibility\n\n| Crate version | Compatible Leptos version |\n|---------------|---------------------------|\n| \u003c= 0.2        | 0.3                       |\n| 0.3           | 0.4                       |\n| 0.4, 0.5, 0.6 | 0.5                       |\n| 0.7 – 0.12    | 0.6                       |\n| 0.14.0-beta2  | 0.7                       |\n\n## Server-Side Rendering\n\nTo use this with Leptos' server-side rendering, you can have to add `leptos-use` as a dependency to your `Cargo.toml` and\nthen configure it for SSR like the following.\n\n```toml\n[dependencies]\nleptos-use = \"\u003ccurrent version\u003e\"\n# ...\n\n[features]\nhydrate = [\n    \"leptos/hydrate\",\n    # ...\n]\nssr = [\n    \"leptos/ssr\",\n    # ...\n    \"leptos-use/ssr\",\n]\n```\n\nPlease see the [serverfn_sqlx example](https://github.com/Synphonyte/leptos-struct-table/blob/master/examples/serverfn_sqlx/Cargo.toml)\nfor a working project with SSR.\n\n## Data Providers\n\nAs shown in the initial usage example, when you add `#[table(impl_vec_data_provider)]` to your struct,\nthe table will automatically generate a data provider for you. You can then directly pass a `Vec\u003cT\u003e` to the `rows` prop.\nInternally this implements the trait [`TableDataProvider`] for `Vec\u003cT\u003e`.\n\nTo leverage the full power of async partial data loading with caching you should implement the trait\n[`PaginatedTableDataProvider`] or the trait [`TableDataProvider`] yourself. It's quite easy to do so.\nWhich of the two traits you choose depends on your data source. If your data source provides\npaginated data, as is the case for many REST APIs, you should implement [`PaginatedTableDataProvider`].\nOtherwise you should probably implement [`TableDataProvider`].\n\nSee the [paginated_rest_datasource example](https://github.com/Synphonyte/leptos-struct-table/blob/master/examples/paginated_rest_datasource/src/data_provider.rs)\nand the [serverfn_sqlx example](https://github.com/Synphonyte/leptos-struct-table/blob/master/examples/serverfn_sqlx/src/data_provider.rs)\nfor working demo projects that implement these traits.\n\n## Macro options\n\nThe `#[table(...)]` attribute can be used to customize the generated component. The following options are available:\n\n### Struct attributes\n\nThese attributes can be applied to the struct itself.\n\n- **`sortable`** - Specifies that the table should be sortable. This makes the header titles clickable to control sorting.\n  You can specify two sorting modes with the prop `sorting_mode` on the `TableContent` component:\n  - `sorting_mode=SortingMode::MultiColumn` (the default) allows the table to be sorted by multiple columns ordered by priority.\n  - `sorting_mode=SortingMode::SingleColumn\"` allows the table to be sorted by a single column. Clicking on another column will simply replace the sorting column.\n\n  See the [simple example](https://github.com/synphonyte/leptos-struct-table/blob/master/examples/simple/src/main.rs) and the\n  [selectable example](https://github.com/synphonyte/leptos-struct-table/blob/master/examples/selectable/src/main.rs) for more information.\n- **`classes_provider`** - Specifies the name of the class provider. Used to quickly customize all of the classes that are applied to the table.\n  For convenience sensible presets for major CSS frameworks are provided. See [`TableClassesProvider`] and [tailwind example](https://github.com/synphonyte/leptos-struct-table/blob/master/examples/tailwind/src/main.rs) for more information.\n- **`head_cell_renderer`** - Specifies the name of the header cell renderer component. Used to customize the rendering of header cells. Defaults to [`DefaultTableHeaderRenderer`]. See the [custom_renderers_svg example](https://github.com/Synphonyte/leptos-struct-table/blob/master/examples/custom_renderers_svg/src/main.rs) for more information.\n- **`impl_vec_data_provider`** - If given, then [`TableDataProvider`] is automatically implemented for `Vec\u003cThisStruct\u003e` to allow\n  for easy local data use. See the [simple example](https://github.com/synphonyte/leptos-struct-table/blob/master/examples/simple/src/main.rs) for more information.\n- **`row_type`** - Specifies the type of the rows in the table. Defaults to the struct that this is applied to. See the [custom_type example](https://github.com/synphonyte/leptos-struct-table/blob/master/examples/custom_type/src/main.rs) for more information.\n- **`i18n`** - Allows to specify the i18n scope for all fields of the struct as well as the `i18n` module path which defaults to `crate::i18n`. See [I18n](#i18n) for more information.\n\n### Field attributes\n\nThese attributes can be applied to any field in the struct.\n\n- **`class`** - Specifies the classes that are applied to each cell (head and body) in the field's column. Can be used in conjunction with `classes_provider` to customize the classes.\n- **`head_class`** - Specifies the classes that are applied to the header cell in the field's column. Can be used in conjunction with `classes_provider` to customize the classes.\n- **`cell_class`** - Specifies the classes that are applied to the body cells in the field's column. Can be used in conjunction with `classes_provider` to customize the classes.\n- **`skip`** - Specifies that the field should be skipped. This is useful for fields that are not displayed in the table.\n- **`skip_sort`** - Only applies if `sortable` is set on the struct. Specifies that the field should not be used for sorting. Clicking it's header will not do anything.\n- **`skip_header`** - Makes the title of the field not be displayed in the head row.\n- **`title`** - Specifies the title that is displayed in the header cell. Defaults to the field name converted to title case (`this_field` becomes `\"This Field\"`).\n- **`renderer`** - Specifies the name of the cell renderer component. Used to customize the rendering of cells.\n  Defaults to [`DefaultTableCellRenderer`].\n - **`format`** - Quick way to customize the formatting of cells without having to create a custom renderer. See [Formatting](#formatting) below for more information.\n- **`getter`** - Specifies a method that returns the value of the field instead of accessing the field directly when rendering.\n- **`none_value`** - Specifies a display value for `Option` types when they are `None`. Defaults to empty string\n- **`i18n`** - Overrides the i18n key for the field. See [I18n](#i18n) for more information.\n\n#### Formatting\n\nThe `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.\nIt is type safe and tied to the type the formatting is applied on. see [`CellValue`] and the associated type for the type you are rendering to see a list of options\n\nSee:\n- [`cell_value::NumberRenderOptions`]\n\n\n## Features\n\n- **`chrono`** - Adds support for types from the crate `chrono`.\n- **`rust_decimal`** - Adds support for types from the crate `rust_decimal`.\n- **`time`** - Adds support for types from the crate `time`.\n- **`uuid`** - Adds support for types from the crate `uuid`.\n\n## Classes Customization\n\nClasses can be easily customized by using the `classes_provider` attribute on the struct.\nYou can specify any type that implements the trait [`TableClassesProvider`]. Please see the documentation for that trait for more information.\nYou can also look at [`TailwindClassesPreset`] for an example how this can be implemented.\n\nExample:\n\n```rust\n#[derive(TableRow, Clone)]\n#[table(classes_provider = \"TailwindClassesPreset\")]\npub struct Book {\n    id: u32,\n    title: String,\n}\n```\n\n## Field Getters\n\nSometimes you want to display a field that is not part of the struct but a derived value either\nfrom other fields or sth entirely different. For this you can use either the [`FieldGetter`] type\nor the `getter` attribute.\n\nLet's start with [`FieldGetter`] and see an example:\n\n```rust\n#[derive(TableRow, Clone)]\n#[table(classes_provider = \"TailwindClassesPreset\")]\npub struct Book {\n    id: u32,\n    title: String,\n    author: String,\n\n    // this tells the macro that you're going to provide a method called `title_and_author` that returns a `String`\n    title_and_author: FieldGetter\u003cString\u003e\n}\n\nimpl Book {\n    // Returns the value that is displayed in the column\n    pub fn title_and_author(\u0026self) -\u003e String {\n        format!(\"{} by {}\", self.title, self.author)\n    }\n}\n```\n\nTo provide maximum flexibility you can use the `getter` attribute.\n\n```rust\n#[derive(TableRow, Clone)]\n#[table(classes_provider = \"TailwindClassesPreset\")]\npub struct Book {\n    // this tells the macro that you're going to provide a method called `get_title` that returns a `String`\n    #[table(getter = \"get_title\")]\n    title: String,\n}\n\nimpl Book {\n    pub fn get_title(\u0026self) -\u003e String {\n        format!(\"Title: {}\", self.title)\n    }\n}\n```\n\n### When to use `FieldGetter` vs `getter` attribute\n\nA field of type `FieldGetter\u003cT\u003e` is a virtual field that doesn't really exist on the struct.\nInternally `FieldGetter` is just a new-typed `PhantomData` and thus is removed during compilation.\nHence it doesn't increase memory usage. That means you should use it for purely derived data.\n\nThe `getter` attribute should be used on a field that actually exists on the struct but whose\nvalue you want to modify before it's rendered.\n\n## Custom Renderers\n\nCustom renderers can be used to customize almost every aspect of the table.\nThey are specified by using the various `...renderer` attributes on the struct or fields or props of the [`TableContent`] component.\nTo implement a custom renderer please have a look at the default renderers listed below.\n\nOn the struct level you can use this attribute:\n- **`thead_cell_renderer`** - Defaults to [`DefaultTableHeaderCellRenderer`] which renders `\u003cth\u003e\u003cspan\u003eTitle\u003c/span\u003e\u003c/th\u003e`\n  together with sorting functionality (if enabled).\n\nAs props of the [`TableContent`] component you can use the following:\n- **`thead_renderer`** - Defaults to [`DefaultTableHeadRenderer`] which just renders the tag `thead`.\n- **`thead_row_renderer`** - Defaults to [`DefaultTableHeadRowRenderer`] which just renders the tag `tr`.\n- **`tbody_renderer`** - Defaults to the tag `tbody`. Takes no attributes.\n- **`row_renderer`** - Defaults to [`DefaultTableRowRenderer`].\n- **`loading_row_renderer`** - Defaults to [`DefaultLoadingRowRenderer`].\n- **`error_row_renderer`** - Defaults to [`DefaultErrorRowRenderer`].\n- **`row_placeholder_renderer`** - Defaults to [`DefaultRowPlaceholderRenderer`].\n\nOn the field level you can use the **`renderer`** attribute.\n\nIt defaults to [`DefaultTableCellRenderer`]\nWorks for any type that implements the [`CellValue`] trait that is implemented for types in the standard library, popular crates with feature flags and for your own type if you implement this trait for them.\n\nExample:\n\n```rust\n#[derive(TableRow)]\npub struct Book {\n    title: String,\n    #[table(renderer = \"ImageTableCellRenderer\")]\n    img: String,\n}\n\n// Easy cell renderer that just displays an image from an URL.\n#[component]\nfn ImageTableCellRenderer(\n    class: String,\n    value: Signal\u003cString\u003e,\n    row: RwSignal\u003cBook\u003e,\n    index: usize,\n) -\u003e impl IntoView\n{\n    view! {\n        \u003ctd class=class\u003e\n            \u003cimg src=value alt=\"Book image\" height=\"64\"/\u003e\n        \u003c/td\u003e\n    }\n}\n```\n\nFor more detailed information please have a look at the [custom_renderers_svg example](https://github.com/synphonyte/leptos-struct-table/blob/master/examples/custom_renderers_svg/src/main.rs) for a complete customization.\n\n\n### Editable Cells\n\nYou might have noticed the prop `row` in the custom cell renderer above. This can be used\nto edit the data. Simply use the `RwSignal` to access the row and change the fields.\n\n```rust\n#[derive(TableRow, Clone, Default, Debug)]\n#[table(impl_vec_data_provider)]\npub struct Book {\n    id: u32,\n    #[table(renderer = \"InputCellRenderer\")]\n    title: String,\n}\n\n#[component]\nfn InputCellRenderer(\n    class: String,\n    value: Signal\u003cString\u003e,\n    row: RwSignal\u003cBook\u003e,\n    index: usize,\n) -\u003e impl IntoView {\n    let on_change = move |evt| {\n        row.write().title = event_target_value(\u0026evt);\n    };\n\n    view! {\n        \u003ctd class=class\u003e\n            \u003cinput type=\"text\" value=value on:change=on_change /\u003e\n        \u003c/td\u003e\n    }\n}\n\n// Then in the table component you can listen to the `on_change` event:\n\n#[component]\npub fn App() -\u003e impl IntoView {\n    let rows = vec![Book::default(), Book::default()];\n\n    let on_change = move |evt: ChangeEvent\u003cBook\u003e| {\n        logging::log!(\"Changed row at index {}:\\n{:#?}\", evt.row_index, evt.changed_row.get_untracked());\n    };\n\n    view! {\n        \u003ctable\u003e\n            \u003cTableContent rows on_change scroll_container=\"html\" /\u003e\n        \u003c/table\u003e\n    }\n}\n```\n\nPlease have a look at the [editable example](https://github.com/Synphonyte/leptos-struct-table/tree/master/examples/editable/src/main.rs) for a fully working example.\n\n## Pagination / Virtualization / InfiniteScroll\n\nThis table component supports different display acceleration strategies. You can set them through the `display_strategy` prop of\nthe [`TableContent`] component.\n\nThe following options are available. Check their docs for more details.\n- [`DisplayStrategy::Virtualization`] (default)\n- [`DisplayStrategy::InfiniteScroll`]\n- [`DisplayStrategy::Pagination`]\n\nPlease have a look at the [pagination example](https://github.com/Synphonyte/leptos-struct-table/tree/master/examples/pagination/src/main.rs) for more information on how to use pagination.\n\n## I18n\n\nTo translate the column titles of the table using `leptos-i18n` you can enable the `\"i18n\"`\nfeature. The field names of the struct are used as keys by default and can be customized using the `i18n` attribute.\n\nPlease have a look at the\n[i18n example](https://github.com/Synphonyte/leptos-struct-table/tree/master/examples/i18n)\nand at the sections [Struct attributes](#struct-attributes) and\n[Field attributes](#field-attributes) for more information.\n\n## Contribution\n\nAll contributions are welcome. Please open an issue or a pull request if you have any ideas or problems.\n\n\u003c!-- cargo-rdme end --\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSynphonyte%2Fleptos-struct-table","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FSynphonyte%2Fleptos-struct-table","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSynphonyte%2Fleptos-struct-table/lists"}