@patternfly/react-data-view 6.0.0-prerelease.1 → 6.1.0

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

@@ -0,0 +1,130 @@
+---
+# Sidenav top-level section
+# should be the same for all markdown files
+section: extensions
+subsection: Data view
+# Sidenav secondary level section
+# should be the same for all markdown files
+id: Table
+title: Data view table
+# Tab (react | react-demos | html | html-demos | design-guidelines | accessibility)
+source: react
+# If you use typescript, the name of the interface to display props for
+# These are found through the sourceProps function provided in patternfly-docs.source.js
+sortValue: 3
+propComponents: ['DataViewTableBasic', 'DataViewTableTree', 'DataViewTrTree', 'DataViewTrObject']
+sourceLink: https://github.com/patternfly/react-data-view/blob/main/packages/module/patternfly-docs/content/extensions/data-view/examples/Table/Table.md
+---
+import { useMemo } from 'react';
+import { BrowserRouter, useSearchParams } from 'react-router-dom';
+import { Button, EmptyState, EmptyStateActions, EmptyStateBody, EmptyStateFooter } from '@patternfly/react-core';
+import { CubesIcon, FolderIcon, FolderOpenIcon, LeafIcon, ExclamationCircleIcon } from '@patternfly/react-icons';
+import { ErrorState, ResponsiveAction, ResponsiveActions, SkeletonTableHead, SkeletonTableBody } from '@patternfly/react-component-groups';
+import { DataViewToolbar } from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
+import { DataViewTable } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
+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 with these additional [data view components and props](/extensions/data-view/table#props).
+
+## Configuring rows and columns
+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.
+- `rows`: Defines the rows to be displayed in the table. Each item in the array can be either an array of `DataViewTd` for simple rows, or an object with the following properties:
+  - `row`: Content to display in each cell in the row.
+  - `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` prop.
+
+### Table example
+```js file="./DataViewTableExample.tsx"
+
+```
+
+## Tree table
+
+A tree table includes expandable rows and custom icons for leaf and parent nodes. 
+To enable a tree table, pass the `isTreeTable` flag to the `<DataViewTable>` component.
+
+
+Tree table rows have to be defined with following keys:
+  - `row`: Defines the content for each cell in the row.
+  - `id`: Unique identifier for the row that's used for matching selected items.
+  - `children` (optional): Defines the children rows.
+
+To update a row's icon to reflect its expansion state, pass `collapsedIcon`, `expandedIcon`, and `leafIcon` to `<DataViewTable>`.
+
+To disable row selection, pass the `isSelectDisabled` function to `selection` prop of the wrapping `<DataView>` component .
+
+### Tree table example
+
+```js file="./DataViewTableTreeExample.tsx"
+
+```
+
+## Sorting
+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"
+
+```
+### Sorting state
+
+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:
+  - `sortBy`: Key of the initial column to sort.
+  - `direction`: Default sorting direction (`asc` or `desc`).
+- `searchParams` (optional): Object to manage URL-based synchronization of sort state.
+- `setSearchParams` (optional): Function to update the URL parameters when sorting changes.
+- `defaultDirection`: Used to set the default direction when no direction is specified.
+- Customizable parameter names for the URL:
+  - `sortByParam`: Name of the URL parameter for the column key.
+  - `directionParam`: Name of the URL parameter for the sorting direction.
+The `useDataViewSort` hook integrates seamlessly with [React Router](https://reactrouter.com/) to manage the sort state via URL parameters. Alternatively, you can use `URLSearchParams` and `window.history.pushState` APIs, or other routing libraries. If URL synchronization is not configured, the sort state is managed internally within the component.
+
+**Return values:**
+- `sortBy`: Key of the column currently being sorted.
+- `direction`: Current sorting direction (`asc` or `desc`).
+- `onSort`: Function to handle sorting changes programmatically or via user interaction.
+
+## States
+
+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 empty state by passing a [PatternFly empty state](/components/empty-state) to the `empty` key of `headStates` or `bodyStates`. 
+
+```js file="./DataViewTableEmptyExample.tsx"
+
+```
+
+### Error
+When there is a data connection or retrieval error, you can display an error state.
+
+The error state will be displayed when the data view `activeState` value is `error`.
+
+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"
+
+```
+
+### Loading
+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 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/DataViewToolbarActionsExample.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Pagination } from '@patternfly/react-core';
+import { BulkSelect, ResponsiveAction, ResponsiveActions } from '@patternfly/react-component-groups';
+import { DataViewToolbar } from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
+
+export const BasicExample: React.FunctionComponent = () => (
+  <DataViewToolbar 
+    bulkSelect={
+      <BulkSelect
+        selectedCount={0}
+        pageCount={5}
+        onSelect={() => null}
+      />  
+    }
+    actions={
+      <ResponsiveActions breakpoint="lg" ouiaId="example-actions">
+        <ResponsiveAction isPersistent variant="primary">Persistent</ResponsiveAction>
+        <ResponsiveAction isPinned variant="secondary">Pinned</ResponsiveAction>
+        <ResponsiveAction>Action three</ResponsiveAction>
+        <ResponsiveAction>Action four</ResponsiveAction>
+      </ResponsiveActions>
+    }
+    pagination={
+      <Pagination page={1} perPage={10} />
+    }
+  />
+)

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

