Skip to content

Commit 21a99a7

Browse files
committed
chore: clean Toolbar.md
1 parent 2154468 commit 21a99a7

File tree

1 file changed

+24
-25
lines changed
  • packages/module/patternfly-docs/content/extensions/data-view/examples/Toolbar

1 file changed

+24
-25
lines changed

packages/module/patternfly-docs/content/extensions/data-view/examples/Toolbar/Toolbar.md

Lines changed: 24 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -62,22 +62,22 @@ The data view toolbar can display a pagination using the `pagination` prop. You
6262
The `useDataViewPagination` hook manages the pagination state of the data view.
6363

6464
**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.
6969

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.
7171

7272
You can also pass custom `pageParam` or `perPageParam` names, renaming the pagination parameters in the URL.
7373

7474
The retrieved values are named to match the PatternFly pagination component props.
7575

7676
**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.
8181

8282
### Pagination example
8383
This example uses the URL to persist the pagination state.
@@ -89,22 +89,21 @@ This example uses the URL to persist the pagination state.
8989
## Selection
9090
To allow users to select data records inside the data view, add selection support that displays a row's selection state.
9191

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.
9393

9494
### Selection state
9595

9696
The `useDataViewSelection` hook manages the selection state of the data view.
9797

9898
**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.
103102

104103
**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.
108107

109108
### Selection example
110109

@@ -115,7 +114,7 @@ The `useDataViewSelection` hook manages the selection state of the data view.
115114
## Filters
116115
To allow users to filter data records in the data view, add filtering support that displays the applied filter chips.
117116

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).
119118

120119
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.
121120

@@ -124,16 +123,16 @@ You can either pass a `value` and `onChange` event to every filter separately, o
124123
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.
125124

126125
**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.
130129

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.
132131

133132
**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.
137136

138137
### Filtering example
139138
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

Comments
 (0)