@patternfly/react-data-view 6.4.0 → 6.5.0-prerelease.1

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

@@ -0,0 +1,148 @@
+import { FunctionComponent, useState } from 'react';
+import { DataViewTable, DataViewTr, DataViewTh } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
+import { ExpandableContent } from '@patternfly/react-data-view/dist/dynamic/DataViewTableBasic';
+import { ExclamationCircleIcon } from '@patternfly/react-icons';
+import { Button, Toolbar, ToolbarContent, ToolbarItem, Switch } from '@patternfly/react-core';
+
+interface Repository {
+  id: number;
+  name: string;
+  branches: string | null;
+  prs: string | null;
+  workspaces: string;
+  lastCommit: string;
+  contributors: string;
+  stars: string;
+  forks: string;
+}
+
+const expandableContents: ExpandableContent[] = [
+  // Row 1 - Repository one
+  { rowId: 1, columnId: 2, content: <div><strong>Branch Details:</strong> 5 active branches, main, develop, feature/new-ui, hotfix/bug-123, release/v2.0</div> },
+  { rowId: 1, columnId: 3, content: <div><strong>PR Details:</strong> 3 open PRs, 45 merged this month, avg review time: 2 days</div> },
+  { rowId: 1, columnId: 5, content: <div><strong>Commit Info:</strong> Author: John Doe, Message: "Fix critical authentication bug", SHA: a1b2c3d</div> },
+
+  // Row 2 - Repository two
+  { rowId: 2, columnId: 2, content: <div><strong>Branch Details:</strong> 8 active branches, main, staging, feature/api-v2, feature/dashboard</div> },
+  { rowId: 2, columnId: 3, content: <div><strong>PR Details:</strong> 5 open PRs, 120 merged this month, avg review time: 1.5 days</div> },
+  { rowId: 2, columnId: 4, content: <div><strong>Workspace Info:</strong> Development env, 3 active deployments, last updated 30 mins ago</div> },
+  { rowId: 2, columnId: 5, content: <div><strong>Commit Info:</strong> Author: Jane Smith, Message: "Add new API endpoints", SHA: x9y8z7w</div> },
+
+  // Row 3 - Repository three
+  { rowId: 3, columnId: 2, content: <div><strong>Branch Details:</strong> 12 active branches including main, develop, multiple feature branches</div> },
+  { rowId: 3, columnId: 3, content: <div><strong>PR Details:</strong> 8 open PRs, 200 merged this month, avg review time: 3 days</div> },
+  { rowId: 3, columnId: 4, content: <div><strong>Workspace Info:</strong> Staging env, 10 active deployments, last updated 1 day ago</div> },
+  { rowId: 3, columnId: 5, content: <div><strong>Commit Info:</strong> Author: Bob Johnson, Message: "Refactor core modules", SHA: p0o9i8u</div> },
+
+  // Row 4 - Repository four
+  { rowId: 4, columnId: 2, content: <div><strong>Branch Details:</strong> 6 active branches, focusing on microservices architecture</div> },
+  { rowId: 4, columnId: 3, content: <div><strong>PR Details:</strong> 2 open PRs, 90 merged this month, avg review time: 2.5 days</div> },
+  { rowId: 4, columnId: 4, content: <div><strong>Workspace Info:</strong> QA env, 7 active deployments, automated testing enabled</div> },
+  { rowId: 4, columnId: 5, content: <div><strong>Commit Info:</strong> Author: Alice Williams, Message: "Update dependencies", SHA: m5n4b3v</div> },
+
+  // Row 5 - Repository five
+  { rowId: 5, columnId: 2, content: <div><strong>Branch Details:</strong> 4 active branches, clean branch strategy</div> },
+  { rowId: 5, columnId: 3, content: <div><strong>PR Details:</strong> 6 open PRs, 75 merged this month, avg review time: 1 day</div> },
+  { rowId: 5, columnId: 4, content: <div><strong>Workspace Info:</strong> Pre-production env, CI/CD pipeline configured</div> },
+  { rowId: 5, columnId: 5, content: <div><strong>Commit Info:</strong> Author: Charlie Brown, Message: "Implement dark mode", SHA: q2w3e4r</div> },
+
+  // Row 6 - Repository six
+  { rowId: 6, columnId: 2, content: <div><strong>Branch Details:</strong> 15 active branches, complex branching model</div> },
+  { rowId: 6, columnId: 3, content: <div><strong>PR Details:</strong> 10 open PRs, 250 merged this month, avg review time: 4 days</div> },
+  { rowId: 6, columnId: 4, content: <div><strong>Workspace Info:</strong> Multi-region deployment, high availability setup</div> },
+  { rowId: 6, columnId: 5, content: <div><strong>Commit Info:</strong> Author: David Lee, Message: "Security patches applied", SHA: t6y7u8i</div> },
+];
+
+const repositories: Repository[] = [
+  { id: 1, name: 'Repository one', branches: 'Branch one', prs: 'Pull request one', workspaces: 'Workspace one', lastCommit: 'Timestamp one', contributors: '25 contributors', stars: '1.2k stars', forks: '340 forks' },
+  { id: 2, name: 'Repository two', branches: 'Branch two', prs: 'Pull request two', workspaces: 'Workspace two', lastCommit: 'Timestamp two', contributors: '45 contributors', stars: '3.5k stars', forks: '890 forks' },
+  { id: 3, name: 'Repository three', branches: 'Branch three', prs: 'Pull request three', workspaces: 'Workspace three', lastCommit: 'Timestamp three', contributors: '200 contributors', stars: '15k stars', forks: '2.1k forks' },
+  { id: 4, name: 'Repository four', branches: 'Branch four', prs: 'Pull request four', workspaces: 'Workspace four', lastCommit: 'Timestamp four', contributors: '80 contributors', stars: '5.7k stars', forks: '1.2k forks' },
+  { id: 5, name: 'Repository five', branches: 'Branch five', prs: 'Pull request five', workspaces: 'Workspace five', lastCommit: 'Timestamp five', contributors: '60 contributors', stars: '4.3k stars', forks: '780 forks' },
+  { id: 6, name: 'Repository six', branches: 'Branch six', prs: 'Pull request six', workspaces: 'Workspace six', lastCommit: 'Timestamp six', contributors: '300 contributors', stars: '22k stars', forks: '4.5k forks' },
+  { id: 7, name: 'Repository seven', branches: 'Branch seven', prs: 'Pull request seven', workspaces: 'Workspace seven', lastCommit: 'Timestamp seven', contributors: '12 contributors', stars: '567 stars', forks: '120 forks' },
+  { id: 8, name: 'Repository eight', branches: 'Branch eight', prs: 'Pull request eight', workspaces: 'Workspace eight', lastCommit: 'Timestamp eight', contributors: '98 contributors', stars: '7.8k stars', forks: '1.5k forks' },
+  { id: 9, name: 'Repository nine', branches: 'Branch nine', prs: 'Pull request nine', workspaces: 'Workspace nine', lastCommit: 'Timestamp nine', contributors: '33 contributors', stars: '2.1k stars', forks: '456 forks' },
+  { id: 10, name: 'Repository ten', branches: 'Branch ten', prs: 'Pull request ten', workspaces: 'Workspace ten', lastCommit: 'Timestamp ten', contributors: '150 contributors', stars: '11k stars', forks: '2.8k forks' },
+  { id: 11, name: 'Repository eleven', branches: 'Branch eleven', prs: 'Pull request eleven', workspaces: 'Workspace eleven', lastCommit: 'Timestamp eleven', contributors: '67 contributors', stars: '5.2k stars', forks: '980 forks' },
+  { id: 12, name: 'Repository twelve', branches: 'Branch twelve', prs: 'Pull request twelve', workspaces: 'Workspace twelve', lastCommit: 'Timestamp twelve', contributors: '41 contributors', stars: '3.1k stars', forks: '670 forks' },
+  { id: 13, name: 'Repository thirteen', branches: 'Branch thirteen', prs: 'Pull request thirteen', workspaces: 'Workspace thirteen', lastCommit: 'Timestamp thirteen', contributors: '89 contributors', stars: '6.4k stars', forks: '1.3k forks' },
+  { id: 14, name: 'Repository fourteen', branches: 'Branch fourteen', prs: 'Pull request fourteen', workspaces: 'Workspace fourteen', lastCommit: 'Timestamp fourteen', contributors: '120 contributors', stars: '9.2k stars', forks: '1.9k forks' },
+  { id: 15, name: 'Repository fifteen', branches: 'Branch fifteen', prs: 'Pull request fifteen', workspaces: 'Workspace fifteen', lastCommit: 'Timestamp fifteen', contributors: '78 contributors', stars: '5.9k stars', forks: '1.1k forks' }
+];
+
+const ouiaId = 'TableInteractiveExample';
+
+export const InteractiveExample: FunctionComponent = () => {
+  const [isExpandable, setIsExpandable] = useState(true);
+  const [isSticky, setIsSticky] = useState(true);
+
+  // Generate rows based on current settings
+  const rows: DataViewTr[] = repositories.map(({ id, name, branches, prs, workspaces, lastCommit, contributors, stars, forks }) => [
+    {
+      id,
+      cell: workspaces,
+      props: {
+        favorites: { isFavorited: true }
+      }
+    },
+    { cell: <Button href='#' variant='link' isInline>{name}</Button>, props: { isStickyColumn: isSticky, hasRightBorder: true, hasLeftBorder: true, modifier: "nowrap" } },
+    { cell: branches, props: { modifier: "nowrap" } },
+    { cell: prs, props: { modifier: "nowrap" } },
+    { cell: workspaces, props: { modifier: "nowrap" } },
+    { cell: lastCommit, props: { modifier: "nowrap" } },
+    { cell: contributors, props: { modifier: "nowrap" } },
+    { cell: stars, props: { modifier: "nowrap" } },
+    { cell: forks, props: { modifier: "nowrap" } }
+  ]);
+
+  const columns: DataViewTh[] = [
+    null,
+    { cell: 'Repositories', props: { isStickyColumn: isSticky, modifier: 'fitContent', hasRightBorder: true, hasLeftBorder: true } },
+    { cell: <>Branches<ExclamationCircleIcon className='pf-v6-u-ml-sm' color="var(--pf-t--global--color--status--danger--default)"/></>, props: { width: 20 } },
+    { cell: 'Pull requests', props: { width: 20 } },
+    { cell: 'Workspaces', props: { info: { tooltip: 'More information' }, width: 20 } },
+    { cell: 'Last commit', props: { sort: { sortBy: {}, columnIndex: 4 }, width: 20 } },
+    { cell: 'Contributors', props: { width: 20 } },
+    { cell: 'Stars', props: { width: 20 } },
+    { cell: 'Forks', props: { width: 20 } },
+  ];
+
+  return (
+    <>
+      <Toolbar>
+        <ToolbarContent>
+          <ToolbarItem>
+            <Switch
+              id="expandable-switch"
+              label="Expandable"
+              isChecked={isExpandable}
+              onChange={(_event, checked) => setIsExpandable(checked)}
+              aria-label="Toggle expandable rows"
+            />
+          </ToolbarItem>
+          <ToolbarItem>
+            <Switch
+              id="sticky-switch"
+              label="Sticky header & column"
+              isChecked={isSticky}
+              onChange={(_event, checked) => setIsSticky(checked)}
+              aria-label="Toggle sticky header and columns"
+            />
+          </ToolbarItem>
+        </ToolbarContent>
+      </Toolbar>
+      <div style={{ height: '400px', overflow: 'auto' }}>
+        <DataViewTable
+          aria-label='Interactive repositories table'
+          ouiaId={ouiaId}
+          columns={columns}
+          rows={rows}
+          expandedRows={isExpandable ? expandableContents : undefined}
+          isExpandable={isExpandable}
+          isSticky={isSticky}
+        />
+      </div>
+    </>
+  );
+};

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