@@ -0,0 +1,36 @@
+/* eslint-disable no-console */
+import React from 'react';
+import { Pagination } from '@patternfly/react-core';
+import { BulkSelect } from '@patternfly/react-component-groups';
+import { DataViewToolbar } from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
+import { ResponsiveAction, ResponsiveActions } from '@patternfly/react-component-groups';
+import { DataViewFilters } from '@patternfly/react-data-view/dist/dynamic/DataViewFilters';
+import { DataViewTextFilter } from '@patternfly/react-data-view/dist/dynamic/DataViewTextFilter';
+
+export const BasicExample: React.FunctionComponent = () => (
+  <DataViewToolbar 
+    clearAllFilters={() => console.log('clearAllFilters called')}
+    bulkSelect={
+      <BulkSelect
+        selectedCount={0}
+        pageCount={5}
+        onSelect={() => console.log('onSelect called')}
+      />  
+    }
+    filters={ 
+      <DataViewFilters onChange={() => console.log('onSetFilters calles')} values={{}}>
+        <DataViewTextFilter filterId="name" title='Name' placeholder='Filter by name' />
+        <DataViewTextFilter filterId="branch" title='Branch' placeholder='Filter by branch' />
+      </DataViewFilters>
+    }
+    actions={
+      <ResponsiveActions ouiaId="example-actions">
+        <ResponsiveAction>Add repository</ResponsiveAction>
+        <ResponsiveAction>Delete repository</ResponsiveAction>
+      </ResponsiveActions>
+    }
+    pagination={
+      <Pagination page={1} perPage={10} isCompact />
+    } 
+  />
+)

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

