Merged
Conversation
fhlavac
reviewed
Jan 30, 2025
Comment on lines
144
to
154
|
|
||
|
|
||
| ## All/selected data switch | ||
| To allow users to filter data records in the data view, add filtering support that displays the applied filter chips. | ||
|
|
||
| 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). | ||
|
|
||
| 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. | ||
|
|
||
| ### Filters state | ||
|
|
||
| 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. | ||
|
|
||
| **Initial values:** | ||
| - `initialFilters` object with default filter values (if the filter param allows multiple values, pass an array). | ||
| - Optional `searchParams` object for managing URL-based filter state. | ||
| - Optional `setSearchParams` function to update the URL when filters are modified. | ||
|
|
||
| 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. | ||
|
|
||
| **Return values:** | ||
| - `filters` object representing the current filter values. | ||
| - `onSetFilters` function to update the filter state. | ||
| - `clearAllFilters` function to reset all filters to their initial values. | ||
|
|
||
| ### All/selected example | ||
| 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. | ||
|
|
||
| ```js file="./AllSelectedExample.tsx" | ||
|
|
||
| ``` No newline at end of file |
Contributor
There was a problem hiding this comment.
The content seems to be just copied from the filters section, we should describe, what is happening in the new example
Collaborator
Author
There was a problem hiding this comment.
Replaced by the actual component description.
fhlavac
reviewed
Jan 30, 2025
| onSelect={handleBulkSelect} | ||
| /> | ||
| } | ||
| toggleGroup={<ToggleGroup aria-label="Default with single selectable"> |
Contributor
There was a problem hiding this comment.
we could come up with some better aria label
fhlavac
reviewed
Jan 30, 2025
Contributor
There was a problem hiding this comment.
how about introducing constants for all/selected strings?
Contributor
|
It would be nice to add some cypress test coverage - it can be just an e2e test checking that appropriate rows are displayed |
Contributor
|
@radekkaluzik did you have a chance to talk with UX about what to do with the toggle buttons if no rows are selected or become unselected? --If we want to hide the toggle group or just disable buttons/switch to appropriate? This should be probably figured out before we merge the example |
radekkaluzik
force-pushed
the
RHCLOUD-34812
branch
from
0927a2e to
8861843
Compare
karelhala
approved these changes
Feb 25, 2025
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
All/selected rows switch
https://issues.redhat.com/browse/RHCLOUD-34812
Zaznam.obrazovky.2025-02-25.v.10.46.55.mov