@@ -0,0 +1,90 @@
+import { FunctionComponent } from 'react';
+import { DataViewTable, DataViewTr, DataViewTh } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
+import { ExclamationCircleIcon } from '@patternfly/react-icons';
+import { Button } from '@patternfly/react-core';
+import { ActionsColumn } from '@patternfly/react-table';
+
+interface Repository {
+  id: number;
+  name: string;
+  branches: string | null;
+  prs: string | null;
+  workspaces: string;
+  lastCommit: string;
+  contributors: string;
+  stars: string;
+  forks: string;
+}
+
+const repositories: Repository[] = [
+  { id: 1, name: 'Repository one', branches: 'Branch one', prs: 'Pull request one', workspaces: 'Workspace one', lastCommit: 'Timestamp one', contributors: '25 contributors', stars: '1.2k stars', forks: '340 forks' },
+  { id: 2, name: 'Repository two', branches: 'Branch two', prs: 'Pull request two', workspaces: 'Workspace two', lastCommit: 'Timestamp two', contributors: '45 contributors', stars: '3.5k stars', forks: '890 forks' },
+  { id: 3, name: 'Repository three', branches: 'Branch three', prs: 'Pull request three', workspaces: 'Workspace three', lastCommit: 'Timestamp three', contributors: '200 contributors', stars: '15k stars', forks: '2.1k forks' },
+  { id: 4, name: 'Repository four', branches: 'Branch four', prs: 'Pull request four', workspaces: 'Workspace four', lastCommit: 'Timestamp four', contributors: '80 contributors', stars: '5.7k stars', forks: '1.2k forks' },
+  { id: 5, name: 'Repository five', branches: 'Branch five', prs: 'Pull request five', workspaces: 'Workspace five', lastCommit: 'Timestamp five', contributors: '60 contributors', stars: '4.3k stars', forks: '780 forks' },
+  { id: 6, name: 'Repository six', branches: 'Branch six', prs: 'Pull request six', workspaces: 'Workspace six', lastCommit: 'Timestamp six', contributors: '300 contributors', stars: '22k stars', forks: '4.5k forks' },
+  { id: 7, name: 'Repository seven', branches: 'Branch seven', prs: 'Pull request seven', workspaces: 'Workspace seven', lastCommit: 'Timestamp seven', contributors: '12 contributors', stars: '567 stars', forks: '120 forks' },
+  { id: 8, name: 'Repository eight', branches: 'Branch eight', prs: 'Pull request eight', workspaces: 'Workspace eight', lastCommit: 'Timestamp eight', contributors: '98 contributors', stars: '7.8k stars', forks: '1.5k forks' },
+  { id: 9, name: 'Repository nine', branches: 'Branch nine', prs: 'Pull request nine', workspaces: 'Workspace nine', lastCommit: 'Timestamp nine', contributors: '33 contributors', stars: '2.1k stars', forks: '456 forks' },
+  { id: 10, name: 'Repository ten', branches: 'Branch ten', prs: 'Pull request ten', workspaces: 'Workspace ten', lastCommit: 'Timestamp ten', contributors: '150 contributors', stars: '11k stars', forks: '2.8k forks' },
+  { id: 11, name: 'Repository eleven', branches: 'Branch eleven', prs: 'Pull request eleven', workspaces: 'Workspace eleven', lastCommit: 'Timestamp eleven', contributors: '67 contributors', stars: '5.2k stars', forks: '980 forks' },
+  { id: 12, name: 'Repository twelve', branches: 'Branch twelve', prs: 'Pull request twelve', workspaces: 'Workspace twelve', lastCommit: 'Timestamp twelve', contributors: '41 contributors', stars: '3.1k stars', forks: '670 forks' }
+];
+
+const rowActions = [
+  {
+    title: 'Some action',
+    onClick: () => console.log('clicked on Some action')  // eslint-disable-line no-console
+  },
+  {
+    title: <div>Another action</div>,
+    onClick: () => console.log('clicked on Another action')  // eslint-disable-line no-console
+  },
+  {
+    isSeparator: true
+  },
+  {
+    title: 'Third action',
+    onClick: () => console.log('clicked on Third action')  // eslint-disable-line no-console
+  }
+];
+
+const rows: DataViewTr[] = repositories.map(({ id, name, branches, prs, workspaces, lastCommit, contributors, stars, forks }) => [
+  { id, cell: workspaces, props: { favorites: { isFavorited: true } } },
+  { cell: <Button href='#' variant='link' isInline>{name}</Button>, props: { isStickyColumn: true, hasRightBorder: true, hasLeftBorder: true, modifier: "nowrap" } },
+  { cell: branches, props: { modifier: "nowrap" } },
+  { cell: prs, props: { modifier: "nowrap" } },
+  { cell: workspaces, props: { modifier: "nowrap" } },
+  { cell: lastCommit, props: { modifier: "nowrap" } },
+  { cell: contributors, props: { modifier: "nowrap" } },
+  { cell: stars, props: { modifier: "nowrap" } },
+  { cell: forks, props: { modifier: "nowrap" } },
+  { cell: <ActionsColumn items={rowActions}/>, props: { isActionCell: true } },
+]);
+
+const columns: DataViewTh[] = [
+  null,
+  { cell: 'Repositories', props: { isStickyColumn: true, modifier: 'fitContent', hasRightBorder: true, hasLeftBorder: true } },
+  { cell: <>Branches<ExclamationCircleIcon className='pf-v6-u-ml-sm' color="var(--pf-t--global--color--status--danger--default)"/></>, props: { width: 20 } },
+  { cell: 'Pull requests', props: { width: 20 } },
+  { cell: 'Workspaces', props: { info: { tooltip: 'More information' }, width: 20 } },
+  { cell: 'Last commit', props: { sort: { sortBy: {}, columnIndex: 4 }, width: 20 } },
+  { cell: 'Contributors', props: { width: 20 } },
+  { cell: 'Stars', props: { width: 20 } },
+  { cell: 'Forks', props: { width: 20 } },
+  null, // Actions column header
+];
+
+const ouiaId = 'TableStickyExample';
+
+export const StickyExample: FunctionComponent = () => (
+  <div style={{ height: '400px', width: '800px', overflow: 'auto' }}>
+    <DataViewTable
+      aria-label='Sticky repositories table'
+      ouiaId={ouiaId}
+      columns={columns}
+      rows={rows}
+      isSticky
+    />
+  </div>
+);

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

