Skip to content

Commit

Permalink
Merge pull request #163 from fhlavac/clean2
Browse files Browse the repository at this point in the history
chore: add final docs cleanup changes
  • Loading branch information
Hyperkid123 authored Dec 11, 2024
2 parents a144ea3 + 48b9531 commit 59f0ad7
Show file tree
Hide file tree
Showing 3 changed files with 17 additions and 17 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand All @@ -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).


Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -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"
Expand Down Expand Up @@ -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:
Expand All @@ -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"

Expand All @@ -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"

Expand All @@ -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"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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

Expand Down Expand Up @@ -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

Expand Down

0 comments on commit 59f0ad7

Please sign in to comment.