You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
@@ -19,53 +20,45 @@ import { DataViewFilters } from '@patternfly/react-data-view/dist/dynamic/DataVi
19
20
import { DataViewTextFilter } from '@patternfly/react-data-view/dist/dynamic/DataViewTextFilter';
20
21
import { DataViewCheckboxFilter } from '@patternfly/react-data-view/dist/dynamic/DataViewCheckboxFilter';
21
22
22
-
## Core concepts
23
-
24
-
The **data view** extension helps you display datasets in organized layouts containing data representation and toolbars allowing interactions like selection or pagination.
25
-
26
-
Sub-components for displaying the data (card view, table) and toolbars (top and bottom) are always passed as `children` to the `DataView` component.
27
-
28
-
---
29
-
30
23
**Note:** Data view lives in its own package [`@patternfly/react-data-view`](https://www.npmjs.com/package/@patternfly/react-data-view)
31
24
32
-
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 repository](https://github.com/patternfly/react-data-view/issues). Before doing so, please make sure there is not already a pre-existing issue.
25
+
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.
33
26
34
27
---
35
28
29
+
The **data view** extension helps you display datasets in organized layouts containing data representation and toolbars allowing interactions like selection or pagination.
30
+
36
31
### Layout
37
32
38
-
Data view is expected to consist of header, data representation part and footer stacked below each other. The layout is implemented using PatternFly [stack](/layouts/stack).
33
+
A data view should contain a header, the data representation (like a card view or table), and a footer. These parts are organized in a [stack layout](/layouts/stack).
34
+
35
+
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.
39
36
40
37
```js file="./AbstractLayoutExample.tsx"
41
38
42
39
```
43
40
44
41
### Modularity
45
42
46
-
The extension's modular architecture lets you efficiently create consistent data views by using predefined sub-components and hooks or defining your own. You can choose the tools that suit your needs and easily replace any part with a custom implementation.
43
+
The extension's modular architecture lets you efficiently create consistent data views, by either using predefined sub-components and hooks, or by defining your own. You can choose the tools that suit your needs and easily replace any part with a custom implementation.
47
44
48
-
For the toolbar, you can make use of the predefined `DataViewToolbar` component, which extends the PatternFly [toolbar](/components/toolbar)with the most common use cases. For more details, please refer to the [Toolbar](/extensions/data-view/toolbar)section. In case it does not fit your needs, you can also use your custom toolbar component.
45
+
The `<DataViewToolbar>` componentextends the [PatternFly toolbar](/components/toolbar)to support the most common needs. For more details, refer to the [data view toolbar](/extensions/data-view/toolbar)examples. You can also use a custom toolbar component if needed for your use case.
49
46
50
-
Data can be presented using the predefined `DataViewTable` component, which is an abstraction above the PatternFly [table](/components/table). For more details, please refer to the [Table](/extensions/data-view/table)docs section. In the near future, we are also planning to introduce a predefined Card view component. If you have more specific needs to display data, you can pass your custom implementation as a `DataView` child.
47
+
Data can be presented using the predefined `<DataViewTable>` component, which is an abstraction above the [PatternFly table](/components/table). For more details, refer to the [data view table](/extensions/data-view/table)examples. If you have more specific data display needs, you can pass a custom implementation as a `<DataView>` child. In the near future, we are also planning to introduce a predefined card view component.
51
48
52
49
```js file="./PredefinedLayoutFullExample.tsx"
53
50
54
51
```
55
52
56
53
## Advanced concepts
57
54
58
-
This section contains advanced features related to the `DataView` wrapping component and information to better understand how the data view works under the hood.
59
-
60
-
### Data view context
61
-
62
-
The **data view internal context** provides shared state to all sub-components. It lives inside the `DataView` component to store callbacks for the data selection (`onSelect`, `isSelected`, `isSelectDisabled`), internally computed `isSelectable` flag based on selection callbacks passed, and `activeState` of the data view (loading, error, etc.). Its values are set up through props of the `DataView` component.
55
+
This section contains advanced features related to the `<DataView>` wrapping component and information to better understand how the data view works under the hood.
63
56
64
57
### Events context
65
58
66
-
The **data view events context**provides a way of listening to the data view events from the outside of the component through the `DataViewEventsContext`.
59
+
The `<DataViewEventsContext>`provides a method of listening to the data view events from the outside of the component.
67
60
68
-
In order to give your components an access to the shared context, wrap them and your data view with the `DataViewEventsProvider`.
61
+
In order to give your other UI components access to the shared context, wrap them and your data view with the `<DataViewEventsProvider>`.
69
62
70
63
### Row click subscription example
71
64
This example illustrates how to set up a layout that listens for row click events and displays detailed information about the selected row in a [drawer component](/components/drawer).
# If you use typescript, the name of the interface to display props for
@@ -24,8 +25,6 @@ import { DataViewTable } from '@patternfly/react-data-view/dist/dynamic/DataView
24
25
import { useDataViewSelection, useDataViewSort } from '@patternfly/react-data-view/dist/dynamic/Hooks';
25
26
import { DataView, DataViewState } from '@patternfly/react-data-view/dist/dynamic/DataView';
26
27
27
-
## Data view table
28
-
29
28
The **data view table** component is an abstraction that renders your columns and rows in the PatternFly [table](/components/table) component.
30
29
31
30
Below, you can see an example of displaying `rows` and `columns` in the `DataViewTable`, which simplifies the table declaration, but at the same time keeps the customization possibilities of the core component.
# If you use typescript, the name of the interface to display props for
@@ -25,8 +26,6 @@ import { DataViewFilters } from '@patternfly/react-data-view/dist/dynamic/DataVi
25
26
import { DataViewTextFilter } from '@patternfly/react-data-view/dist/dynamic/DataViewTextFilter';
26
27
import { DataViewCheckboxFilter } from '@patternfly/react-data-view/dist/dynamic/DataViewCheckboxFilter';
27
28
28
-
## Data view toolbar
29
-
30
29
The **data view toolbar** component renders a default opinionated data view toolbar above or below the data section.
31
30
32
31
Data view toolbar can contain pagination, bulk select, filters, actions or other child content passed. The preffered way of passing child toolbar items is using the [toolbar item](/components/toolbar#toolbar-items) component or predefined `DataViewToolbar` props for specific use cases.
0 commit comments