@@ -58,6 +58,67 @@ If you want to have all expandable nodes open on initial load pass the `expandAl
 
 ```
 
+## Expandable rows
+
+To add expandable content to table cells, pass an array of `ExpandableContent` objects to the `expandedRows` prop of the `<DataViewTable>` component. Each expandable content object defines which cell can be expanded and what content to display when expanded.
+
+The `ExpandableContent` interface is defined as:
+
+```typescript
+interface ExpandableContent {
+  /** The ID of the row containing the expandable cell (must match the id property in the row data) */
+  rowId: number;
+  /** The column index (0-based) that should be expandable */
+  columnId: number;
+  /** The content to display when the cell is expanded */
+  content: ReactNode;
+}
+```
+
+When a cell has expandable content:
+- A compound expand toggle button appears in the cell
+- Clicking the toggle expands the row to show the additional content below
+- Only one expanded cell is shown per row at a time
+- Clicking another expandable cell in the same row switches the expanded content
+
+### Expandable rows example
+
+```js file="./DataViewTableExpandableExample.tsx"
+
+```
+
+## Sticky header and columns
+
+To enable sticky headers and columns, set the `isSticky` prop to `true` on the `<DataViewTable>` component. This keeps the table header and designated columns visible when scrolling.
+
+To make specific columns sticky, add the `isStickyColumn` property to the column's `props` in the column definition:
+
+```typescript
+const columns: DataViewTh[] = [
+  { cell: 'Column Name', props: { isStickyColumn: true } }
+];
+```
+
+When sticky headers and columns are enabled:
+- The table header remains visible when scrolling vertically
+- Columns marked with `isStickyColumn: true` remain visible when scrolling horizontally
+- The table is wrapped in `OuterScrollContainer` and `InnerScrollContainer` components to enable sticky behavior
+- Sticky columns can have additional styling like borders using `hasRightBorder` or `hasLeftBorder` props
+
+### Sticky header and columns example
+
+```js file="./DataViewTableStickyExample.tsx"
+
+```
+
+### Interactive example
+- Interactive example show how the different composable options work together.
+- By toggling the toggles you can switch between them and observe the behaviour
+
+```js file="./DataViewTableInteractiveExample.tsx"
+
+```
+
 ### Resizable columns
 
 To allow a column to resize, add `isResizable` to the `DataViewTable` element, and pass `resizableProps` to each applicable header cell. The `resizableProps` object consists of the following fields:
