Skip to content

Commit 59f0ad7

Browse files
authored
Merge pull request #163 from fhlavac/clean2
chore: add final docs cleanup changes
2 parents a144ea3 + 48b9531 commit 59f0ad7

File tree

3 files changed

+17
-17
lines changed

3 files changed

+17
-17
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ The data view toolbars and sub-components that display the data (like a card vie
4040

4141
### Modularity
4242

43-
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.
43+
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.
4444

4545
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.
4646

@@ -54,7 +54,7 @@ Data can be presented using the predefined `<DataViewTable>` component, which is
5454

5555
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.
5656

57-
### Row click subscription
57+
### Row click subscription example
5858
This example uses the `<DataViewEventsProvider>` to display details about a selected row in a [drawer component](/components/drawer).
5959

6060

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

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,10 @@ import { DataViewTable } from '@patternfly/react-data-view/dist/dynamic/DataView
2525
import { useDataViewSelection, useDataViewSort } from '@patternfly/react-data-view/dist/dynamic/Hooks';
2626
import { DataView, DataViewState } from '@patternfly/react-data-view/dist/dynamic/DataView';
2727

28-
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.
28+
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).
2929

3030
## Configuring rows and columns
31-
Below is a detailed description of properties used to define rows and columns for your table:
31+
To define rows and columns for your table, use these props:
3232
- `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:
3333
- `cell`: Content to display in the column head.
3434
- `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
3737
- `id` (optional): Unique identifier for the row that's used for matching selected items.
3838
- `props` (optional): (`TrProps`) to pass to the `<Tr>` component, such as `isHoverable`, `isRowSelected`, and other table row properties.
3939

40-
It is also possible to disable row selection using the `isSelectDisabled` function, which can be passed to the wrapping `DataView` component through the `selection`.
40+
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.
4141

4242
### Table example
4343
```js file="./DataViewTableExample.tsx"
@@ -66,15 +66,15 @@ To disable row selection, pass the `isSelectDisabled` function to `selection` pr
6666
```
6767

6868
## Sorting
69-
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/).
69+
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/).
7070

7171
### Sorting example
7272
```js file="./SortingExample.tsx"
7373

7474
```
75-
### useDataViewSort hook
75+
### Sorting state
7676

77-
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.
77+
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.
7878

7979
**Initial values:**
8080
- `initialSort` object to set default `sortBy` and `direction` values:
@@ -95,12 +95,12 @@ The `useDataViewSort` hook integrates seamlessly with [React Router](https://rea
9595

9696
## States
9797

98-
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.
98+
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.
9999

100100
### Empty
101101
When there is no data to render in the data view, you can instead display an empty state.
102102

103-
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`.
103+
You can create your empty state by passing a [PatternFly empty state](/components/empty-state) to the `empty` key of `headStates` or `bodyStates`.
104104

105105
```js file="./DataViewTableEmptyExample.tsx"
106106

@@ -111,7 +111,7 @@ When there is a data connection or retrieval error, you can display an error sta
111111

112112
The error state will be displayed when the data view `activeState` value is `error`.
113113

114-
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`.
114+
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`.
115115

116116
```js file="./DataViewTableErrorExample.tsx"
117117

@@ -122,7 +122,7 @@ To indicate that data is loading, you can display a loading state.
122122

123123
The loading state will be displayed when the data view `activeState` value is `loading`.
124124

125-
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`.
125+
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`.
126126

127127

128128
```js file="./DataViewTableLoadingExample.tsx"

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ You can further customize toolbar interactions by referring to the additional do
4343
```
4444

4545
## Toolbar actions
46-
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.
46+
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.
4747

4848
### Actions example
4949

@@ -55,7 +55,7 @@ To support additional user needs, you can pass relevant actions to the toolbar v
5555

5656
To help users navigate data records that span multiple pages, add pagination support to your toolbar.
5757

58-
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.
58+
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.
5959

6060
### Pagination state
6161

@@ -97,13 +97,13 @@ The `useDataViewSelection` hook manages the selection state of the data view.
9797

9898
**Initial values:**
9999
- Optional `initialSelected` array of record's identifiers selected by default.
100-
- `matchOption` function to check if given record is selected.
100+
- `matchOption` function to check if the record is selected.
101101
- When no `matchOption` is passed, the `Array.prototype.includes()` operation is performed on the `selected` array.
102102

103103
**Return values:**
104104
- `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.
105+
- `isSelected` function returning the selection state for the record.
106+
- `onSelect` callback to modify the selection state. This accepts the `isSelecting` flag (indicates if records are being selected or deselected) and `items` (affected records).
107107

108108
### Selection example
109109

0 commit comments

Comments
 (0)