@patternfly/react-data-view 6.4.0-prerelease.5 → 6.4.0-prerelease.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/patternfly-docs/content/extensions/data-view/examples/DataView/DataView.md +10 -4
- package/patternfly-docs/content/extensions/data-view/examples/Table/Table.md +2 -2
- package/patternfly-docs/content/extensions/data-view/examples/Toolbar/Toolbar.md +1 -1
- package/patternfly-docs/patternfly-docs.config.js +4 -1
package/package.json
CHANGED
|
@@ -22,15 +22,17 @@ import { DataViewCheckboxFilter } from '@patternfly/react-data-view/dist/dynamic
|
|
|
22
22
|
|
|
23
23
|
**Note:** Data view lives in its own package [`@patternfly/react-data-view`](https://www.npmjs.com/package/@patternfly/react-data-view)
|
|
24
24
|
|
|
25
|
-
|
|
25
|
+
The **data view** extension enables you to display datasets in organized layouts, with data representations and interactive toolbars for actions like selection and pagination.
|
|
26
26
|
|
|
27
|
-
---
|
|
27
|
+
---
|
|
28
28
|
|
|
29
|
-
|
|
29
|
+
## How to structure and implement the data view
|
|
30
|
+
|
|
31
|
+
The **data view** extension provides a modular architecture that lets you efficiently create consistent data views, either by using predefined sub-components and hooks or by defining your own custom implementations.
|
|
30
32
|
|
|
31
33
|
### Layout
|
|
32
34
|
|
|
33
|
-
A data view should contain a header, the data representation, and a footer. These parts are organized in a [stack layout](/layouts/stack).
|
|
35
|
+
A data view should contain a header, the data representation, and a footer. These parts are organized in a [stack layout](/foundations-and-styles/layouts/stack).
|
|
34
36
|
|
|
35
37
|
The data view toolbars and sub-components that display the data (like a card view or table) are always passed as `children` to the `<DataView>` component.
|
|
36
38
|
|
|
@@ -61,3 +63,7 @@ This example uses the `<DataViewEventsProvider>` to display details about a sele
|
|
|
61
63
|
```js file="./EventsExample.tsx"
|
|
62
64
|
|
|
63
65
|
```
|
|
66
|
+
|
|
67
|
+
---
|
|
68
|
+
|
|
69
|
+
If you notice a bug, or if you have a suggestion for improving the data view extension or its documentation, please file an issue in the [react-data-view](https://github.com/patternfly/react-data-view/issues) repository. Before doing so, please make sure there is not already a pre-existing issue.
|
|
@@ -149,7 +149,7 @@ When there is a data connection or retrieval error, you can display an error sta
|
|
|
149
149
|
|
|
150
150
|
The error state will be displayed when the data view `activeState` value is `error`.
|
|
151
151
|
|
|
152
|
-
You can create your error state by passing either the [component groups extension's error state](/component-groups/error-state) or a [PatternFly empty state](/components/empty-state) to the `error` key of `headStates` or `bodyStates`.
|
|
152
|
+
You can create your error state by passing either the [component groups extension's error state](/extensions/component-groups/error-state) or a [PatternFly empty state](/components/empty-state) to the `error` key of `headStates` or `bodyStates`.
|
|
153
153
|
|
|
154
154
|
```js file="./DataViewTableErrorExample.tsx"
|
|
155
155
|
|
|
@@ -161,7 +161,7 @@ To indicate that data is loading, you can display a loading state.
|
|
|
161
161
|
|
|
162
162
|
The loading state will be displayed when the data view `activeState` value is `loading`.
|
|
163
163
|
|
|
164
|
-
You can create your loading state by passing either the [component groups extension's skeleton table](/component-groups/skeleton-table) or a customized [PatternFly empty state](/components/empty-state) to the `loading` key of `headStates` or `bodyStates`.
|
|
164
|
+
You can create your loading state by passing either the [component groups extension's skeleton table](/extensions/component-groups/skeleton-table) or a customized [PatternFly empty state](/components/empty-state) to the `loading` key of `headStates` or `bodyStates`.
|
|
165
165
|
|
|
166
166
|
```js file="./DataViewTableLoadingExample.tsx"
|
|
167
167
|
|
|
@@ -44,7 +44,7 @@ You can further customize toolbar interactions by referring to the additional do
|
|
|
44
44
|
```
|
|
45
45
|
|
|
46
46
|
## Toolbar actions
|
|
47
|
-
To support additional user needs, you can pass relevant actions to the toolbar via `actions`. Add standard PatternFly actions (like buttons) or choose predefined [responsive actions](/component-groups/responsive-actions) which ensure the responsive behavior of multiple actions in 1 toolbar.
|
|
47
|
+
To support additional user needs, you can pass relevant actions to the toolbar via `actions`. Add standard PatternFly actions (like buttons) or choose predefined [responsive actions](/extensions/component-groups/responsive-actions) which ensure the responsive behavior of multiple actions in 1 toolbar.
|
|
48
48
|
|
|
49
49
|
### Actions example
|
|
50
50
|
|