@@ -149,7 +210,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 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`.
+You can create your error state by passing either the [component groups extension's error state](/extensions/component-groups/error-state) or a [PatternFly empty state](/components/empty-state) to the `error` key of `headStates` or `bodyStates`.
 
 ```js file="./DataViewTableErrorExample.tsx"
 
@@ -161,7 +222,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 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`.
+You can create your loading state by passing either the [component groups extension's skeleton table](/extensions/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/FiltersExample.tsx

@@ -89,7 +89,8 @@ const MyTable: React.FunctionComponent = () => {
         ouiaId='LayoutExampleFooter'
         pagination={
           <Pagination 
-            isCompact  
+            isCompact
+            variant="bottom"
             perPageOptions={perPageOptions} 
             itemCount={filteredData.length} 
             {...pagination} 

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

@@ -44,7 +44,7 @@ const MyTable: React.FunctionComponent = () => {
     <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} />} />
+      <DataViewToolbar ouiaId='DataViewFooter' pagination={<Pagination isCompact variant="bottom" perPageOptions={perPageOptions} itemCount={repositories.length} {...pagination} />} />
     </DataView>
   );
 };

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

@@ -12,7 +12,7 @@ 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']
+propComponents: ['DataViewToolbar', 'DataViewFilters', 'DataViewTextFilter', 'DataViewCheckboxFilter', 'DataViewTreeFilter']
 sourceLink: https://github.com/patternfly/react-data-view/blob/main/packages/module/patternfly-docs/content/extensions/data-view/examples/Toolbar/Toolbar.md
 ---
 import { useMemo, useState, useEffect } from 'react';
@@ -26,6 +26,7 @@ import { DataViewTable } from '@patternfly/react-data-view/dist/dynamic/DataView
 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';
+import { DataViewTreeFilter } from '@patternfly/react-data-view/dist/dynamic/DataViewTreeFilter';
 
 The **data view toolbar** component renders a default opinionated data view toolbar above or below the data section. 
 
@@ -44,7 +45,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 1 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](/extensions/component-groups/responsive-actions) which ensure the responsive behavior of multiple actions in 1 toolbar.
 
 ### Actions example
 
@@ -143,6 +144,12 @@ This example demonstrates the setup and usage of filters within the data view. I
 
 ```
 
