Move new changes to v6 #156
Open
Conversation
This file contains 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
edonehoo
reviewed
Dec 10, 2024
| ``` | ||
|
|
||
| ## Sorting | ||
| 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/). |
There was a problem hiding this comment.
Suggested change
| 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/). | |
| 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/). |
|
|
||
| ### Modularity | ||
|
|
||
| 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. |
There was a problem hiding this comment.
Suggested change
| 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. | |
| 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. |
|
|
||
| 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. | ||
|
|
||
| ### Row click subscription |
There was a problem hiding this comment.
Suggested change
| ### Row click subscription | |
| ### Row click subscription example |
actually, I changed my mind. let's keep this with "example"
| import { useDataViewSelection, useDataViewSort } from '@patternfly/react-data-view/dist/dynamic/Hooks'; | ||
| import { DataView, DataViewState } from '@patternfly/react-data-view/dist/dynamic/DataView'; | ||
|
|
||
| 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. |
There was a problem hiding this comment.
Suggested change
| 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. | |
| 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). |
| 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. | ||
|
|
||
| ## Configuring rows and columns | ||
| Below is a detailed description of properties used to define rows and columns for your table: |
There was a problem hiding this comment.
Suggested change
| Below is a detailed description of properties used to define rows and columns for your table: | |
| To define rows and columns for your table, use these props: |
|
|
||
| To help users navigate data records that span multiple pages, add pagination support to your toolbar. | ||
|
|
||
| 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. |
There was a problem hiding this comment.
Suggested change
| 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. | |
| 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. |
| ```js file="./SortingExample.tsx" | ||
|
|
||
| ``` | ||
| ### useDataViewSort hook |
There was a problem hiding this comment.
Suggested change
| ### useDataViewSort hook | |
| ### Sorting state |
reverting this from my suggestion to match the title we have in the similar toolbar example
|
|
||
| **Initial values:** | ||
| - Optional `initialSelected` array of record's identifiers selected by default. | ||
| - `matchOption` function to check if given record is selected. |
There was a problem hiding this comment.
Suggested change
| - `matchOption` function to check if given record is selected. | |
| - `matchOption` function to check if the record is selected. |
|
|
||
| **Return values:** | ||
| - `selected` array of currently selected records. | ||
| - `isSelected` function returning the selection state for given record. |
There was a problem hiding this comment.
Suggested change
| - `isSelected` function returning the selection state for given record. | |
| - `isSelected` function returning the selection state for the record. |
| **Return values:** | ||
| - `selected` array of currently selected records. | ||
| - `isSelected` function returning the selection state for given record. | ||
| - `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. |
There was a problem hiding this comment.
Suggested change
| - `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. | |
| - `onSelect` callback to modify the selection state. This accepts the `isSelecting` flag (indicates if records are being selected or deselected) and `items` (affected records). |
edonehoo
approved these changes
Dec 12, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
RHCLOUD-36822
moving docs cleanup and minor fixes to v6 version of the DataView