Skip to content

Commit 59b726f

Browse files
committed
chore: fixed readme
1 parent 788eda4 commit 59b726f

File tree

1 file changed

+42
-90
lines changed

1 file changed

+42
-90
lines changed

README.md

Lines changed: 42 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -15,20 +15,15 @@ Easily create Leptos table components from structs.
1515
## Features
1616

1717
- **Easy to use** - yet powerful.
18-
- **Async data loading** - The data is loaded asynchronously. This allows to load data from a REST API or a database
19-
etc.
18+
- **Async data loading** - The data is loaded asynchronously. This allows to load data from a REST API or a database etc.
2019
- **Selection** - Can be turned off or single/multi select
21-
- **Customization** - You can customize every aspect of the table by plugging in your own components for rendering rows,
22-
cells, headers. See [Custom Renderers](#custom-renderers) for more information.
23-
- **Headless** - No default styling is applied to the table. You can fully customize the classes that are applied to the
24-
table. See [Classes customization](#classes-customization) for more information.
25-
- **Sorting** - Optional. If turned on: Click on a column header to sort the table by that column. You can even sort by
26-
multiple columns.
20+
- **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.
21+
- **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.
22+
- **Sorting** - Optional. If turned on: Click on a column header to sort the table by that column. You can even sort by multiple columns.
2723
- **Virtualization** - Only the visible rows are rendered. This allows for very large tables.
2824
- **Pagination** - Instead of virtualization you can paginate the table.
2925
- **Caching** - Only visible rows are loaded and cached.
30-
- **Editing** - Optional. You can provide custom renderers for editable cells. See [Editable Cells](#editable-cells) for
31-
more information.
26+
- **Editing** - Optional. You can provide custom renderers for editable cells. See [Editable Cells](#editable-cells) for more information.
3227

3328
## Usage
3429

@@ -63,8 +58,7 @@ fn main() {
6358

6459
## Server-Side Rendering
6560

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

7064
```toml
@@ -84,8 +78,7 @@ ssr = [
8478
]
8579
```
8680

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

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

103-
See
104-
the [paginated_rest_datasource example](https://github.com/Synphonyte/leptos-struct-table/blob/master/examples/paginated_rest_datasource/src/data_provider.rs)
105-
and
106-
the [serverfn_sqlx example](https://github.com/Synphonyte/leptos-struct-table/blob/master/examples/serverfn_sqlx/src/data_provider.rs)
96+
See the [paginated_rest_datasource example](https://github.com/Synphonyte/leptos-struct-table/blob/master/examples/paginated_rest_datasource/src/data_provider.rs)
97+
and the [serverfn_sqlx example](https://github.com/Synphonyte/leptos-struct-table/blob/master/examples/serverfn_sqlx/src/data_provider.rs)
10798
for working demo projects that implement these traits.
10899

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

115106
These attributes can be applied to the struct itself.
116107

117-
- **`sortable`** - Specifies that the table should be sortable. This makes the header titles clickable to control
118-
sorting.
119-
You can specify two sorting modes with the prop `sorting_mode` on the `TableContent` component:
120-
- `sorting_mode=SortingMode::MultiColumn` (the default) allows the table to be sorted by multiple columns ordered by
121-
priority.
122-
- `sorting_mode=SortingMode::SingleColumn"` allows the table to be sorted by a single column. Clicking on another
123-
column will simply replace the sorting column.
124-
See
125-
the [simple example](https://github.com/synphonyte/leptos-struct-table/blob/master/examples/simple/src/main.rs)
126-
and the
127-
[selectable example](https://github.com/synphonyte/leptos-struct-table/blob/master/examples/selectable/src/main.rs)
128-
for more information.
129-
- **`classes_provider`** - Specifies the name of the class provider. Used to quickly customize all of the classes that
130-
are applied to the table.
131-
For convenience sensible presets for major CSS frameworks are provided. See [`TableClassesProvider`]
132-
and [tailwind example](https://github.com/synphonyte/leptos-struct-table/blob/master/examples/tailwind/src/main.rs)
133-
for more information.
134-
- **`head_cell_renderer`** - Specifies the name of the header cell renderer component. Used to customize the rendering
135-
of header cells. Defaults to [`DefaultTableHeaderRenderer`]. See
136-
the [custom_renderers_svg example](https://github.com/Synphonyte/leptos-struct-table/blob/master/examples/custom_renderers_svg/src/main.rs)
137-
for more information.
138-
- **`impl_vec_data_provider`** - If given, then [`TableDataProvider`] is automatically implemented for `Vec<ThisStruct>`
139-
to allow
140-
for easy local data use. See
141-
the [simple example](https://github.com/synphonyte/leptos-struct-table/blob/master/examples/simple/src/main.rs) for
142-
more information.
143-
- **`row_type`** - Specifies the type of the rows in the table. Defaults to the struct that this is applied to. See
144-
the [custom_type example](https://github.com/synphonyte/leptos-struct-table/blob/master/examples/custom_type/src/main.rs)
145-
for more information.
108+
- **`sortable`** - Specifies that the table should be sortable. This makes the header titles clickable to control sorting.
109+
You can specify two sorting modes with the prop `sorting_mode` on the `TableContent` component:
110+
- `sorting_mode=SortingMode::MultiColumn` (the default) allows the table to be sorted by multiple columns ordered by priority.
111+
- `sorting_mode=SortingMode::SingleColumn"` allows the table to be sorted by a single column. Clicking on another column will simply replace the sorting column.
112+
See the [simple example](https://github.com/synphonyte/leptos-struct-table/blob/master/examples/simple/src/main.rs) and the
113+
[selectable example](https://github.com/synphonyte/leptos-struct-table/blob/master/examples/selectable/src/main.rs) for more information.
114+
- **`classes_provider`** - Specifies the name of the class provider. Used to quickly customize all of the classes that are applied to the table.
115+
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.
116+
- **`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.
117+
- **`impl_vec_data_provider`** - If given, then [`TableDataProvider`] is automatically implemented for `Vec<ThisStruct>` to allow
118+
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.
119+
- **`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.
146120

147121
### Field attributes
148122

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

151-
- **`class`** - Specifies the classes that are applied to each cell (head and body) in the field's column. Can be used
152-
in conjuction with `classes_provider` to customize the classes.
153-
- **`head_class`** - Specifies the classes that are applied to the header cell in the field's column. Can be used in
154-
conjuction with `classes_provider` to customize the classes.
155-
- **`cell_class`** - Specifies the classes that are applied to the body cells in the field's column. Can be used in
156-
conjuction with `classes_provider` to customize the classes.
157-
- **`skip`** - Specifies that the field should be skipped. This is useful for fields that are not displayed in the
158-
table.
159-
- **`skip_sort`** - Only applies if `sortable` is set on the struct. Specifies that the field should not be used for
160-
sorting. Clicking it's header will not do anything.
125+
- **`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.
126+
- **`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.
127+
- **`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.
128+
- **`skip`** - Specifies that the field should be skipped. This is useful for fields that are not displayed in the table.
129+
- **`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.
161130
- **`skip_header`** - Makes the title of the field not be displayed in the head row.
162-
- **`title`** - Specifies the title that is displayed in the header cell. Defaults to the field name converted to title
163-
case (`this_field` becomes `"This Field"`).
131+
- **`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"`).
164132
- **`renderer`** - Specifies the name of the cell renderer component. Used to customize the rendering of cells.
165-
Defaults to [`DefaultTableCellRenderer`].
166-
- **`format`** - Quick way to customize the formatting of cells without having to create a custom renderer.
167-
See [Formatting](#formatting) below for more information.
168-
- **`getter`** - Specifies a method that returns the value of the field instead of accessing the field directly when
169-
rendering.
133+
Defaults to [`DefaultTableCellRenderer`].
134+
- **`format`** - Quick way to customize the formatting of cells without having to create a custom renderer. See [Formatting](#formatting) below for more information.
135+
- **`getter`** - Specifies a method that returns the value of the field instead of accessing the field directly when rendering.
170136
- **`none_value`** - Specifies a display value for `Option` types when they are `None`. Defaults to empty string
171137

172138
#### Formatting
173139

174-
The `format` attribute can be used to customize the formatting of cells. It is an easier alternative to creating a
175-
custom renderer when you just want to customize some basic formatting.
176-
It is type safe and tied to the type the formatting is applied on. see [`CellValue`] and the associated type for the
177-
type you are rendering to see a list of options
140+
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.
141+
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
178142

179143
See:
180-
181144
- [`cell_value::NumberRenderOptions`]
182145

146+
183147
## Features
184148

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

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

197160
Example:
@@ -263,17 +226,14 @@ value you want to modify before it's rendered.
263226
## Custom Renderers
264227

265228
Custom renderers can be used to customize almost every aspect of the table.
266-
They are specified by using the various `...renderer` attributes on the struct or fields or props of the [
267-
`TableContent`] component.
229+
They are specified by using the various `...renderer` attributes on the struct or fields or props of the [`TableContent`] component.
268230
To implement a custom renderer please have a look at the default renderers listed below.
269231

270232
On the struct level you can use this attribute:
271-
272233
- **`thead_cell_renderer`** - Defaults to [`DefaultTableHeaderCellRenderer`] which renders `<th><span>Title</span></th>`
273-
together with sorting functionality (if enabled).
234+
together with sorting functionality (if enabled).
274235

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

287247
It defaults to [`DefaultTableCellRenderer`]
288-
Works for any type that implements the [`CellValue`] trait that is implemented for types in the standard library,
289-
popular crates with feature flags and for your own type if you implement this trait for them.
248+
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.
290249

291250
Example:
292251

@@ -317,9 +276,8 @@ where
317276
}
318277
```
319278

320-
For more detailed information please have a look at
321-
the [custom_renderers_svg example](https://github.com/synphonyte/leptos-struct-table/blob/master/examples/custom_renderers_svg/src/main.rs)
322-
for a complete customization.
279+
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.
280+
323281

324282
### Editable Cells
325283

@@ -372,25 +330,19 @@ pub fn App() -> impl IntoView {
372330
}
373331
```
374332

375-
Please have a look at
376-
the [editable example](https://github.com/Synphonyte/leptos-struct-table/tree/master/examples/editable/src/main.rs) for
377-
fully working example.
333+
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.
378334

379335
## Pagination / Virtualization / InfiniteScroll
380336

381-
This table component supports different display acceleration strategies. You can set them through the `display_strategy`
382-
prop of
337+
This table component supports different display acceleration strategies. You can set them through the `display_strategy` prop of
383338
the [`TableContent`] component.
384339

385340
The following options are available. Check their docs for more details.
386-
387341
- [`DisplayStrategy::Virtualization`] (default)
388342
- [`DisplayStrategy::InfiniteScroll`]
389343
- [`DisplayStrategy::Pagination`]
390344

391-
Please have a look at
392-
the [pagination example](https://github.com/Synphonyte/leptos-struct-table/tree/master/examples/pagination/src/main.rs)
393-
for more information on how to use pagination.
345+
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.
394346

395347
## I18n
396348

0 commit comments

Comments
 (0)