@patternfly/react-data-view 6.3.0 → 6.4.0-prerelease.10

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

@@ -0,0 +1,155 @@
+import { FunctionComponent } from 'react';
+import { DataViewTable, DataViewTr, DataViewTh } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
+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;
+}
+
+const repositories: Repository[] = [
+  {
+    id: 1,
+    name: 'Repository one',
+    branches: 'Branch one',
+    prs: 'Pull request one',
+    workspaces: 'Workspace one',
+    lastCommit: 'Timestamp one'
+  },
+  {
+    id: 2,
+    name: 'Repository two',
+    branches: 'Branch two',
+    prs: 'Pull request two',
+    workspaces: 'Workspace two',
+    lastCommit: 'Timestamp two'
+  },
+  {
+    id: 3,
+    name: 'Repository three',
+    branches: 'Branch three',
+    prs: 'Pull request three',
+    workspaces: 'Workspace three',
+    lastCommit: 'Timestamp three'
+  },
+  {
+    id: 4,
+    name: 'Repository four',
+    branches: 'Branch four',
+    prs: 'Pull request four',
+    workspaces: 'Workspace four',
+    lastCommit: 'Timestamp four'
+  },
+  {
+    id: 5,
+    name: 'Repository five',
+    branches: 'Branch five',
+    prs: 'Pull request five',
+    workspaces: 'Workspace five',
+    lastCommit: 'Timestamp five'
+  },
+  {
+    id: 6,
+    name: 'Repository six',
+    branches: 'Branch six',
+    prs: 'Pull request six',
+    workspaces: 'Workspace six',
+    lastCommit: 'Timestamp six'
+  }
+];
+
+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
+  }
+];
+
+// you can also pass props to Tr by returning { row: DataViewTd[], props: TrProps } }
+const rows: DataViewTr[] = repositories.map(({ id, name, branches, prs, workspaces, lastCommit }) => [
+  { id, cell: workspaces, props: { favorites: { isFavorited: true } } },
+  {
+    cell: (
+      <Button href="#" variant="link" isInline>
+        {name}
+      </Button>
+    )
+  },
+  branches,
+  prs,
+  workspaces,
+  lastCommit,
+  { cell: <ActionsColumn items={rowActions} />, props: { isActionCell: true } }
+]);
+
+const ouiaId = 'TableExample';
+
+export const ResizableColumnsExample: FunctionComponent = () => {
+  const onResize = (
+    _e: React.MouseEvent | MouseEvent | React.KeyboardEvent | KeyboardEvent | TouchEvent,
+    id: string | number | undefined,
+    width: number
+  ) => {
+    // eslint-disable-next-line no-console
+    console.log(`resized column id: ${id} width to: ${width.toFixed(0)}px`);
+  };
+
+  const columns: DataViewTh[] = [
+    null,
+    'Repositories',
+    {
+      cell: 'Branches',
+      resizableProps: {
+        isResizable: true,
+        onResize,
+        resizeButtonAriaLabel: 'Resize repositories column'
+      },
+      props: { id: 'repositories' }
+    },
+    {
+      cell: 'Pull requests',
+      resizableProps: {
+        isResizable: true,
+        onResize,
+        resizeButtonAriaLabel: 'Resize pull requests column'
+      },
+      props: { info: { tooltip: 'More information' }, id: 'pull-requests' }
+    },
+    {
+      cell: 'This is a really long title',
+      resizableProps: {
+        isResizable: true,
+        onResize,
+        resizeButtonAriaLabel: 'Resize this is a really long title column'
+      },
+      props: { info: { tooltip: 'More information' }, id: 'this-is-a-really-long-title' }
+    },
+    {
+      cell: 'Last commit',
+      resizableProps: {
+        isResizable: true,
+        onResize,
+        resizeButtonAriaLabel: 'Resize last commit column'
+      },
+      props: { sort: { sortBy: {}, columnIndex: 4 }, id: 'last-commit' }
+    }
+  ];
+
+  return <DataViewTable isResizable aria-label="Repositories table" ouiaId={ouiaId} columns={columns} rows={rows} />;
+};

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/DataViewTableTreeExample.tsx