@@ -0,0 +1,107 @@
+import React, { useMemo } from 'react';
+import { Pagination } from '@patternfly/react-core';
+import { BrowserRouter, useSearchParams } from 'react-router-dom';
+import { useDataViewFilters, useDataViewPagination } from '@patternfly/react-data-view/dist/dynamic/Hooks';
+import { DataView } from '@patternfly/react-data-view/dist/dynamic/DataView';
+import { DataViewTable } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
+import { DataViewToolbar } from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
+import { DataViewFilterOption, DataViewFilters } from '@patternfly/react-data-view/dist/dynamic/DataViewFilters';
+import { DataViewTextFilter } from '@patternfly/react-data-view/dist/dynamic/DataViewTextFilter';
+import { DataViewCheckboxFilter } from '@patternfly/react-data-view/dist/dynamic/DataViewCheckboxFilter';
+
+const perPageOptions = [
+  { title: '5', value: 5 },
+  { title: '10', value: 10 }
+];
+
+interface Repository {
+  name: string;
+  branch: string | null;
+  prs: string | null;
+  workspace: string;
+  lastCommit: string;
+}
+
+interface RepositoryFilters {
+  name: string,
+  branch: string,
+  workspace: string[]
+}
+
+const repositories: Repository[] = [
+  { name: 'Repository one', branch: 'Branch one', prs: 'Pull request one', workspace: 'Workspace one', lastCommit: 'Timestamp one' },
+  { name: 'Repository two', branch: 'Branch two', prs: 'Pull request two', workspace: 'Workspace two', lastCommit: 'Timestamp two' },
+  { name: 'Repository three', branch: 'Branch three', prs: 'Pull request three', workspace: 'Workspace one', lastCommit: 'Timestamp three' },
+  { name: 'Repository four', branch: 'Branch four', prs: 'Pull request four', workspace: 'Workspace one', lastCommit: 'Timestamp four' },
+  { name: 'Repository five', branch: 'Branch five', prs: 'Pull request five', workspace: 'Workspace two', lastCommit: 'Timestamp five' },
+  { name: 'Repository six', branch: 'Branch six', prs: 'Pull request six', workspace: 'Workspace three', lastCommit: 'Timestamp six' }
+];
+
+const filterOptions: DataViewFilterOption[] = [
+  { label: 'Workspace one', value: 'workspace-one' },
+  { label: 'Workspace two', value: 'workspace-two' },
+  { label: 'Workspace three', value: 'workspace-three' }
+];
+
+const columns = [ 'Name', 'Branch', 'Pull requests', 'Workspace', 'Last commit' ];
+
+const ouiaId = 'LayoutExample';
+
+const MyTable: React.FunctionComponent = () => { 
+  const [ searchParams, setSearchParams ] = useSearchParams();
+  const { filters, onSetFilters, clearAllFilters } = useDataViewFilters<RepositoryFilters>({ initialFilters: { name: '', branch: '', workspace: [] }, searchParams, setSearchParams });
+  const pagination = useDataViewPagination({ perPage: 5 });
+  const { page, perPage } = pagination;
+
+  const filteredData = useMemo(() => repositories.filter(item => 
+    (!filters.name || item.name?.toLocaleLowerCase().includes(filters.name?.toLocaleLowerCase())) &&
+    (!filters.branch || item.branch?.toLocaleLowerCase().includes(filters.branch?.toLocaleLowerCase())) &&
+    (!filters.workspace || filters.workspace.length === 0 || filters.workspace.includes(String(filterOptions.find(option => option.label === item.workspace)?.value)))
+  ), [ filters ]);
+
+  const pageRows = useMemo(() => filteredData
+    .slice((page - 1) * perPage, ((page - 1) * perPage) + perPage)
+    .map(item => Object.values(item)),
+  [ page, perPage, filteredData ]);
+
+  return (
+    <DataView>
+      <DataViewToolbar
+        ouiaId='LayoutExampleHeader'
+        clearAllFilters = {clearAllFilters}
+        pagination={
+          <Pagination 
+            perPageOptions={perPageOptions} 
+            itemCount={filteredData.length} 
+            {...pagination} 
+          />
+        }
+        filters={ 
+          <DataViewFilters onChange={(_e, values) => onSetFilters(values)} values={filters}>
+            <DataViewTextFilter filterId="name" title='Name' placeholder='Filter by name' />
+            <DataViewTextFilter filterId="branch" title='Branch' placeholder='Filter by branch' />
+            <DataViewCheckboxFilter filterId="workspace" title='Workspace' placeholder='Filter by workspace' options={filterOptions} />
+          </DataViewFilters>
+        }
+      />
+      <DataViewTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={pageRows} />
+      <DataViewToolbar
+        ouiaId='LayoutExampleFooter'
+        pagination={
+          <Pagination 
+            isCompact  
+            perPageOptions={perPageOptions} 
+            itemCount={filteredData.length} 
+            {...pagination} 
+          />
+        } 
+      />
+    </DataView>
+  );
+}
+
+export const BasicExample: React.FunctionComponent = () => (
+  <BrowserRouter>
+    <MyTable/>
+  </BrowserRouter>
+)

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

