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/Toolbar/Toolbar.md
+24-25Lines changed: 24 additions & 25 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -62,22 +62,22 @@ The data view toolbar can display a pagination using the `pagination` prop. You
62
62
The `useDataViewPagination` hook manages the pagination state of the data view.
63
63
64
64
**Initial values:**
65
-
-`perPage` initial value
66
-
- Optional `page` initial value
67
-
- Optional `searchParams` object
68
-
- Optional `setSearchParams` function
65
+
-`perPage` initial value.
66
+
- Optional `page` initial value.
67
+
- Optional `searchParams` object.
68
+
- Optional `setSearchParams` function.
69
69
70
-
While the hook works seamlessly with the React Router library, you do not need to use it to take advantage of URL persistence. The `searchParams` and `setSearchParams` props can be managed using native browser APIs (`URLSearchParams` and `window.history.pushState`) or any other routing library of your choice. If you don't pass these two props, the pagination state will be stored internally without the URL usage.
70
+
While the hook works seamlessly with the [React Router](https://reactrouter.com/) library, you do not need to use it to take advantage of URL persistence. The `searchParams` and `setSearchParams` props can be managed using native browser APIs (`URLSearchParams` and `window.history.pushState`) or any other routing library of your choice. If you don't pass these two props, the pagination state will be stored internally without the URL usage.
71
71
72
72
You can also pass custom `pageParam` or `perPageParam` names, renaming the pagination parameters in the URL.
73
73
74
74
The retrieved values are named to match the PatternFly pagination component props.
75
75
76
76
**Return values:**
77
-
- Current `page` number
78
-
-`onSetPage` to modify current page
79
-
- Items `perPage` value
80
-
-`onPerPageSelect` to modify per page value
77
+
- Current `page` number.
78
+
-`onSetPage` to modify current page.
79
+
- Items `perPage` value.
80
+
-`onPerPageSelect` to modify per page value.
81
81
82
82
### Pagination example
83
83
This example uses the URL to persist the pagination state.
@@ -89,22 +89,21 @@ This example uses the URL to persist the pagination state.
89
89
## Selection
90
90
To allow users to select data records inside the data view, add selection support that displays a row's selection state.
91
91
92
-
The data view toolbar can display a bulk selection component using bulkSelect. You can make use of a predefined [component group extension bulk select](/extensions/component-groups/bulk-select) component.
92
+
The data view toolbar can display a bulk selection component by using the predefined [component group extension bulk select](/extensions/component-groups/bulk-select) component.
93
93
94
94
### Selection state
95
95
96
96
The `useDataViewSelection` hook manages the selection state of the data view.
97
97
98
98
**Initial values:**
99
-
- Optional `initialSelected` array of record's identifiers selected by default
100
-
-`matchOption` function to check if given record is selected
101
-
102
-
*When no `matchOption` is passed, the `Array.prototype.includes()` operation is performed on the `selected` array.*
99
+
- Optional `initialSelected` array of record's identifiers selected by default.
100
+
-`matchOption` function to check if given record is selected.
101
+
- When no `matchOption` is passed, the `Array.prototype.includes()` operation is performed on the `selected` array.
103
102
104
103
**Return values:**
105
-
-`selected` array of currently selected records
106
-
-`isSelected` function returning the selection state for given record
107
-
-`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
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.
108
107
109
108
### Selection example
110
109
@@ -115,7 +114,7 @@ The `useDataViewSelection` hook manages the selection state of the data view.
115
114
## Filters
116
115
To allow users to filter data records in the data view, add filtering support that displays the applied filter chips.
117
116
118
-
The data view toolbar can include a set of filters by passing a React node to the `filters` property. You can use the predefined components `<DataViewFilters>`, `<DataViewTextFilter>`, and `<DataViewCheckboxFilter>` to customize and handle filtering directly in the toolbar. The `<DataViewFilters>` component is a wrapper that allows conditional filtering using multiple attributes. If you need just a single filter, you can use `<DataViewTextFilter>`, `<DataViewCheckboxFilter>`, or a different filter component alone. Props of these filter components are listed at the bottom of this page.
117
+
The data view toolbar can include a set of filters by passing a React node to the `filters` property. You can use the predefined components `<DataViewFilters>`, `<DataViewTextFilter>`, and `<DataViewCheckboxFilter>` to customize and handle filtering directly in the toolbar. The `<DataViewFilters>` component is a wrapper that allows conditional filtering using multiple attributes. If you need just a single filter, you can use `<DataViewTextFilter>`, `<DataViewCheckboxFilter>`, or a different filter component alone. Props of these filter components are listed in the [props section of this page](#props).
119
118
120
119
You can either pass a `value` and `onChange` event to every filter separately, or you can pass `values` and `onChange` to the `<DataViewFilters>` wrapper, which makes them available to its children. Props directly passed to child filters have a higher priority than the "inherited" ones.
121
120
@@ -124,16 +123,16 @@ You can either pass a `value` and `onChange` event to every filter separately, o
124
123
The `useDataViewFilters` hook manages the filter state of the data view. It allows you to define default filter values, synchronize filter state with URL parameters, and handle filter changes efficiently.
125
124
126
125
**Initial values:**
127
-
-`initialFilters` object with default filter values (if the filter param allows multiple values, pass an array)
128
-
- Optional `searchParams` object for managing URL-based filter state
129
-
- Optional `setSearchParams` function to update the URL when filters are modified
126
+
-`initialFilters` object with default filter values (if the filter param allows multiple values, pass an array).
127
+
- Optional `searchParams` object for managing URL-based filter state.
128
+
- Optional `setSearchParams` function to update the URL when filters are modified.
130
129
131
-
The `useDataViewFilters` hook works well with the React Router library to support URL-based filtering. Alternatively, you can manage the filter state in the URL using `URLSearchParams` and `window.history.pushState` APIs, or other routing libraries. If no URL parameters are provided, the filter state is managed internally.
130
+
The `useDataViewFilters` hook works well with the [React Router](https://reactrouter.com/) library to support URL-based filtering. Alternatively, you can manage the filter state in the URL using `URLSearchParams` and `window.history.pushState` APIs, or other routing libraries. If no URL parameters are provided, the filter state is managed internally.
132
131
133
132
**Return values:**
134
-
-`filters` object representing the current filter values
135
-
-`onSetFilters` function to update the filter state
136
-
-`clearAllFilters` function to reset all filters to their initial values
133
+
-`filters` object representing the current filter values.
134
+
-`onSetFilters` function to update the filter state.
135
+
-`clearAllFilters` function to reset all filters to their initial values.
137
136
138
137
### Filtering example
139
138
This example demonstrates the setup and usage of filters within the data view. It includes text filters for different attributes, the ability to clear all filters, and persistence of filter state in the URL.
0 commit comments