@patternfly/react-data-view 5.8.0 → 5.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-data-view",
-  "version": "5.8.0",
+  "version": "5.8.1",
   "description": "Data view used for Red Hat projects.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/patternfly-docs/content/extensions/data-view/examples/DataView/DataView.md

@@ -40,7 +40,7 @@ The data view toolbars and sub-components that display the data (like a card vie
 
 ### 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.
+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 `<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.
 
@@ -54,7 +54,7 @@ Data can be presented using the predefined `<DataViewTable>` component, which is
 
 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
+### Row click subscription example
 This example uses the `<DataViewEventsProvider>` to display details about a selected row in a [drawer component](/components/drawer).
 
 

package/patternfly-docs/content/extensions/data-view/examples/Table/Table.md

@@ -25,10 +25,10 @@ import { DataViewTable } from '@patternfly/react-data-view/dist/dynamic/DataView
 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.
+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).
 
 ## Configuring rows and columns
-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:
 - `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:
   - `cell`: Content to display in the column head.
   - `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
   - `id` (optional): Unique identifier for the row that's used for matching selected items.
   - `props` (optional): (`TrProps`) to pass to the `<Tr>` component, such as `isHoverable`, `isRowSelected`, and other table row properties.
 
-It is also possible to disable row selection using the `isSelectDisabled` function, which can be passed to the wrapping `DataView` component through the `selection`.
+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.
 
 ### Table example
 ```js file="./DataViewTableExample.tsx"
@@ -66,15 +66,15 @@ To disable row selection, pass the `isSelectDisabled` function to `selection` pr
 ```
 
 ## 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/).
+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/).
 
 ### Sorting example
 ```js file="./SortingExample.tsx"
 
 ```
-### useDataViewSort hook
+### Sorting state
 
-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.
+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.
 
 **Initial values:**
 - `initialSort` object to set default `sortBy` and `direction` values:
@@ -95,12 +95,12 @@ The `useDataViewSort` hook integrates seamlessly with [React Router](https://rea
 
 ## States
 
-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. 
+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. 
 
 ### Empty
 When there is no data to render in the data view, you can instead display an empty state. 
 
-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`. 
+You can create your empty state by passing a [PatternFly empty state](/components/empty-state) to the `empty` key of `headStates` or `bodyStates`. 
 
 ```js file="./DataViewTableEmptyExample.tsx"
 
@@ -111,7 +111,7 @@ When there is a data connection or retrieval error, you can display an error sta
 
 The error state will be displayed when the data view `activeState` value is `error`.
 
-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`. 
+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`. 
 
 ```js file="./DataViewTableErrorExample.tsx"
 
@@ -122,7 +122,7 @@ To indicate that data is loading, you can display a loading state.
 
 The loading state will be displayed when the data view `activeState` value is `loading`.
 
-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`. 
+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`. 
 
 
 ```js file="./DataViewTableLoadingExample.tsx"

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

@@ -43,7 +43,7 @@ You can further customize toolbar interactions by referring to the additional do
 ```
 
 ## Toolbar actions
-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.
+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.
 
 ### Actions example
 
@@ -55,7 +55,7 @@ To support additional user needs, you can pass relevant actions to the toolbar v
 
 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.
+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.
 
 ### Pagination state
 
@@ -97,13 +97,13 @@ The `useDataViewSelection` hook manages the selection state of the data view.
 
 **Initial values:**
 - Optional `initialSelected` array of record's identifiers selected by default.
-- `matchOption` function to check if given record is selected.
+- `matchOption` function to check if the record is selected.
     - When no `matchOption` is passed, the `Array.prototype.includes()` operation is performed on the `selected` array.
 
 **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.
+- `isSelected` function returning the selection state for the record.
+- `onSelect` callback to modify the selection state. This accepts the `isSelecting` flag (indicates if records are being selected or deselected) and `items` (affected records).
 
 ### Selection example