@@ -0,0 +1,56 @@
+import React, { useMemo } from 'react';
+import { Pagination } from '@patternfly/react-core';
+import { BrowserRouter, useSearchParams } from 'react-router-dom';
+import { useDataViewPagination } from '@patternfly/react-data-view/dist/dynamic/Hooks';
+import { DataView } from '@patternfly/react-data-view/dist/dynamic/DataView';
+import { DataViewToolbar } from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
+import { DataViewTable } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
+
+const perPageOptions = [
+  { title: '5', value: 5 },
+  { title: '10', value: 10 }
+];
+
+interface Repository {
+  name: string;
+  branches: string | null;
+  prs: string | null;
+  workspaces: string;
+  lastCommit: string;
+};
+
+const repositories: Repository[] = [
+  { name: 'Repository one', branches: 'Branch one', prs: 'Pull request one', workspaces: 'Workspace one', lastCommit: 'Timestamp one' },
+  { name: 'Repository two', branches: 'Branch two', prs: 'Pull request two', workspaces: 'Workspace two', lastCommit: 'Timestamp two' },
+  { name: 'Repository three', branches: 'Branch three', prs: 'Pull request three', workspaces: 'Workspace three', lastCommit: 'Timestamp three' },
+  { name: 'Repository four', branches: 'Branch four', prs: 'Pull request four', workspaces: 'Workspace four', lastCommit: 'Timestamp four' },
+  { name: 'Repository five', branches: 'Branch five', prs: 'Pull request five', workspaces: 'Workspace five', lastCommit: 'Timestamp five' },
+  { name: 'Repository six', branches: 'Branch six', prs: 'Pull request six', workspaces: 'Workspace six', lastCommit: 'Timestamp six' }
+];
+
+const rows = repositories.map(item => Object.values(item));
+
+const columns = [ 'Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit' ];
+
+const ouiaId = 'LayoutExample';
+
+const MyTable: React.FunctionComponent = () => {
+  const [ searchParams, setSearchParams ] = useSearchParams()
+  const pagination = useDataViewPagination({ perPage: 5, searchParams, setSearchParams });
+  const { page, perPage } = pagination;
+
+  const pageRows = useMemo(() => rows.slice((page - 1) * perPage, ((page - 1) * perPage) + perPage), [ page, perPage ]);
+  return (
+    <DataView>
+      <DataViewToolbar ouiaId='DataViewHeader' pagination={<Pagination perPageOptions={perPageOptions} itemCount={repositories.length} {...pagination} />} />
+      <DataViewTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={pageRows} />
+      <DataViewToolbar ouiaId='DataViewFooter' pagination={<Pagination isCompact perPageOptions={perPageOptions} itemCount={repositories.length} {...pagination} />} />
+    </DataView>
+  );
+};
+
+export const BasicExample: React.FunctionComponent = () => (
+  <BrowserRouter>
+    <MyTable/>
+  </BrowserRouter>
+);

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

@@ -0,0 +1,57 @@
+import React from 'react';
+import { useDataViewSelection } from '@patternfly/react-data-view/dist/dynamic/Hooks';
+import { BulkSelect, BulkSelectValue } from '@patternfly/react-component-groups/dist/dynamic/BulkSelect';
+import { DataView } from '@patternfly/react-data-view/dist/dynamic/DataView';
+import { DataViewToolbar } from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
+import { DataViewTable } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
+
+interface Repository {
+  name: string;
+  branches: string | null;
+  prs: string | null;
+  workspaces: string;
+  lastCommit: string;
+}
+
+const repositories: Repository[] = [
+  { name: 'Repository one', branches: 'Branch one', prs: 'Pull request one', workspaces: 'Workspace one', lastCommit: 'Timestamp one' },
+  { name: 'Repository two', branches: 'Branch two', prs: 'Pull request two', workspaces: 'Workspace two', lastCommit: 'Timestamp two' },
+  { name: 'Repository three', branches: 'Branch three', prs: 'Pull request three', workspaces: 'Workspace three', lastCommit: 'Timestamp three' },
+  { name: 'Repository four', branches: 'Branch four', prs: 'Pull request four', workspaces: 'Workspace four', lastCommit: 'Timestamp four' },
+  { name: 'Repository five', branches: 'Branch five', prs: 'Pull request five', workspaces: 'Workspace five', lastCommit: 'Timestamp five' },
+  { name: 'Repository six', branches: 'Branch six', prs: 'Pull request six', workspaces: 'Workspace six', lastCommit: 'Timestamp six' }
+];
+
+const rows = repositories.map(item => Object.values(item));
+
+const columns = [ 'Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit' ];
+
+const ouiaId = 'LayoutExample';
+
+export const BasicExample: React.FunctionComponent = () => { 
+  const selection = useDataViewSelection({ matchOption: (a, b) => a[0] === b[0] });
+  const { selected, onSelect } = selection;
+
+  const handleBulkSelect = (value: BulkSelectValue) => {
+    value === BulkSelectValue.none && onSelect(false);
+    value === BulkSelectValue.all && onSelect(true, rows);
+  };
+
+  return (
+    <DataView selection={selection}>
+      <DataViewToolbar 
+        ouiaId='DataViewHeader'
+        bulkSelect={
+          <BulkSelect
+            canSelectAll
+            isDataPaginated={false}
+            totalCount={repositories.length}
+            selectedCount={selected.length}
+            onSelect={handleBulkSelect}
+          />
+        } 
+      />
+      <DataViewTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={rows} />
+    </DataView>
+  );
+}

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

