draft: tree filter

Author: fhlavac

package-lock.json

@@ -32,9 +32,9 @@
   },
   "dependencies": {
     "@patternfly/react-component-groups": "^6.1.0",
-    "@patternfly/react-core": "^6.0.0",
-    "@patternfly/react-icons": "^6.0.0",
-    "@patternfly/react-table": "^6.0.0",
+    "@patternfly/react-core": "^6.1.0",
+    "@patternfly/react-icons": "^6.1.0",
+    "@patternfly/react-table": "^6.1.0",
     "clsx": "^2.1.1",
     "react-jss": "^10.10.0"
   },
@@ -43,7 +43,7 @@
     "react-dom": "^17 || ^18"
   },
   "devDependencies": {
-    "@patternfly/documentation-framework": "^6.5.4",
+    "@patternfly/documentation-framework": "^6.5.8",
     "@patternfly/patternfly": "^6.0.0",
     "@patternfly/react-code-editor": "^6.0.0",
     "@patternfly/patternfly-a11y": "^5.0.0",

packages/module/package.json

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { Pagination } from '@patternfly/react-core';
+import { Pagination, TreeViewDataItem } 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';
@@ -8,6 +8,7 @@ import { DataViewToolbar } from '@patternfly/react-data-view/dist/dynamic/DataVi
 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';
+import { DataViewTreeFilter } from '@patternfly/react-data-view/dist/dynamic/DataViewTreeFilter';
 
 const perPageOptions = [
   { title: '5', value: 5 },
@@ -43,6 +44,61 @@ const filterOptions: DataViewFilterOption[] = [
   { label: 'Workspace three', value: 'workspace-three' }
 ];
 
+const statusOptions: TreeViewDataItem[] = [
+  {
+    name: 'Ready',
+    id: 'ready',
+    checkProps: { checked: false },
+    customBadgeContent: 1,
+    children: [
+      {
+        name: 'Updated',
+        id: 'updated',
+        checkProps: { checked: false },
+        customBadgeContent: 0
+      },
+      {
+        name: 'Waiting to update',
+        id: 'waiting',
+        checkProps: { checked: false },
+        customBadgeContent: 0
+      },
+      {
+        name: 'Conditions degraded',
+        id: 'degraded',
+        checkProps: { checked: false },
+        customBadgeContent: 1
+      },
+      {
+        name: 'Approval required',
+        id: 'approval',
+        checkProps: { checked: false },
+        customBadgeContent: 0
+      }
+    ]
+  },
+  {
+    name: 'Not ready',
+    id: 'nr',
+    checkProps: { checked: false },
+    customBadgeContent: 1,
+    children: [
+      {
+        name: 'Conditions degraded',
+        id: 'nr-degraded',
+        checkProps: { checked: false },
+        customBadgeContent: 1
+      }
+    ]
+  },
+  {
+    name: 'Updating',
+    id: 'updating',
+    checkProps: { checked: false },
+    customBadgeContent: 0
+  }
+];
+
 const columns = [ 'Name', 'Branch', 'Pull requests', 'Workspace', 'Last commit' ];
 
 const ouiaId = 'LayoutExample';
@@ -81,6 +137,7 @@ const MyTable: React.FunctionComponent = () => {
             <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} />
+            <DataViewTreeFilter filterId="status" title='Status' placeholder='Filter by status' options={statusOptions} />
           </DataViewFilters>
         }
       />

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

@@ -25,6 +25,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.