Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Dataviews docs: Layout properties checks and link #64918

Merged
merged 3 commits into from
Aug 30, 2024
Merged

Dataviews docs: Layout properties checks and link #64918

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f09bc16
fix check icons
juanmaguitar Aug 30, 2024
187b672
Merge branch 'trunk' into layout-properties-link
juanmaguitar Aug 30, 2024
1a7e139
defaultLayouts clarification and link to properties of layout
juanmaguitar Aug 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 16 additions & 11 deletions packages/dataviews/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,7 @@ Each field is an object with the following properties:

- `value`: The id of the value to filter to (for internal use)
- `label`: The text that will be displayed in the UI for the item.
- `description`: A longer description that describes the element, to also be displayed. Optional.
- `description`: A longer description that describes the element, to also be displayed. Optional.

To enable the filter by a field we just need to set a proper value to the `elements` property of the field we'd like to filter by.

Expand Down Expand Up @@ -172,20 +172,23 @@ Properties:
- `perPage`: number of records to show per page.
- `page`: the page that is visible.
- `sort`:

- `field`: the field used for sorting the dataset.
- `direction`: the direction to use for sorting, one of `asc` or `desc`.

- `fields`: the `id` of the fields that are visible in the UI and the specific order in which they are displayed.
- `layout`: config that is specific to a particular layout type.

| Properties of `layout` | Table | Grid | List |
| --- | --- | --- | --- |
| `primaryField`: the field's `id` to be highlighted in each layout. It's not hidable. | ✓ | ✓ | ✓ |
| `mediaField`: the field's `id` to be used for rendering each card's media. It's not hiddable. | | ✓ | ✓ |
| `columnFields`: a list of field's `id` to render vertically stacked instead of horizontally (the default). | | ✓ | |
| `badgeFields`: a list of field's `id` to render without label and styled as badges. | | ✓ | |
| `combinedFields`: a list of "virtual" fields that are made by combining others. See "Combining fields" section. | ✓ | | |
| `styles`: additional `width`, `maxWidth`, `minWidth` styles for each field column. | ✓ | | |
#### Properties of `layout`

| Properties of `layout` | Table | Grid | List |
| --------------------------------------------------------------------------------------------------------------- | ----- | ---- | ---- |
| `primaryField`: the field's `id` to be highlighted in each layout. It's not hidable. | ✓ | ✓ | ✓ |
| `mediaField`: the field's `id` to be used for rendering each card's media. It's not hiddable. | | ✓ | ✓ |
| `columnFields`: a list of field's `id` to render vertically stacked instead of horizontally (the default). | | ✓ | |
| `badgeFields`: a list of field's `id` to render without label and styled as badges. | | ✓ | |
| `combinedFields`: a list of "virtual" fields that are made by combining others. See "Combining fields" section. | ✓ | | |
| `styles`: additional `width`, `maxWidth`, `minWidth` styles for each field column. | ✓ | | |

### `onChangeView`: `function`

Expand Down Expand Up @@ -307,6 +310,8 @@ const defaultLayouts = {
};
```

The `defaultLayouts` property should be an object that includes properties named `table`, `grid`, or `list`. Each of these properties should contain a `layout` property, which holds the configuration for each specific layout type. Check [here](#properties-of-layout) the full list of properties available for each layout's configuration

### `onChangeSelection`: `function`

Callback that signals the user selected one of more items, and takes them as parameter. So far, only the `list` view implements it.
Expand All @@ -331,8 +336,8 @@ Each "virtual field", has to provide an `id` and `label` (optionally a `header`

Additionally, they need to provide:

- `children`: a list of field's `id` to combine
- `direction`: how should they be stacked, `vertically` or `horizontally`
- `children`: a list of field's `id` to combine
- `direction`: how should they be stacked, `vertically` or `horizontally`
Copy link
Member

@oandregal oandregal Aug 30, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I mistyped this in the original docs PR, it should be:

Suggested change
- `direction`: how should they be stacked, `vertically` or `horizontally`
- `direction`: how should they be stacked, `vertical` or `horizontal`

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Prepared a follow-up PR to fix this typo: #64973


For example, this is how you'd define a `site` field which is a combination of a `title` and `description` fields, which are not displayed:

Expand Down
Loading