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
Copy file name to clipboardExpand all lines: packages/module/patternfly-docs/content/extensions/data-view/examples/DataView/DataView.md
+7-13Lines changed: 7 additions & 13 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -26,11 +26,11 @@ If you notice a bug, or if you have a suggestion for improving the data view ext
26
26
27
27
---
28
28
29
-
The **data view** extension helps you display datasets in organized layouts containing data representation and toolbars allowing interactions like selection or pagination.
29
+
The **data view** extension enables you to display datasets in organized layouts, with data representations and interactive toolbars for actions like selection and pagination.
30
30
31
31
### Layout
32
32
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).
33
+
A data view should contain a header, the data representation, and a footer. These parts are organized in a [stack layout](/layouts/stack).
34
34
35
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.
36
36
@@ -40,7 +40,7 @@ The data view toolbars and sub-components that display the data (like a card vie
40
40
41
41
### Modularity
42
42
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.
43
+
The extension's modular architecture lets you efficiently create consistent data views, either by 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.
44
44
45
45
The `<DataViewToolbar>` component extends 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.
46
46
@@ -50,18 +50,12 @@ Data can be presented using the predefined `<DataViewTable>` component, which is
50
50
51
51
```
52
52
53
-
## Advanced concepts
53
+
## Events context
54
54
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.
55
+
The `<DataViewEventsContext>` component is an advanced feature that enables external listening of data view events. In order to share data view context with your other UI components, both your components and your data view should be wrapped with the `<DataViewEventsProvider>`. This is demonstrated in the following example.
56
56
57
-
### Events context
58
-
59
-
The `<DataViewEventsContext>` provides a method of listening to the data view events from the outside of the component.
60
-
61
-
In order to give your other UI components access to the shared context, wrap them and your data view with the `<DataViewEventsProvider>`.
62
-
63
-
### Row click subscription example
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).
57
+
### Row click subscription
58
+
This example uses the `<DataViewEventsProvider>` to display details about a selected row in a [drawer component](/components/drawer).
Copy file name to clipboardExpand all lines: packages/module/patternfly-docs/content/extensions/data-view/examples/Table/Table.md
+48-54Lines changed: 48 additions & 54 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -25,112 +25,106 @@ import { DataViewTable } from '@patternfly/react-data-view/dist/dynamic/DataView
25
25
import { useDataViewSelection, useDataViewSort } from '@patternfly/react-data-view/dist/dynamic/Hooks';
26
26
import { DataView, DataViewState } from '@patternfly/react-data-view/dist/dynamic/DataView';
27
27
28
-
The **data view table** component is an abstraction that renders your columns and rows in the PatternFly [table](/components/table) component.
28
+
The **data view table** component renders your data into columns and rows within a [PatternFly table](/components/table) component. You can easily customize and configure the table by adjusting the properties listed at the bottom of this page.
29
29
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.
30
+
## Configuring rows and columns
31
+
Below is a detailed description of properties used to define rows and columns for your table:
32
+
-`columns`: Defines the column heads of the table. Each item in the array can be a `ReactNode` for simple heads, or an object with the following properties:
33
+
-`cell`: Content to display in the column head.
34
+
-`props` (optional): (`ThProps`) to pass to the `<Th>` component, such as `width`, `sort`, and other table head cell properties.
35
+
-`rows`: Defines the rows to be displayed in the table. Each item in the array can be either an array of `DataViewTd` for simple rows, or an object with the following properties:
36
+
-`row`: Content to display in each cell in the row.
37
+
-`id` (optional): Unique identifier for the row that's used for matching selected items.
38
+
-`props` (optional): (`TrProps`) to pass to the `<Tr>` component, such as `isHoverable`, `isRowSelected`, and other table row properties.
31
39
32
-
### Customized table example
40
+
It is also possible to disable row selection using the `isSelectDisabled` function, which can be passed to the wrapping `DataView` component through the `selection`.
41
+
42
+
### Table example
33
43
```js file="./DataViewTableExample.tsx"
34
44
35
45
```
36
46
37
-
The `DataViewTable` component accepts the following props:
38
-
39
-
-`columns` defining the column heads of the table. Each item in the array can be a `ReactNode` (for simple heads) or an object with the following properties:
40
-
-`cell` (`ReactNode`) content to display in the column head.
41
-
- optional `props` (`ThProps`) to pass to the `<Th>` component, such as `width`, `sort`, and other table head cell properties.
42
-
43
-
-`rows` defining the rows to be displayed in the table. Each item in the array can be either an array of `DataViewTd` (for simple rows) or an object with the following properties:
44
-
-`row` (`DataViewTd[]`) defining the content for each cell in the row.
45
-
- optional `id` (`string`) for the row (can be used to match items in selection).
46
-
- optional `props` (`TrProps`) to pass to the `<Tr>` component, such as `isHoverable`, `isRowSelected`, and other table row properties.
47
-
48
-
- optional `ouiaId`
49
-
50
-
- optional `props` (`TableProps`) that are passed down to the `<Table>` component, except for `onSelect`, which is managed internally.
51
-
52
-
It is also possible to disable row selection using the `isSelectDisabled` function passed to the wrapping data view component through `selection`.
53
-
54
47
## Tree table
55
48
56
-
Instead of a basic table, your data view can use a tree table variant, with expandable rows and custom icons for leaf and parent nodes.
49
+
A tree table includes expandable rows and custom icons for leaf and parent nodes.
50
+
To enable a tree table, pass the `isTreeTable` flag to the `<DataViewTable>` component.
57
51
58
-
To enable a tree table, pass the `isTreeTable` flag to the `<DataViewTable>` component.
59
52
60
-
Pass `collapsedIcon`, `expandedIcon`, and `leafIcon` to `<DataViewTable>`, to align a row's icon to its state.
53
+
Tree table rows have to be defined with following keys:
54
+
-`row`: Defines the content for each cell in the row.
55
+
-`id`: Unique identifier for the row that's used for matching selected items.
56
+
-`children` (optional): Defines the children rows.
61
57
62
-
Tree table rows have to be defined in a format of object with following keys:
63
-
-`row` (`DataViewTd[]`) defining the content for each cell in the row.
64
-
-`id` (`string`) for the row (used to match items in selection end expand the rows).
65
-
- optional `children` (`DataViewTrTree[]`) defining the children rows.
58
+
To update a row's icon to reflect its expansion state, pass `collapsedIcon`, `expandedIcon`, and `leafIcon` to `<DataViewTable>`.
66
59
67
-
It is also possible to disable row selection using the `isSelectDisabled` function passed to the wrapping data view component through `selection`.
60
+
To disable row selection, pass the `isSelectDisabled` function to `selection` prop of the wrapping `<DataView>` component .
68
61
69
62
### Tree table example
63
+
70
64
```js file="./DataViewTableTreeExample.tsx"
71
65
72
66
```
73
67
74
68
## Sorting
69
+
The following example demonstrates how to enable sorting functionality within a data view. This implementation support dynamic sorting by column and persists the sort state in the page's URL via [React Router](https://reactrouter.com/).
70
+
71
+
### Sorting example
72
+
```js file="./SortingExample.tsx"
73
+
74
+
```
75
+
### useDataViewSort hook
75
76
76
77
The `useDataViewSort` hook manages the sorting state of a data view. It provides an easy way to handle sorting logic, including synchronization with URL parameters and defining default sorting behavior.
77
78
78
79
**Initial values:**
79
80
-`initialSort` object to set default `sortBy` and `direction` values:
80
-
-`sortBy`: key of the initial column to sort.
81
-
-`direction`: default sorting direction (`asc` or `desc`).
82
-
-Optional `searchParams`object to manage URL-based synchronization of sort state.
83
-
-Optional `setSearchParams`function to update the URL parameters when sorting changes.
84
-
-`defaultDirection` to set the default direction when no direction is specified.
81
+
-`sortBy`: Key of the initial column to sort.
82
+
-`direction`: Default sorting direction (`asc` or `desc`).
83
+
-`searchParams`(optional): Object to manage URL-based synchronization of sort state.
84
+
-`setSearchParams`(optional): Function to update the URL parameters when sorting changes.
85
+
-`defaultDirection`: Used to set the default direction when no direction is specified.
85
86
- Customizable parameter names for the URL:
86
-
-`sortByParam`: name of the URL parameter for the column key.
87
-
-`directionParam`: name of the URL parameter for the sorting direction.
88
-
89
-
The `useDataViewSort` hook integrates seamlessly with React Router to manage sort state via URL parameters. Alternatively, you can use `URLSearchParams` and `window.history.pushState` APIs, or other routing libraries. If URL synchronization is not configured, the sort state is managed internally within the component.
87
+
-`sortByParam`: Name of the URL parameter for the column key.
88
+
-`directionParam`: Name of the URL parameter for the sorting direction.
89
+
The `useDataViewSort` hook integrates seamlessly with [React Router](https://reactrouter.com/) to manage the sort state via URL parameters. Alternatively, you can use `URLSearchParams` and `window.history.pushState` APIs, or other routing libraries. If URL synchronization is not configured, the sort state is managed internally within the component.
90
90
91
91
**Return values:**
92
-
-`sortBy`: key of the column currently being sorted.
93
-
-`direction`: current sorting direction (`asc` or `desc`).
94
-
-`onSort`: function to handle sorting changes programmatically or via user interaction.
95
-
96
-
### Sorting example
97
-
98
-
The following example demonstrates how to set up and use sorting functionality within a data view. The implementation includes dynamic sorting by column with persistence of sort state in the URL using React Router.
99
-
```js file="./SortingExample.tsx"
100
-
101
-
```
92
+
-`sortBy`: Key of the column currently being sorted.
93
+
-`direction`: Current sorting direction (`asc` or `desc`).
94
+
-`onSort`: Function to handle sorting changes programmatically or via user interaction.
102
95
103
96
## States
104
97
105
-
The data view table allows you to react to the `activeState` property passed to the data view (`loading`, `error`, `empty`, etc.). You can use `headStates` and `bodyStates` props to define table head and body applicable to given state. Below, you can see examples of the most common use cases.
98
+
The data view table allows you to react to the `activeState` property passed to the data view (such as `empty`, `error`, `loading`). You can use the `headStates` and `bodyStates` props to define the table head and body for a given state.
106
99
107
100
### Empty
108
101
When there is no data to render in the data view, you can instead display an empty state.
109
102
110
-
You can create your error state by using the PatternFly [empty state](/components/empty-state) component. To render the empty state, pass the component under `empty` key to `headStates` or `bodyStates`.
103
+
You can create your error state by using a [PatternFly empty state](/components/empty-state). To render the empty state, pass the component under `empty` key to `headStates` or `bodyStates`.
111
104
112
105
```js file="./DataViewTableEmptyExample.tsx"
113
106
114
107
```
115
108
116
109
### Error
117
-
When there is a data connection or retrieval error, you can display an error state.
118
-
119
-
You can create your error state by using the [error state](/component-groups/error-state) component from the [component groups](/extensions/component-groups/about-component-groups) extension or PatternFly [empty state](/components/empty-state) component. To render the error state, pass the component under `error` key to `headStates` or `bodyStates`.
110
+
When there is a data connection or retrieval error, you can display an error state.
120
111
121
112
The error state will be displayed when the data view `activeState` value is `error`.
122
113
114
+
You can create your error state by either using the [component groups extension's error state](/component-groups/error-state) or a [PatternFly empty state](/components/empty-state) component. To render the error state, pass the component under `error` key to `headStates` or `bodyStates`.
115
+
123
116
```js file="./DataViewTableErrorExample.tsx"
124
117
125
118
```
126
119
127
120
### Loading
128
121
To indicate that data is loading, you can display a loading state.
129
122
130
-
You can create your loading state by using the [skeleton table](/component-groups/skeleton-table) from the [component groups](/extensions/component-groups/about-component-groups)extension or customized PatternFly [empty state](/components/empty-state) component. To render the loading state, pass the component under `loading` key to `headStates` or `bodyStates`.
131
-
132
123
The loading state will be displayed when the data view `activeState` value is `loading`.
133
124
125
+
You can create your loading state by either using the [component groups extension's skeleton table](/component-groups/skeleton-table) or a customized [PatternFly empty state](/components/empty-state). To render the loading state, pass the component under the `loading` key to `headStates` or `bodyStates`.
0 commit comments