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

package/dist/esm/DataViewTreeFilter/DataViewTreeFilter.test.js

@@ -0,0 +1,166 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
+import DataViewTreeFilter from './DataViewTreeFilter';
+import DataViewToolbar from '../DataViewToolbar';
+describe('DataViewTreeFilter component', () => {
+    const treeItems = [
+        {
+            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 defaultProps = {
+        filterId: 'test-tree-filter',
+        title: 'Test Tree Filter',
+        value: ['Linux'],
+        items: treeItems
+    };
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+    it('should render correctly', () => {
+        const { container } = render(_jsx(DataViewToolbar, { filters: _jsx(DataViewTreeFilter, Object.assign({}, defaultProps)) }));
+        expect(container).toMatchSnapshot();
+    });
+    describe('defaultExpanded', () => {
+        it('should have expanded items by default', () => __awaiter(void 0, void 0, void 0, function* () {
+            render(_jsx(DataViewToolbar, { filters: _jsx(DataViewTreeFilter, { filterId: "os", title: "Operating System", items: treeItems, defaultExpanded: true }) }));
+            const openMenu = screen.getByRole('button', { name: /operating system/i });
+            yield userEvent.click(openMenu);
+            yield waitFor(() => {
+                const node = screen.getByText('Ubuntu 22.04');
+                expect(node).toHaveClass('pf-v6-c-tree-view__node-text');
+                expect(node).toBeInTheDocument();
+            });
+        }));
+    });
+    describe('onChange callback', () => {
+        it('onChange should be called on toggle of node', () => __awaiter(void 0, void 0, void 0, function* () {
+            const mockOnChange = jest.fn();
+            render(_jsx(DataViewToolbar, { filters: _jsx(DataViewTreeFilter, { filterId: "os", title: "Operating System", items: treeItems, defaultExpanded: true, onChange: mockOnChange }) }));
+            const openMenu = screen.getByRole('button', { name: /operating system/i });
+            yield userEvent.click(openMenu);
+            yield waitFor(() => {
+                const node = screen.getByText('Ubuntu 22.04');
+                expect(node).toBeInTheDocument();
+            });
+            const node = screen.getByText('Ubuntu 22.04');
+            yield userEvent.click(node);
+            yield waitFor(() => {
+                expect(mockOnChange).toHaveBeenCalled();
+            });
+        }));
+    });
+    describe('onSelect callback', () => {
+        it('onSelect should return list of selected items when item is selected', () => __awaiter(void 0, void 0, void 0, function* () {
+            const mockOnSelect = jest.fn();
+            render(_jsx(DataViewToolbar, { filters: _jsx(DataViewTreeFilter, { filterId: "os", title: "Operating System", items: treeItems, defaultExpanded: true, onSelect: mockOnSelect }) }));
+            const openMenu = screen.getByRole('button', { name: /operating system/i });
+            yield userEvent.click(openMenu);
+            yield waitFor(() => {
+                const node = screen.getByText('Ubuntu 22.04');
+                expect(node).toBeInTheDocument();
+            });
+            const node = screen.getByText('Ubuntu 22.04');
+            yield userEvent.click(node);
+            yield waitFor(() => {
+                expect(mockOnSelect).toHaveBeenCalled();
+                expect(mockOnSelect).toHaveBeenCalledWith(expect.arrayContaining([
+                    expect.objectContaining({
+                        name: 'Ubuntu 22.04',
+                        id: 'os-ubuntu'
+                    })
+                ]));
+            });
+        }));
+    });
+    describe('rendering all items', () => {
+        it('all tree items should be rendered', () => __awaiter(void 0, void 0, void 0, function* () {
+            render(_jsx(DataViewToolbar, { filters: _jsx(DataViewTreeFilter, { filterId: "os", title: "Operating System", items: treeItems, defaultExpanded: true }) }));
+            const openMenu = screen.getByRole('button', { name: /operating system/i });
+            yield userEvent.click(openMenu);
+            yield waitFor(() => {
+                expect(screen.getByText('Linux')).toBeInTheDocument();
+                expect(screen.getByText('Windows')).toBeInTheDocument();
+                expect(screen.getByText('macOS')).toBeInTheDocument();
+                expect(screen.getByText('Ubuntu 22.04')).toBeInTheDocument();
+                expect(screen.getByText('RHEL 9')).toBeInTheDocument();
+                expect(screen.getByText('Debian 12')).toBeInTheDocument();
+                expect(screen.getByText('CentOS 8')).toBeInTheDocument();
+                expect(screen.getByText('Fedora 38')).toBeInTheDocument();
+                expect(screen.getByText('Windows Server 2022')).toBeInTheDocument();
+                expect(screen.getByText('macOS Ventura')).toBeInTheDocument();
+                expect(screen.getByText('macOS Sonoma')).toBeInTheDocument();
+            });
+        }));
+    });
+});

package/dist/esm/DataViewTreeFilter/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './DataViewTreeFilter';
+export * from './DataViewTreeFilter';

package/dist/esm/DataViewTreeFilter/index.js

@@ -0,0 +1,2 @@
+export { default } from './DataViewTreeFilter';
+export * from './DataViewTreeFilter';

package/dist/esm/Hooks/selection.d.ts

@@ -1,12 +1,12 @@
-export interface UseDataViewSelectionProps {
+export interface UseDataViewSelectionProps<T = any> {
     /** Function to compare items when checking if item is selected */
-    matchOption: (item: any, another: any) => boolean;
+    matchOption: (item: T, another: T) => boolean;
     /** Array of initially selected entries */
-    initialSelected?: (any)[];
+    initialSelected?: (T)[];
 }
-export declare const useDataViewSelection: (props?: UseDataViewSelectionProps) => {
-    selected: any[];
-    onSelect: (isSelecting: boolean, items?: any[] | any) => void;
-    isSelected: (item: any) => boolean;
-    setSelected: (items: any[]) => void;
+export declare const useDataViewSelection: <T = any>(props?: UseDataViewSelectionProps<T>) => {
+    selected: T[];
+    onSelect: (isSelecting: boolean, items?: T[] | T) => void;
+    isSelected: (item: T) => boolean;
+    setSelected: (items: T[]) => void;
 };

package/dist/esm/index.d.ts

@@ -1,6 +1,8 @@
 export { default as InternalContext } from './InternalContext';
 export * from './InternalContext';
 export * from './Hooks';
+export { default as DataViewTreeFilter } from './DataViewTreeFilter';
+export * from './DataViewTreeFilter';
 export { default as DataViewToolbar } from './DataViewToolbar';
 export * from './DataViewToolbar';
 export { default as DataViewTh } from './DataViewTh';

package/dist/esm/index.js

@@ -2,6 +2,8 @@
 export { default as InternalContext } from './InternalContext';
 export * from './InternalContext';
 export * from './Hooks';
+export { default as DataViewTreeFilter } from './DataViewTreeFilter';
+export * from './DataViewTreeFilter';
 export { default as DataViewToolbar } from './DataViewToolbar';
 export * from './DataViewToolbar';
 export { default as DataViewTh } from './DataViewTh';

package/dist/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["../src/index.ts","../src/DataView/DataView.test.tsx","../src/DataView/DataView.tsx","../src/DataView/index.ts","../src/DataViewCheckboxFilter/DataViewCheckboxFilter.test.tsx","../src/DataViewCheckboxFilter/DataViewCheckboxFilter.tsx","../src/DataViewCheckboxFilter/index.ts","../src/DataViewEventsContext/DataViewEventsContext.test.tsx","../src/DataViewEventsContext/DataViewEventsContext.tsx","../src/DataViewEventsContext/index.ts","../src/DataViewFilters/DataViewFilters.test.tsx","../src/DataViewFilters/DataViewFilters.tsx","../src/DataViewFilters/index.tsx","../src/DataViewTable/DataViewTable.test.tsx","../src/DataViewTable/DataViewTable.tsx","../src/DataViewTable/index.ts","../src/DataViewTableBasic/DataViewTableBasic.test.tsx","../src/DataViewTableBasic/DataViewTableBasic.tsx","../src/DataViewTableBasic/index.ts","../src/DataViewTableHead/DataViewTableHead.test.tsx","../src/DataViewTableHead/DataViewTableHead.tsx","../src/DataViewTableHead/index.ts","../src/DataViewTableTree/DataViewTableTree.test.tsx","../src/DataViewTableTree/DataViewTableTree.tsx","../src/DataViewTableTree/index.ts","../src/DataViewTextFilter/DataViewTextFilter.test.tsx","../src/DataViewTextFilter/DataViewTextFilter.tsx","../src/DataViewTextFilter/index.ts","../src/DataViewTh/DataViewTh.tsx","../src/DataViewTh/index.ts","../src/DataViewToolbar/DataViewToolbar.test.tsx","../src/DataViewToolbar/DataViewToolbar.tsx","../src/DataViewToolbar/index.ts","../src/Hooks/filters.test.tsx","../src/Hooks/filters.ts","../src/Hooks/index.ts","../src/Hooks/pagination.test.tsx","../src/Hooks/pagination.ts","../src/Hooks/selection.test.tsx","../src/Hooks/selection.ts","../src/Hooks/sort.test.tsx","../src/Hooks/sort.ts","../src/InternalContext/InternalContext.test.tsx","../src/InternalContext/InternalContext.tsx","../src/InternalContext/index.ts"],"version":"5.9.3"}
+{"root":["../src/index.ts","../src/DataView/DataView.test.tsx","../src/DataView/DataView.tsx","../src/DataView/index.ts","../src/DataViewCheckboxFilter/DataViewCheckboxFilter.test.tsx","../src/DataViewCheckboxFilter/DataViewCheckboxFilter.tsx","../src/DataViewCheckboxFilter/index.ts","../src/DataViewEventsContext/DataViewEventsContext.test.tsx","../src/DataViewEventsContext/DataViewEventsContext.tsx","../src/DataViewEventsContext/index.ts","../src/DataViewFilters/DataViewFilters.test.tsx","../src/DataViewFilters/DataViewFilters.tsx","../src/DataViewFilters/index.tsx","../src/DataViewTable/DataViewTable.test.tsx","../src/DataViewTable/DataViewTable.tsx","../src/DataViewTable/index.ts","../src/DataViewTableBasic/DataViewTableBasic.test.tsx","../src/DataViewTableBasic/DataViewTableBasic.tsx","../src/DataViewTableBasic/index.ts","../src/DataViewTableHead/DataViewTableHead.test.tsx","../src/DataViewTableHead/DataViewTableHead.tsx","../src/DataViewTableHead/index.ts","../src/DataViewTableTree/DataViewTableTree.test.tsx","../src/DataViewTableTree/DataViewTableTree.tsx","../src/DataViewTableTree/index.ts","../src/DataViewTextFilter/DataViewTextFilter.test.tsx","../src/DataViewTextFilter/DataViewTextFilter.tsx","../src/DataViewTextFilter/index.ts","../src/DataViewTh/DataViewTh.tsx","../src/DataViewTh/index.ts","../src/DataViewToolbar/DataViewToolbar.test.tsx","../src/DataViewToolbar/DataViewToolbar.tsx","../src/DataViewToolbar/index.ts","../src/DataViewTreeFilter/DataViewTreeFilter.test.tsx","../src/DataViewTreeFilter/DataViewTreeFilter.tsx","../src/DataViewTreeFilter/index.ts","../src/Hooks/filters.test.tsx","../src/Hooks/filters.ts","../src/Hooks/index.ts","../src/Hooks/pagination.test.tsx","../src/Hooks/pagination.ts","../src/Hooks/selection.test.tsx","../src/Hooks/selection.ts","../src/Hooks/sort.test.tsx","../src/Hooks/sort.ts","../src/InternalContext/InternalContext.test.tsx","../src/InternalContext/InternalContext.tsx","../src/InternalContext/index.ts"],"version":"5.9.3"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-data-view",
-  "version": "6.4.0-prerelease.9",
+  "version": "6.5.0-prerelease.1",
   "description": "Data view used for Red Hat projects.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/patternfly-docs/content/extensions/data-view/examples/DataView/PredefinedLayoutFullExample.tsx

@@ -244,7 +244,8 @@ const RepositoriesTable: FunctionComponent<RepositoriesTableProps> = ({ selected
         ouiaId='LayoutExampleFooter'
         pagination={
           <Pagination 
-            isCompact  
+            isCompact
+            variant="bottom"
             perPageOptions={perPageOptions} 
             itemCount={repositories.length} 
             {...pagination} 

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. 
 
@@ -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>
+);