+### Tree filter example
+This example demonstrates the usage of a tree filter with hierarchical data. The tree filter allows users to select items from a nested structure, making it ideal for categorized or grouped filtering options.
+
+```js file="./TreeFilterExample.tsx"
+
+```
 
 ## All/selected data switch
 All/selected data switch allows users to toggle between displaying the entire table (All) and only the rows they have selected (Selected). If the user deselects the last selected row, the filter automatically switches back to All, displaying all table rows again. Until at least one row is selected, a tooltip with guidance is displayed, and the Selected button does not perform any action. The Selected button is intentionally not disabled for accessibility reasons but instead has `aria-disabled` set.

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

@@ -0,0 +1,248 @@
+import React, { useMemo } from 'react';
+import { Pagination } from '@patternfly/react-core';
+import { BrowserRouter, useSearchParams } from 'react-router-dom';
+import { TreeViewDataItem } from '@patternfly/react-core';
+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 { DataViewFilters } from '@patternfly/react-data-view/dist/dynamic/DataViewFilters';
+import { DataViewTreeFilter } from '@patternfly/react-data-view/dist/dynamic/DataViewTreeFilter';
+
+const perPageOptions = [
+  { title: '5', value: 5 },
+  { title: '10', value: 10 }
+];
+
+interface Repository {
+  name: string;
+  workspace: string;
+  tags: string[];
+  os: string;
+  lastSeen: string;
+}
+
+interface RepositoryFilters {
+  name: string;
+  workspace: string[];
+  os: string[];
+  tags: string[];
+}
+
+const repositories: Repository[] = [
+  { name: 'Server-001', workspace: 'Development Workspace', tags: ['web', 'frontend'], os: 'Ubuntu 22.04', lastSeen: '2 hours ago' },
+  { name: 'Server-002', workspace: 'Development Workspace', tags: ['api', 'backend'], os: 'RHEL 9', lastSeen: '5 hours ago' },
+  { name: 'Server-003', workspace: 'Development Workspace', tags: ['database'], os: 'Windows Server 2022', lastSeen: '1 day ago' },
+  { name: 'Server-004', workspace: 'Production Workspace', tags: ['web', 'frontend'], os: 'Ubuntu 22.04', lastSeen: '30 minutes ago' },
+  { name: 'Server-005', workspace: 'Production Workspace', tags: ['api', 'backend'], os: 'Debian 12', lastSeen: '1 hour ago' },
+  { name: 'Server-006', workspace: 'Production Workspace', tags: ['monitoring'], os: 'macOS Ventura', lastSeen: '3 hours ago' },
+  { name: 'Server-007', workspace: 'Production Workspace', tags: ['cache'], os: 'macOS Sonoma', lastSeen: '2 days ago' },
+  { name: 'Server-008', workspace: 'Testing Workspace', tags: ['test', 'frontend'], os: 'CentOS 8', lastSeen: '6 hours ago' },
+  { name: 'Server-009', workspace: 'Testing Workspace', tags: ['test', 'backend'], os: 'Fedora 38', lastSeen: '4 hours ago' }
+];
+
+
+const osOptions: TreeViewDataItem[] = [
+  {
+    name: 'Linux',
+    id: 'os-linux',
+    checkProps: { 'aria-label': 'linux-check', checked: false },
+    children: [
+      {
+        name: 'Ubuntu 22.04',
+        id: 'os-ubuntu',
+        checkProps: { checked: false }
+      },
+      {
+        name: 'RHEL 9',
+        id: 'os-rhel',
+        checkProps: { checked: false }
+      },
+      {
+        name: 'Debian 12',
+        id: 'os-debian',
+        checkProps: { checked: false }
+      },
+      {
+        name: 'CentOS 8',
+        id: 'os-centos',
+        checkProps: { checked: false }
+      },
+      {
+        name: 'Fedora 38',
+        id: 'os-fedora',
+        checkProps: { checked: false }
+      }
+    ],
+    defaultExpanded: true
+  },
+  {
+    name: 'Windows',
+    id: 'os-windows',
+    checkProps: { 'aria-label': 'windows-check', checked: false },
+    children: [
+      {
+        name: 'Windows Server 2022',
+        id: 'os-windows-2022',
+        checkProps: { checked: false }
+      }
+    ]
+  },
+  {
+    name: 'macOS',
+    id: 'os-macos',
+    checkProps: { 'aria-label': 'macos-check', checked: false },
+    children: [
+      {
+        name: 'macOS Ventura',
+        id: 'os-macos-ventura',
+        checkProps: { checked: false }
+      },
+      {
+        name: 'macOS Sonoma',
+        id: 'os-macos-sonoma',
+        checkProps: { checked: false }
+      }
+    ]
+  }
+];
+
+const tagOptions: TreeViewDataItem[] = [
+  {
+    name: 'Environment',
+    id: 'tags-env',
+    checkProps: { 'aria-label': 'env-check', checked: false },
+    children: [
+      {
+        name: 'web',
+        id: 'tag-web',
+        checkProps: { checked: false }
+      },
+      {
+        name: 'api',
+        id: 'tag-api',
+        checkProps: { checked: false }
+      },
+      {
+        name: 'database',
+        id: 'tag-database',
+        checkProps: { checked: false }
+      }
+    ],
+    defaultExpanded: true
+  },
+  {
+    name: 'Layer',
+    id: 'tags-layer',
+    checkProps: { 'aria-label': 'layer-check', checked: false },
+    children: [
+      {
+        name: 'frontend',
+        id: 'tag-frontend',
+        checkProps: { checked: false }
+      },
+      {
+        name: 'backend',
+        id: 'tag-backend',
+        checkProps: { checked: false }
+      }
+    ]
+  },
+  {
+    name: 'Other',
+    id: 'tags-other',
+    checkProps: { 'aria-label': 'other-check', checked: false },
+    children: [
+      {
+        name: 'monitoring',
+        id: 'tag-monitoring',
+        checkProps: { checked: false }
+      },
+      {
+        name: 'cache',
+        id: 'tag-cache',
+        checkProps: { checked: false }
+      },
+      {
+        name: 'test',
+        id: 'tag-test',
+        checkProps: { checked: false }
+      }
+    ]
+  }
+];
+
+const columns = ['Name', 'Workspace', 'Tags', 'OS', 'Last seen'];
+
+const ouiaId = 'TreeFilterExample';
+
+const MyTable: React.FunctionComponent = () => {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const { filters, onSetFilters, clearAllFilters } = useDataViewFilters<RepositoryFilters>({
+    initialFilters: { name: '', workspace: [], os: [], tags: [] },
+    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.workspace || filters.workspace.length === 0 || filters.workspace.includes(item.workspace)) &&
+          (!filters.os || filters.os.length === 0 || filters.os.includes(item.os)) &&
+          (!filters.tags || filters.tags.length === 0 || filters.tags.some(tag => item.tags.includes(tag)))
+      ),
+    [filters]
+  );
+
+  const pageRows = useMemo(
+    () =>
+      filteredData
+        .slice((page - 1) * perPage, (page - 1) * perPage + perPage)
+        .map((item) => [item.name, item.workspace, item.tags.join(', '), item.os, item.lastSeen]),
+    [page, perPage, filteredData]
+  );
+
+  return (
+    <DataView>
+      <DataViewToolbar
+        ouiaId="TreeFilterExampleHeader"
+        clearAllFilters={clearAllFilters}
+        pagination={<Pagination perPageOptions={perPageOptions} itemCount={filteredData.length} {...pagination} />}
+        filters={
+          <DataViewFilters onChange={(_e, values) => onSetFilters(values)} values={filters}>
+            <DataViewTreeFilter
+              filterId="os"
+              title="Operating System"
+              items={osOptions}
+              defaultExpanded={false}
+            />
+            <DataViewTreeFilter
+              filterId="tags"
+              title="Tags"
+              items={tagOptions}
+              defaultExpanded={false}
+              defaultSelected={['tag-web', 'tag-api']}
+            />
+          </DataViewFilters>
+        }
+      />
+      <DataViewTable aria-label="Repositories table" ouiaId={ouiaId} columns={columns} rows={pageRows} />
+      <DataViewToolbar
+        ouiaId="TreeFilterExampleFooter"
+        pagination={
+          <Pagination isCompact variant="bottom" perPageOptions={perPageOptions} itemCount={filteredData.length} {...pagination} />
+        }
+      />
+    </DataView>
+  );
+};
+
+export const TreeFilterExample: React.FunctionComponent = () => (
+  <BrowserRouter>
+    <MyTable />
+  </BrowserRouter>
+);

package/patternfly-docs/patternfly-docs.config.js

@@ -2,5 +2,8 @@
 module.exports = {
   sideNavItems: [ { section: 'extensions' } ],
   topNavItems: [],
-  port: 8006
+  port: 8006,
+  hasThemeSwitcher: true,
+  hasHighContrastSwitcher: true,
+  hasRTLSwitcher: true,
 };

package/src/DataViewTable/DataViewTable.tsx

@@ -1,9 +1,11 @@
 import { FC, ReactNode } from 'react';
 import { TdProps, ThProps, TrProps, InnerScrollContainer } from '@patternfly/react-table';
 import { DataViewTableTree, DataViewTableTreeProps } from '../DataViewTableTree';
-import { DataViewTableBasic, DataViewTableBasicProps } from '../DataViewTableBasic';
+import { DataViewTableBasic, DataViewTableBasicProps, ExpandableContent } from '../DataViewTableBasic';
 import { DataViewThResizableProps } from '../DataViewTh/DataViewTh';
 
+export type { ExpandableContent };
+
 // Table head typings
 export type DataViewTh =
   | ReactNode