@@ -4,6 +4,7 @@ import { DataViewTable, DataViewTh, DataViewTrTree } from '@patternfly/react-dat
 import { useDataViewSelection } from '@patternfly/react-data-view/dist/dynamic/Hooks';
 import { FolderIcon, FolderOpenIcon, LeafIcon } from '@patternfly/react-icons';
 
+
 interface Repository {
   name: string;
   branches: string | null;

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

@@ -12,10 +12,19 @@ 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']
+propComponents:
+  [
+    'DataViewTableBasic',
+    'DataViewTableTree',
+    'DataViewTrTree',
+    'DataViewTrObject',
+    'DataViewTh',
+    'DataViewThResizableProps'
+  ]
 sourceLink: https://github.com/patternfly/react-data-view/blob/main/packages/module/patternfly-docs/content/extensions/data-view/examples/Table/Table.md
 ---
-import { FunctionComponent, useMemo } from 'react';
+
+import { FunctionComponent, useMemo, useState } 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';
@@ -28,7 +37,9 @@ import { DataView, DataViewState } from '@patternfly/react-data-view/dist/dynami
 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.
@@ -39,21 +50,102 @@ To define rows and columns for your table, use these props:
 
 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.
 
+If you want to have all expandable nodes open on initial load pass the `expandAll` prop to the DataViewTable component
+
 ### Table example
+
 ```js file="./DataViewTableExample.tsx"
 
 ```
 
+## 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:
+
+- `isResizable` - indicates that the column is resizable
+- `resizeButtonAriaLabel` - an accessible name for the resizable column's resize button. This must be passed in if the column is resizable.
+- `onResize` - a callback that will return the source event and the new width of the column
+- `width` - a default width value for a column
+- `minWidth` - the minimum width a column may shrink to
+- `increment` - how many pixels the column will move left or right for keyboard navigation
+- `shiftIncrement` - how many pixels the column will move left or right while shift is held for keyboard navigation
+- `screenReaderText` - text that will be announced when a column is resized
+
+```js file="./DataViewTableResizableColumnsExample.tsx"
+
+```
+
 ## Tree table
 
-A tree table includes expandable rows and custom icons for leaf and parent nodes. 
+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.
+
+- `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>`.
 
@@ -66,17 +158,21 @@ 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 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`).
@@ -86,44 +182,47 @@ The `useDataViewSort` hook manages the sorting state of a data view and provides
 - 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.
+    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. 
+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`. 
+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`. 
+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"
 
 ```
 
 ### 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`. 
-
+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/SelectionExample.tsx

@@ -1,6 +1,7 @@
 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 { Button } from '@patternfly/react-core';
 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';
@@ -30,13 +31,18 @@ const ouiaId = 'LayoutExample';
 
 export const BasicExample: React.FunctionComponent = () => { 
   const selection = useDataViewSelection({ matchOption: (a, b) => a[0] === b[0] });
-  const { selected, onSelect } = selection;
+  const { selected, onSelect, setSelected } = selection;
 
   const handleBulkSelect = (value: BulkSelectValue) => {
     value === BulkSelectValue.none && onSelect(false);
     value === BulkSelectValue.all && onSelect(true, rows);
   };
 
+  // Example: Select first two rows programmatically using setSelected
+  const handleSelectFirstTwo = () => {
+    setSelected(rows.slice(0, 2));
+  };
+
   return (
     <DataView selection={selection}>
       <DataViewToolbar 
@@ -49,9 +55,14 @@ export const BasicExample: React.FunctionComponent = () => {
             selectedCount={selected.length}
             onSelect={handleBulkSelect}
           />
-        } 
+        }
+        actions={
+          <Button variant="secondary" onClick={handleSelectFirstTwo}>
+            Select First Two
+          </Button>
+        }
       />
       <DataViewTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={rows} />
     </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
 
@@ -105,6 +106,7 @@ The `useDataViewSelection` hook manages the selection state of the data view.
 - `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).
+- `setSelected` function to directly set the selected items array. This is useful for programmatically setting a specific selection state without needing to use the `onSelect` callback.
 
 ### Selection example
 
@@ -142,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.