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
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -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, 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.
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
@@ -54,7 +54,7 @@ Data can be presented using the predefined `<DataViewTable>` component, which is
54
54
55
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
-
### Row click subscription
57
+
### Row click subscription example
58
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
+10-10Lines changed: 10 additions & 10 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -25,10 +25,10 @@ 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 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.
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 with these additional [data view components and props](/extensions/data-view/table#props).
29
29
30
30
## Configuring rows and columns
31
-
Below is a detailed description of properties used to define rows and columns for your table:
31
+
To define rows and columns for your table, use these props:
32
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
33
-`cell`: Content to display in the column head.
34
34
-`props` (optional): (`ThProps`) to pass to the `<Th>` component, such as `width`, `sort`, and other table head cell properties.
@@ -37,7 +37,7 @@ Below is a detailed description of properties used to define rows and columns fo
37
37
-`id` (optional): Unique identifier for the row that's used for matching selected items.
38
38
-`props` (optional): (`TrProps`) to pass to the `<Tr>` component, such as `isHoverable`, `isRowSelected`, and other table row properties.
39
39
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`.
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` prop.
41
41
42
42
### Table example
43
43
```js file="./DataViewTableExample.tsx"
@@ -66,15 +66,15 @@ To disable row selection, pass the `isSelectDisabled` function to `selection` pr
66
66
```
67
67
68
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/).
69
+
The following example demonstrates how to enable sorting functionality within a data view. This implementation supports dynamic sorting by column and persists the sort state in the page's URL via [React Router](https://reactrouter.com/).
70
70
71
71
### Sorting example
72
72
```js file="./SortingExample.tsx"
73
73
74
74
```
75
-
### useDataViewSort hook
75
+
### Sorting state
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
+
The `useDataViewSort` hook manages the sorting state of a data view and provides an easy way to handle sorting logic, such as synchronization with URL parameters and the definition of default sorting behavior.
78
78
79
79
**Initial values:**
80
80
-`initialSort` object to set default `sortBy` and `direction` values:
@@ -95,12 +95,12 @@ The `useDataViewSort` hook integrates seamlessly with [React Router](https://rea
95
95
96
96
## States
97
97
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.
98
+
The data view table allows you to react to the `activeState`of 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.
99
99
100
100
### Empty
101
101
When there is no data to render in the data view, you can instead display an empty state.
102
102
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`.
103
+
You can create your empty state by passing a [PatternFly empty state](/components/empty-state) to the `empty` key of`headStates` or `bodyStates`.
104
104
105
105
```js file="./DataViewTableEmptyExample.tsx"
106
106
@@ -111,7 +111,7 @@ When there is a data connection or retrieval error, you can display an error sta
111
111
112
112
The error state will be displayed when the data view `activeState` value is `error`.
113
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`.
114
+
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`.
115
115
116
116
```js file="./DataViewTableErrorExample.tsx"
117
117
@@ -122,7 +122,7 @@ To indicate that data is loading, you can display a loading state.
122
122
123
123
The loading state will be displayed when the data view `activeState` value is `loading`.
124
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`.
125
+
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`.
Copy file name to clipboardExpand all lines: packages/module/patternfly-docs/content/extensions/data-view/examples/Toolbar/Toolbar.md
+5-5Lines changed: 5 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -43,7 +43,7 @@ You can further customize toolbar interactions by referring to the additional do
43
43
```
44
44
45
45
## Toolbar actions
46
-
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 one toolbar.
46
+
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
47
48
48
### Actions example
49
49
@@ -55,7 +55,7 @@ To support additional user needs, you can pass relevant actions to the toolbar v
55
55
56
56
To help users navigate data records that span multiple pages, add pagination support to your toolbar.
57
57
58
-
The data view toolbar can display a pagination using the `pagination` prop. You can also pass a custom `ouiaId`for testing purposes to the toolbar. You can also persist pagination values in the URL, to make it easier to share or bookmark specific pages of your data.
58
+
The data view toolbar can display a pagination using the `pagination` prop. You can also pass a custom `ouiaId` to the toolbar for testing purposes. You can also persist pagination values in the URL to make it easier to share or bookmark specific pages of your data.
59
59
60
60
### Pagination state
61
61
@@ -97,13 +97,13 @@ The `useDataViewSelection` hook manages the selection state of the data view.
97
97
98
98
**Initial values:**
99
99
- Optional `initialSelected` array of record's identifiers selected by default.
100
-
-`matchOption` function to check if given record is selected.
100
+
-`matchOption` function to check if the record is selected.
101
101
- When no `matchOption` is passed, the `Array.prototype.includes()` operation is performed on the `selected` array.
102
102
103
103
**Return values:**
104
104
-`selected` array of currently selected records.
105
-
-`isSelected` function returning the selection state for given record.
106
-
-`onSelect` callback to modify the selection state and accepting `isSelecting` flag indicating if records are changing to selected or deselected and `items`containing affected records.
105
+
-`isSelected` function returning the selection state for the record.
106
+
-`onSelect` callback to modify the selection state. This accepts the `isSelecting` flag (indicates if records are being selected or deselected) and `items`(affected records).
0 commit comments