Skip to content

Commit

Permalink
chore: fixed readme
Browse files Browse the repository at this point in the history
  • Loading branch information
@maccesch
maccesch committed Aug 14, 2024
1 parent 788eda4 commit 59b726f
Showing 1 changed file with 42 additions and 90 deletions.
132 changes: 42 additions & 90 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,20 +15,15 @@ Easily create Leptos table components from structs.
## Features

- **Easy to use** - yet powerful.
- **Async data loading** - The data is loaded asynchronously. This allows to load data from a REST API or a database
etc.
- **Async data loading** - The data is loaded asynchronously. This allows to load data from a REST API or a database etc.
- **Selection** - Can be turned off or single/multi select
- **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.
- **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.
- **Sorting** - Optional. If turned on: Click on a column header to sort the table by that column. You can even sort by
multiple columns.
- **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.
- **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.
- **Sorting** - Optional. If turned on: Click on a column header to sort the table by that column. You can even sort by multiple columns.
- **Virtualization** - Only the visible rows are rendered. This allows for very large tables.
- **Pagination** - Instead of virtualization you can paginate the table.
- **Caching** - Only visible rows are loaded and cached.
- **Editing** - Optional. You can provide custom renderers for editable cells. See [Editable Cells](#editable-cells) for
more information.
- **Editing** - Optional. You can provide custom renderers for editable cells. See [Editable Cells](#editable-cells) for more information.

## Usage

Expand Down Expand Up @@ -63,8 +58,7 @@ fn main() {

## Server-Side Rendering

To use this with Leptos' server-side rendering, you can have to add `leptos-use` as a dependency to your `Cargo.toml`
and
To use this with Leptos' server-side rendering, you can have to add `leptos-use` as a dependency to your `Cargo.toml` and
then configure it for SSR like the following.

```toml
Expand All @@ -84,8 +78,7 @@ ssr = [
]
```

Please see
the [serverfn_sqlx example](https://github.com/Synphonyte/leptos-struct-table/blob/master/examples/serverfn_sqlx/Cargo.toml)
Please see the [serverfn_sqlx example](https://github.com/Synphonyte/leptos-struct-table/blob/master/examples/serverfn_sqlx/Cargo.toml)
for a working project with SSR.

## Data Providers
Expand All @@ -100,10 +93,8 @@ Which of the two traits you choose depends on your data source. If your data sou
paginated data, as is the case for many REST APIs, you should implement [`PaginatedTableDataProvider`].
Otherwise you should probably implement [`TableDataProvider`].

See
the [paginated_rest_datasource example](https://github.com/Synphonyte/leptos-struct-table/blob/master/examples/paginated_rest_datasource/src/data_provider.rs)
and
the [serverfn_sqlx example](https://github.com/Synphonyte/leptos-struct-table/blob/master/examples/serverfn_sqlx/src/data_provider.rs)
See the [paginated_rest_datasource example](https://github.com/Synphonyte/leptos-struct-table/blob/master/examples/paginated_rest_datasource/src/data_provider.rs)
and the [serverfn_sqlx example](https://github.com/Synphonyte/leptos-struct-table/blob/master/examples/serverfn_sqlx/src/data_provider.rs)
for working demo projects that implement these traits.

## Macro options
Expand All @@ -114,72 +105,45 @@ The `#[table(...)]` attribute can be used to customize the generated component.

These attributes can be applied to the struct itself.

- **`sortable`** - Specifies that the table should be sortable. This makes the header titles clickable to control
sorting.
You can specify two sorting modes with the prop `sorting_mode` on the `TableContent` component:
- `sorting_mode=SortingMode::MultiColumn` (the default) allows the table to be sorted by multiple columns ordered by
priority.
- `sorting_mode=SortingMode::SingleColumn"` allows the table to be sorted by a single column. Clicking on another
column will simply replace the sorting column.
See
the [simple example](https://github.com/synphonyte/leptos-struct-table/blob/master/examples/simple/src/main.rs)
and the
[selectable example](https://github.com/synphonyte/leptos-struct-table/blob/master/examples/selectable/src/main.rs)
for more information.
- **`classes_provider`** - Specifies the name of the class provider. Used to quickly customize all of the classes that
are applied to the table.
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.
- **`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.
- **`impl_vec_data_provider`** - If given, then [`TableDataProvider`] is automatically implemented for `Vec<ThisStruct>`
to allow
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.
- **`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.
- **`sortable`** - Specifies that the table should be sortable. This makes the header titles clickable to control sorting.
You can specify two sorting modes with the prop `sorting_mode` on the `TableContent` component:
- `sorting_mode=SortingMode::MultiColumn` (the default) allows the table to be sorted by multiple columns ordered by priority.
- `sorting_mode=SortingMode::SingleColumn"` allows the table to be sorted by a single column. Clicking on another column will simply replace the sorting column.
See the [simple example](https://github.com/synphonyte/leptos-struct-table/blob/master/examples/simple/src/main.rs) and the
[selectable example](https://github.com/synphonyte/leptos-struct-table/blob/master/examples/selectable/src/main.rs) for more information.
- **`classes_provider`** - Specifies the name of the class provider. Used to quickly customize all of the classes that are applied to the table.
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.
- **`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.
- **`impl_vec_data_provider`** - If given, then [`TableDataProvider`] is automatically implemented for `Vec<ThisStruct>` to allow
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.
- **`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.

### Field attributes

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

- **`class`** - Specifies the classes that are applied to each cell (head and body) in the field's column. Can be used
in conjuction with `classes_provider` to customize the classes.
- **`head_class`** - Specifies the classes that are applied to the header cell in the field's column. Can be used in
conjuction with `classes_provider` to customize the classes.
- **`cell_class`** - Specifies the classes that are applied to the body cells in the field's column. Can be used in
conjuction with `classes_provider` to customize the classes.
- **`skip`** - Specifies that the field should be skipped. This is useful for fields that are not displayed in the
table.
- **`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.
- **`class`** - Specifies the classes that are applied to each cell (head and body) in the field's column. Can be used in conjuction with `classes_provider` to customize the classes.
- **`head_class`** - Specifies the classes that are applied to the header cell in the field's column. Can be used in conjuction with `classes_provider` to customize the classes.
- **`cell_class`** - Specifies the classes that are applied to the body cells in the field's column. Can be used in conjuction with `classes_provider` to customize the classes.
- **`skip`** - Specifies that the field should be skipped. This is useful for fields that are not displayed in the table.
- **`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.
- **`skip_header`** - Makes the title of the field not be displayed in the head row.
- **`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"`).
- **`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"`).
- **`renderer`** - Specifies the name of the cell renderer component. Used to customize the rendering of cells.
Defaults to [`DefaultTableCellRenderer`].
- **`format`** - Quick way to customize the formatting of cells without having to create a custom renderer.
See [Formatting](#formatting) below for more information.
- **`getter`** - Specifies a method that returns the value of the field instead of accessing the field directly when
rendering.
Defaults to [`DefaultTableCellRenderer`].
- **`format`** - Quick way to customize the formatting of cells without having to create a custom renderer. See [Formatting](#formatting) below for more information.
- **`getter`** - Specifies a method that returns the value of the field instead of accessing the field directly when rendering.
- **`none_value`** - Specifies a display value for `Option` types when they are `None`. Defaults to empty string

#### 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.
It 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
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.
It 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

See:

- [`cell_value::NumberRenderOptions`]


## Features

- **`chrono`** - Adds support for types from the crate `chrono`.
Expand All @@ -190,8 +154,7 @@ See:
## Classes Customization

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 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:
Expand Down Expand Up @@ -263,17 +226,14 @@ 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 or props of the [
`TableContent`] component.
They are specified by using the various `...renderer` attributes on the struct or fields or props of the [`TableContent`] component.
To implement a custom renderer please have a look at the default renderers listed below.

On the struct level you can use this attribute:

- **`thead_cell_renderer`** - Defaults to [`DefaultTableHeaderCellRenderer`] which renders `<th><span>Title</span></th>`
together with sorting functionality (if enabled).
together with sorting functionality (if enabled).

As props of the [`TableContent`] component you can use the following:

- **`thead_renderer`** - Defaults to [`DefaultTableHeadRenderer`] which just renders the tag `thead`.
- **`thead_row_renderer`** - Defaults to [`DefaultTableHeadRowRenderer`] which just renders the tag `tr`.
- **`tbody_renderer`** - Defaults to the tag `tbody`. Takes no attributes.
Expand All @@ -285,8 +245,7 @@ As props of the [`TableContent`] component you can use the following:
On the field level you can use the **`renderer`** attribute.

It defaults to [`DefaultTableCellRenderer`]
Works 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.
Works 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.

Example:

Expand Down Expand Up @@ -317,9 +276,8 @@ where
}
```

For 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.
For 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.


### Editable Cells

Expand Down Expand Up @@ -372,25 +330,19 @@ pub fn App() -> impl IntoView {
}
```

Please have a look at
the [editable example](https://github.com/Synphonyte/leptos-struct-table/tree/master/examples/editable/src/main.rs) for
fully working example.
Please have a look at the [editable example](https://github.com/Synphonyte/leptos-struct-table/tree/master/examples/editable/src/main.rs) for fully working example.

## Pagination / Virtualization / InfiniteScroll

This table component supports different display acceleration strategies. You can set them through the `display_strategy`
prop of
This table component supports different display acceleration strategies. You can set them through the `display_strategy` prop of
the [`TableContent`] component.

The following options are available. Check their docs for more details.

- [`DisplayStrategy::Virtualization`] (default)
- [`DisplayStrategy::InfiniteScroll`]
- [`DisplayStrategy::Pagination`]

Please 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.
Please 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.

## I18n

Expand Down

0 comments on commit 59b726f

Please sign in to comment.