@@ -0,0 +1,142 @@
+---
+# Sidenav top-level section
+# should be the same for all markdown files
+section: extensions
+subsection: Data view
+# Sidenav secondary level section
+# should be the same for all markdown files
+id: Toolbar
+title: Data view toolbar
+# Tab (react | react-demos | html | html-demos | design-guidelines | accessibility)
+source: react
+# If you use typescript, the name of the interface to display props for
+# These are found through the sourceProps function provided in patternfly-docs.source.js
+sortValue: 2
+propComponents: ['DataViewToolbar', 'DataViewFilters', 'DataViewTextFilter', 'DataViewCheckboxFilter']
+sourceLink: https://github.com/patternfly/react-data-view/blob/main/packages/module/patternfly-docs/content/extensions/data-view/examples/Toolbar/Toolbar.md
+---
+import { useMemo } from 'react';
+import { BrowserRouter, useSearchParams } from 'react-router-dom';
+import { useDataViewPagination, useDataViewSelection, useDataViewFilters } from '@patternfly/react-data-view/dist/dynamic/Hooks';
+import { DataView } from '@patternfly/react-data-view/dist/dynamic/DataView';
+import { BulkSelect, BulkSelectValue, ErrorState, ResponsiveAction, ResponsiveActions, SkeletonTableHead, SkeletonTableBody } from '@patternfly/react-component-groups';
+import { DataViewToolbar } from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
+import { DataViewTable } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
+import { DataViewFilters } from '@patternfly/react-data-view/dist/dynamic/DataViewFilters';
+import { DataViewTextFilter } from '@patternfly/react-data-view/dist/dynamic/DataViewTextFilter';
+import { DataViewCheckboxFilter } from '@patternfly/react-data-view/dist/dynamic/DataViewCheckboxFilter';
+
+The **data view toolbar** component renders a default opinionated data view toolbar above or below the data section. 
+
+Data view toolbar can contain pagination, bulk select, filters, actions, or other custom child content. To pass child items to the toolbar, use the [toolbar item](/components/toolbar#toolbar-items) component or predefined `<DataViewToolbar>` props for specific use cases.
+
+You can further customize toolbar interactions by referring to the additional documentation: 
+- [Actions](#toolbar-actions)
+- [Pagination](#pagination)
+- [Selection](#selection)
+- [Filters](#filters)
+
+### Toolbar example
+
+```js file="./DataViewToolbarExample.tsx"
+
+```
+
+## 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 1 toolbar.
+
+### Actions example
+
+```js file="./DataViewToolbarActionsExample.tsx"
+
+```
+
+## Pagination
+
+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` 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
+
+The `useDataViewPagination` hook manages the pagination state of the data view. 
+
+**Initial values:**
+- `perPage` initial value.
+- Optional `page` initial value.
+- Optional `searchParams` object.
+- Optional `setSearchParams` function.
+
+While the hook works seamlessly with the [React Router](https://reactrouter.com/) library, you do not need to use it to take advantage of URL persistence. The `searchParams` and `setSearchParams` props can be managed using native browser APIs (`URLSearchParams` and `window.history.pushState`) or any other routing library of your choice. If you don't pass these two props, the pagination state will be stored internally without the URL usage.
+
+You can also pass custom `pageParam` or `perPageParam` names, renaming the pagination parameters in the URL.
+
+The retrieved values are named to match the PatternFly pagination component props.
+
+**Return values:**
+- Current `page` number.
+- `onSetPage` to modify current page.
+- Items `perPage` value.
+- `onPerPageSelect` to modify per page value.
+
+### Pagination example
+This example uses the URL to persist the pagination state.
+
+```js file="./PaginationExample.tsx"
+
+```
+
+## Selection
+To allow users to select data records inside the data view, add selection support that displays a row's selection state.
+
+The data view toolbar can display a bulk selection component by using the predefined [component group extension bulk select](/extensions/component-groups/bulk-select) component.
+
+### Selection state
+
+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 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 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
+
+```js file="./SelectionExample.tsx"
+
+```
+
+## Filters
+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.
+
+### Filtering 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="./FiltersExample.tsx"
+
+```

package/patternfly-docs/pages/index.js

@@ -10,7 +10,7 @@ const centerStyle = {
 
 const IndexPage = () => {
   return (
-    <PageSection style={centerStyle}>
+    <PageSection hasBodyWrapper={false} style={centerStyle}>
       <div style={{ flex: 'none', textAlign: 'center' }}>
         <Title size="4xl" headingLevel="h1">
           My extension docs

package/src/DataView/DataView.tsx

@@ -1,16 +1,33 @@
 import React from 'react';
-import { Stack, StackItem } from '@patternfly/react-core';
-export interface DataViewProps {
+import { Stack, StackItem, StackProps } from '@patternfly/react-core';
+import { DataViewSelection, InternalContextProvider } from '../InternalContext';
+
+export const DataViewState = {
+  empty: 'empty',
+  loading: 'loading',
+  error: 'error'
+} as const;
+
+export type DataViewState = typeof DataViewState[keyof typeof DataViewState];
+
+/** extends StackProps */
+export interface DataViewProps extends StackProps {
   /** Content rendered inside the data view */
   children: React.ReactNode;
   /** Custom OUIA ID */
   ouiaId?: string;
+  /** Selection context configuration */
+  selection?: DataViewSelection;
+  /** Currently active state */
+  activeState?: DataViewState | string;
 }
 
-export const DataView: React.FC<DataViewProps> = ({
+export type DataViewImpementationProps = Omit<DataViewProps, 'onSelect' | 'isItemSelected' | 'isItemSelectDisabled'>;
+
+const DataViewImplementation: React.FC<DataViewImpementationProps> = ({
   children, ouiaId = 'DataView', ...props
-}: DataViewProps) => (
-  <Stack data-ouia-component-id={`${ouiaId}-stack}`} {...props}>
+}: DataViewImpementationProps) => (
+  <Stack data-ouia-component-id={`${ouiaId}-stack`} {...props}>
     {React.Children.map(children, (child, index) => (
       <StackItem data-ouia-component-id={`${ouiaId}-stack-item-${index}`}>
         {child}
@@ -19,4 +36,10 @@ export const DataView: React.FC<DataViewProps> = ({
   </Stack>
 )
 
+export const DataView: React.FC<DataViewProps> = ({ children, selection, activeState, ...props }: DataViewProps) => (
+  <InternalContextProvider selection={selection} activeState={activeState} >
+    <DataViewImplementation {...props}>{children}</DataViewImplementation>
+  </InternalContextProvider>
+);
+
 export default DataView;

package/src/DataView/__snapshots__/DataView.test.tsx.snap

@@ -7,7 +7,7 @@ exports[`DataView component should render correctly 1`] = `
     <div>
       <div
         class="pf-v6-l-stack"
-        data-ouia-component-id="DataView-stack}"
+        data-ouia-component-id="DataView-stack"
       >
         <div
           class="pf-v6-l-stack__item"
@@ -45,7 +45,7 @@ exports[`DataView component should render correctly 1`] = `
   "container": <div>
     <div
       class="pf-v6-l-stack"
-      data-ouia-component-id="DataView-stack}"
+      data-ouia-component-id="DataView-stack"
     >
       <div
         class="pf-v6-l-stack__item"