@patternfly/react-data-view 5.5.1 → 5.7.0

package/dist/esm/DataViewFilters/DataViewFilters.js

@@ -26,6 +26,19 @@ export const DataViewFilters = (_a) => {
     useEffect(() => {
         filterItems.length > 0 && setActiveAttributeMenu(filterItems[0].title);
     }, [filterItems]);
+    const handleClickOutside = (event) => {
+        var _a, _b;
+        return isAttributeMenuOpen &&
+            !((_a = attributeMenuRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) &&
+            !((_b = attributeToggleRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target))
+            && setIsAttributeMenuOpen(false);
+    };
+    useEffect(() => {
+        window.addEventListener('click', handleClickOutside);
+        return () => {
+            window.removeEventListener('click', handleClickOutside);
+        };
+    }, [isAttributeMenuOpen]); // eslint-disable-line react-hooks/exhaustive-deps
     const attributeToggle = (React.createElement(MenuToggle, { ref: attributeToggleRef, onClick: () => setIsAttributeMenuOpen(!isAttributeMenuOpen), isExpanded: isAttributeMenuOpen, icon: toggleIcon }, activeAttributeMenu));
     const attributeMenu = (React.createElement(Menu, { ref: attributeMenuRef, onSelect: (_ev, itemId) => {
             const selectedItem = filterItems.find(item => item.filterId === itemId);
@@ -38,6 +51,8 @@ export const DataViewFilters = (_a) => {
         React.createElement(ToolbarGroup, { variant: "filter-group" },
             React.createElement("div", { ref: attributeContainerRef },
                 React.createElement(Popper, { trigger: attributeToggle, triggerRef: attributeToggleRef, popper: attributeMenu, popperRef: attributeMenuRef, appendTo: attributeContainerRef.current || undefined, isVisible: isAttributeMenuOpen })),
-            React.Children.map(children, (child) => (React.isValidElement(child) ? (React.cloneElement(child, Object.assign({ showToolbarItem: activeAttributeMenu === child.props.title, onChange: (event, value) => onChange === null || onChange === void 0 ? void 0 : onChange(event, { [child.props.filterId]: value }), value: values === null || values === void 0 ? void 0 : values[child.props.filterId] }, child.props))) : child)))));
+            React.Children.map(children, (child) => React.isValidElement(child)
+                ? React.cloneElement(child, Object.assign({ showToolbarItem: activeAttributeMenu === child.props.title, onChange: (event, value) => onChange === null || onChange === void 0 ? void 0 : onChange(event, { [child.props.filterId]: value }), value: values === null || values === void 0 ? void 0 : values[child.props.filterId] }, child.props))
+                : child))));
 };
 export default DataViewFilters;

package/dist/esm/DataViewTextFilter/DataViewTextFilter.js

@@ -13,7 +13,7 @@ import React from 'react';
 import { SearchInput, ToolbarFilter } from '@patternfly/react-core';
 export const DataViewTextFilter = (_a) => {
     var { filterId, title, value = '', onChange, onClear = () => onChange === null || onChange === void 0 ? void 0 : onChange(undefined, ''), showToolbarItem, trimValue = true, ouiaId = 'DataViewTextFilter' } = _a, props = __rest(_a, ["filterId", "title", "value", "onChange", "onClear", "showToolbarItem", "trimValue", "ouiaId"]);
-    return (React.createElement(ToolbarFilter, { "data-ouia-component-id": ouiaId, chips: value.length > 0 ? [{ key: title, node: value }] : [], deleteChip: () => onChange === null || onChange === void 0 ? void 0 : onChange(undefined, ''), categoryName: title, showToolbarItem: showToolbarItem },
+    return (React.createElement(ToolbarFilter, { key: ouiaId, "data-ouia-component-id": ouiaId, chips: value.length > 0 ? [{ key: title, node: value }] : [], deleteChip: () => onChange === null || onChange === void 0 ? void 0 : onChange(undefined, ''), categoryName: title, showToolbarItem: showToolbarItem },
         React.createElement(SearchInput, Object.assign({ searchInputId: filterId, value: value, onChange: (e, inputValue) => onChange === null || onChange === void 0 ? void 0 : onChange(e, trimValue ? inputValue.trim() : inputValue), onClear: onClear, placeholder: `Filter by ${title}`, "aria-label": `${title !== null && title !== void 0 ? title : filterId} filter`, "data-ouia-component-id": `${ouiaId}-input` }, props))));
 };
 export default DataViewTextFilter;

package/dist/esm/Hooks/filters.js

@@ -2,25 +2,24 @@ import { useState, useCallback, useEffect, useMemo } from "react";
 ;
 export const useDataViewFilters = ({ initialFilters = {}, searchParams, setSearchParams, }) => {
     const isUrlSyncEnabled = useMemo(() => searchParams && !!setSearchParams, [searchParams, setSearchParams]);
-    const getInitialFilters = useCallback(() => isUrlSyncEnabled ? Object.keys(initialFilters).reduce((loadedFilters, key) => {
-        const urlValue = searchParams === null || searchParams === void 0 ? void 0 : searchParams.get(key);
-        loadedFilters[key] = urlValue
-            ? urlValue
-            : initialFilters[key];
-        return loadedFilters;
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, Object.assign({}, initialFilters)) : initialFilters, [isUrlSyncEnabled, JSON.stringify(initialFilters), searchParams === null || searchParams === void 0 ? void 0 : searchParams.toString()]);
+    const getInitialFilters = useCallback(() => isUrlSyncEnabled
+        ? Object.keys(initialFilters).reduce((loadedFilters, key) => {
+            const urlValue = searchParams === null || searchParams === void 0 ? void 0 : searchParams.get(key);
+            const isArrayFilter = Array.isArray(initialFilters[key]);
+            // eslint-disable-next-line no-nested-ternary
+            loadedFilters[key] = urlValue
+                ? (isArrayFilter && !Array.isArray(urlValue) ? [urlValue] : urlValue)
+                : initialFilters[key];
+            return loadedFilters;
+        }, Object.assign({}, initialFilters))
+        : initialFilters, [isUrlSyncEnabled, initialFilters, searchParams]);
     const [filters, setFilters] = useState(getInitialFilters());
     const updateSearchParams = useCallback((newFilters) => {
         if (isUrlSyncEnabled) {
             const params = new URLSearchParams(searchParams);
             Object.entries(newFilters).forEach(([key, value]) => {
-                if (value) {
-                    params.set(key, Array.isArray(value) ? value.join(',') : value);
-                }
-                else {
-                    params.delete(key);
-                }
+                params.delete(key);
+                (Array.isArray(value) ? value : [value]).forEach((val) => value && params.append(key, val));
             });
             setSearchParams === null || setSearchParams === void 0 ? void 0 : setSearchParams(params);
         }

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

@@ -1,3 +1,4 @@
 export * from './pagination';
 export * from './selection';
 export * from './filters';
+export * from './sort';

package/dist/esm/Hooks/index.js

@@ -1,3 +1,4 @@
 export * from './pagination';
 export * from './selection';
 export * from './filters';
+export * from './sort';

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

@@ -0,0 +1,32 @@
+import { ISortBy } from "@patternfly/react-table";
+export declare enum DataViewSortParams {
+    SORT_BY = "sortBy",
+    DIRECTION = "direction"
+}
+export interface DataViewSortConfig {
+    /** Attribute to sort the entries by */
+    sortBy: string | undefined;
+    /** Sort direction */
+    direction: ISortBy['direction'];
+}
+export interface UseDataViewSortProps {
+    /** Initial sort config */
+    initialSort?: DataViewSortConfig;
+    /** Current search parameters as a string */
+    searchParams?: URLSearchParams;
+    /** Function to set search parameters */
+    setSearchParams?: (params: URLSearchParams) => void;
+    /** Default direction */
+    defaultDirection?: ISortBy['direction'];
+    /** Sort by URL param name */
+    sortByParam?: string;
+    /** Direction URL param name */
+    directionParam?: string;
+}
+export declare const useDataViewSort: (props?: UseDataViewSortProps) => {
+    onSort: (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent | undefined, newSortBy: string, newSortDirection: ISortBy['direction']) => void;
+    /** Attribute to sort the entries by */
+    sortBy: string | undefined;
+    /** Sort direction */
+    direction: ISortBy['direction'];
+};

package/dist/esm/Hooks/sort.js

@@ -0,0 +1,43 @@
+import { useState, useEffect, useMemo } from "react";
+export var DataViewSortParams;
+(function (DataViewSortParams) {
+    DataViewSortParams["SORT_BY"] = "sortBy";
+    DataViewSortParams["DIRECTION"] = "direction";
+})(DataViewSortParams || (DataViewSortParams = {}));
+;
+const validateDirection = (direction, defaultDirection) => (direction === 'asc' || direction === 'desc' ? direction : defaultDirection);
+;
+;
+export const useDataViewSort = (props) => {
+    var _a;
+    const { initialSort, searchParams, setSearchParams, defaultDirection = 'asc', sortByParam = DataViewSortParams.SORT_BY, directionParam = DataViewSortParams.DIRECTION } = props !== null && props !== void 0 ? props : {};
+    const isUrlSyncEnabled = useMemo(() => searchParams && !!setSearchParams, [searchParams, setSearchParams]);
+    const [state, setState] = useState({
+        sortBy: (_a = searchParams === null || searchParams === void 0 ? void 0 : searchParams.get(sortByParam)) !== null && _a !== void 0 ? _a : initialSort === null || initialSort === void 0 ? void 0 : initialSort.sortBy,
+        direction: validateDirection(searchParams === null || searchParams === void 0 ? void 0 : searchParams.get(directionParam), initialSort === null || initialSort === void 0 ? void 0 : initialSort.direction),
+    });
+    const updateSearchParams = (sortBy, direction) => {
+        if (isUrlSyncEnabled && sortBy) {
+            const params = new URLSearchParams(searchParams);
+            params.set(sortByParam, `${sortBy}`);
+            params.set(directionParam, `${direction}`);
+            setSearchParams === null || setSearchParams === void 0 ? void 0 : setSearchParams(params);
+        }
+    };
+    useEffect(() => {
+        state.sortBy && state.direction && updateSearchParams(state.sortBy, state.direction);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    useEffect(() => {
+        const currentSortBy = (searchParams === null || searchParams === void 0 ? void 0 : searchParams.get(sortByParam)) || state.sortBy;
+        const currentDirection = (searchParams === null || searchParams === void 0 ? void 0 : searchParams.get(directionParam)) || state.direction;
+        const validDirection = validateDirection(currentDirection, defaultDirection);
+        currentSortBy !== state.sortBy || validDirection !== state.direction && setState({ sortBy: currentSortBy, direction: validDirection });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [searchParams === null || searchParams === void 0 ? void 0 : searchParams.toString()]);
+    const onSort = (_event, newSortBy, newSortDirection) => {
+        setState({ sortBy: newSortBy, direction: newSortDirection });
+        updateSearchParams(newSortBy, newSortDirection);
+    };
+    return Object.assign(Object.assign({}, state), { onSort });
+};

package/dist/esm/Hooks/sort.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/esm/Hooks/sort.test.js

@@ -0,0 +1,66 @@
+import '@testing-library/jest-dom';
+import { renderHook, act } from '@testing-library/react';
+import { useDataViewSort, DataViewSortParams } from './sort';
+describe('useDataViewSort', () => {
+    const initialSort = { sortBy: 'name', direction: 'asc' };
+    it('should initialize with provided initial sort config', () => {
+        const { result } = renderHook(() => useDataViewSort({ initialSort }));
+        expect(result.current).toEqual(expect.objectContaining(initialSort));
+    });
+    it('should initialize with empty sort config if no initialSort is provided', () => {
+        const { result } = renderHook(() => useDataViewSort());
+        expect(result.current).toEqual(expect.objectContaining({ sortBy: undefined, direction: 'asc' }));
+    });
+    it('should update sort state when onSort is called', () => {
+        const { result } = renderHook(() => useDataViewSort({ initialSort }));
+        act(() => {
+            result.current.onSort(undefined, 'age', 'desc');
+        });
+        expect(result.current).toEqual(expect.objectContaining({ sortBy: 'age', direction: 'desc' }));
+    });
+    it('should sync with URL search params if isUrlSyncEnabled', () => {
+        const searchParams = new URLSearchParams();
+        const setSearchParams = jest.fn();
+        const props = {
+            initialSort,
+            searchParams,
+            setSearchParams,
+        };
+        const { result } = renderHook(() => useDataViewSort(props));
+        expect(setSearchParams).toHaveBeenCalledTimes(1);
+        expect(result.current).toEqual(expect.objectContaining(initialSort));
+    });
+    it('should validate direction and fallback to default direction if invalid direction is provided', () => {
+        const searchParams = new URLSearchParams();
+        searchParams.set(DataViewSortParams.SORT_BY, 'name');
+        searchParams.set(DataViewSortParams.DIRECTION, 'invalid-direction');
+        const { result } = renderHook(() => useDataViewSort({ searchParams, defaultDirection: 'desc' }));
+        expect(result.current).toEqual(expect.objectContaining({ sortBy: 'name', direction: 'desc' }));
+    });
+    it('should update search params when URL sync is enabled and sort changes', () => {
+        const searchParams = new URLSearchParams();
+        const setSearchParams = jest.fn();
+        const props = {
+            initialSort,
+            searchParams,
+            setSearchParams,
+        };
+        const { result } = renderHook(() => useDataViewSort(props));
+        act(() => {
+            expect(setSearchParams).toHaveBeenCalledTimes(1);
+            result.current.onSort(undefined, 'priority', 'desc');
+        });
+        expect(setSearchParams).toHaveBeenCalledTimes(2);
+        expect(result.current).toEqual(expect.objectContaining({ sortBy: 'priority', direction: 'desc' }));
+    });
+    it('should prioritize searchParams values', () => {
+        const searchParams = new URLSearchParams();
+        searchParams.set(DataViewSortParams.SORT_BY, 'category');
+        searchParams.set(DataViewSortParams.DIRECTION, 'desc');
+        const { result } = renderHook((props) => useDataViewSort(props), { initialProps: { initialSort, searchParams } });
+        expect(result.current).toEqual(expect.objectContaining({
+            sortBy: 'category',
+            direction: 'desc',
+        }));
+    });
+});

package/dist/esm/index.d.ts

@@ -15,5 +15,7 @@ export { default as DataViewTable } from './DataViewTable';
 export * from './DataViewTable';
 export { default as DataViewEventsContext } from './DataViewEventsContext';
 export * from './DataViewEventsContext';
+export { default as DataViewCheckboxFilter } from './DataViewCheckboxFilter';
+export * from './DataViewCheckboxFilter';
 export { default as DataView } from './DataView';
 export * from './DataView';

package/dist/esm/index.js

@@ -16,5 +16,7 @@ export { default as DataViewTable } from './DataViewTable';
 export * from './DataViewTable';
 export { default as DataViewEventsContext } from './DataViewEventsContext';
 export * from './DataViewEventsContext';
+export { default as DataViewCheckboxFilter } from './DataViewCheckboxFilter';
+export * from './DataViewCheckboxFilter';
 export { default as DataView } from './DataView';
 export * from './DataView';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-data-view",
-  "version": "5.5.1",
+  "version": "5.7.0",
   "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/Functionality/FiltersExample.tsx

@@ -5,8 +5,9 @@ import { useDataViewFilters, useDataViewPagination } from '@patternfly/react-dat
 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 { DataViewFilterOption, DataViewFilters } from '@patternfly/react-data-view/dist/dynamic/DataViewFilters';
 import { DataViewTextFilter } from '@patternfly/react-data-view/dist/dynamic/DataViewTextFilter';
+import { DataViewCheckboxFilter } from '@patternfly/react-data-view/dist/dynamic/DataViewCheckboxFilter';
 
 const perPageOptions = [
   { title: '5', value: 5 },
@@ -17,38 +18,51 @@ interface Repository {
   name: string;
   branch: string | null;
   prs: string | null;
-  workspaces: string;
+  workspace: string;
   lastCommit: string;
 }
 
 interface RepositoryFilters {
   name: string,
-  branch: string
+  branch: string,
+  workspace: string[]
 }
 
 const repositories: Repository[] = [
-  { name: 'Repository one', branch: 'Branch one', prs: 'Pull request one', workspaces: 'Workspace one', lastCommit: 'Timestamp one' },
-  { name: 'Repository two', branch: 'Branch two', prs: 'Pull request two', workspaces: 'Workspace two', lastCommit: 'Timestamp two' },
-  { name: 'Repository three', branch: 'Branch three', prs: 'Pull request three', workspaces: 'Workspace three', lastCommit: 'Timestamp three' },
-  { name: 'Repository four', branch: 'Branch four', prs: 'Pull request four', workspaces: 'Workspace four', lastCommit: 'Timestamp four' },
-  { name: 'Repository five', branch: 'Branch five', prs: 'Pull request five', workspaces: 'Workspace five', lastCommit: 'Timestamp five' },
-  { name: 'Repository six', branch: 'Branch six', prs: 'Pull request six', workspaces: 'Workspace six', lastCommit: 'Timestamp six' }
+  { name: 'Repository one', branch: 'Branch one', prs: 'Pull request one', workspace: 'Workspace one', lastCommit: 'Timestamp one' },
+  { name: 'Repository two', branch: 'Branch two', prs: 'Pull request two', workspace: 'Workspace two', lastCommit: 'Timestamp two' },
+  { name: 'Repository three', branch: 'Branch three', prs: 'Pull request three', workspace: 'Workspace one', lastCommit: 'Timestamp three' },
+  { name: 'Repository four', branch: 'Branch four', prs: 'Pull request four', workspace: 'Workspace one', lastCommit: 'Timestamp four' },
+  { name: 'Repository five', branch: 'Branch five', prs: 'Pull request five', workspace: 'Workspace two', lastCommit: 'Timestamp five' },
+  { name: 'Repository six', branch: 'Branch six', prs: 'Pull request six', workspace: 'Workspace three', lastCommit: 'Timestamp six' }
 ];
 
-const columns = [ 'Name', 'Branch', 'Pull requests', 'Workspaces', 'Last commit' ];
+const filterOptions: DataViewFilterOption[] = [
+  { label: 'Workspace one', value: 'workspace-one' },
+  { label: 'Workspace two', value: 'workspace-two' },
+  { label: 'Workspace three', value: 'workspace-three' }
+];
+
+const columns = [ 'Name', 'Branch', 'Pull requests', 'Workspace', 'Last commit' ];
 
 const ouiaId = 'LayoutExample';
 
 const MyTable: React.FunctionComponent = () => { 
   const [ searchParams, setSearchParams ] = useSearchParams();
+  const { filters, onSetFilters, clearAllFilters } = useDataViewFilters<RepositoryFilters>({ initialFilters: { name: '', branch: '', workspace: [] }, searchParams, setSearchParams });
   const pagination = useDataViewPagination({ perPage: 5 });
   const { page, perPage } = pagination;
-  const { filters, onSetFilters, clearAllFilters } = useDataViewFilters<RepositoryFilters>({ initialFilters: { name: '', branch: '' }, searchParams, setSearchParams });
 
-  const pageRows = useMemo(() => repositories
-    .filter(item => (!filters.name || item.name?.toLocaleLowerCase().includes(filters.name?.toLocaleLowerCase())) && (!filters.branch || item.branch?.toLocaleLowerCase().includes(filters.branch?.toLocaleLowerCase())))
+  const filteredData = useMemo(() => repositories.filter(item => 
+    (!filters.name || item.name?.toLocaleLowerCase().includes(filters.name?.toLocaleLowerCase())) &&
+    (!filters.branch || item.branch?.toLocaleLowerCase().includes(filters.branch?.toLocaleLowerCase())) &&
+    (!filters.workspace || filters.workspace.length === 0 || filters.workspace.includes(String(filterOptions.find(option => option.label === item.workspace)?.value)))
+  ), [ filters ]);
+
+  const pageRows = useMemo(() => filteredData
     .slice((page - 1) * perPage, ((page - 1) * perPage) + perPage)
-    .map(item => Object.values(item)), [ page, perPage, filters ]);
+    .map(item => Object.values(item)),
+  [ page, perPage, filteredData ]);
 
   return (
     <DataView>
@@ -58,7 +72,7 @@ const MyTable: React.FunctionComponent = () => {
         pagination={
           <Pagination 
             perPageOptions={perPageOptions} 
-            itemCount={repositories.length} 
+            itemCount={filteredData.length} 
             {...pagination} 
           />
         }
@@ -66,6 +80,7 @@ const MyTable: React.FunctionComponent = () => {
           <DataViewFilters onChange={(_e, values) => onSetFilters(values)} values={filters}>
             <DataViewTextFilter filterId="name" title='Name' placeholder='Filter by name' />
             <DataViewTextFilter filterId="branch" title='Branch' placeholder='Filter by branch' />
+            <DataViewCheckboxFilter filterId="workspace" title='Workspace' placeholder='Filter by workspace' options={filterOptions} />
           </DataViewFilters>
         }
       />
@@ -76,7 +91,7 @@ const MyTable: React.FunctionComponent = () => {
           <Pagination 
             isCompact  
             perPageOptions={perPageOptions} 
-            itemCount={repositories.length} 
+            itemCount={filteredData.length} 
             {...pagination} 
           />
         } 

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

@@ -11,18 +11,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: ['DataViewFilters', 'DataViewTextFilter']
+propComponents: ['DataViewFilters', 'DataViewTextFilter', 'DataViewCheckboxFilter']
 sourceLink: https://github.com/patternfly/react-data-view/blob/main/packages/module/patternfly-docs/content/extensions/data-view/examples/Functionality/Functionality.md
 ---
 import { useMemo } from 'react';
 import { BrowserRouter, useSearchParams } from 'react-router-dom';
-import { useDataViewPagination, useDataViewSelection, useDataViewFilters } from '@patternfly/react-data-view/dist/dynamic/Hooks';
+import { useDataViewPagination, useDataViewSelection, useDataViewFilters, useDataViewSort } from '@patternfly/react-data-view/dist/dynamic/Hooks';
 import { DataView } from '@patternfly/react-data-view/dist/dynamic/DataView';
 import { BulkSelect, BulkSelectValue } from '@patternfly/react-component-groups/dist/dynamic/BulkSelect';
 import { DataViewToolbar } from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
 import { DataViewTable } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
 import { DataViewFilters } from '@patternfly/react-data-view/dist/dynamic/DataViewFilters';
 import { DataViewTextFilter } from '@patternfly/react-data-view/dist/dynamic/DataViewTextFilter';
+import { DataViewCheckboxFilter } from '@patternfly/react-data-view/dist/dynamic/DataViewCheckboxFilter';
 
 This is a list of functionality you can use to manage data displayed in the **data view**.
 
@@ -92,7 +93,7 @@ The `useDataViewSelection` hook manages the selection state of the data view.
 Enables filtering of data records in the data view and displays the applied filter chips.
 
 ### Toolbar usage
-The data view toolbar can include a set of filters by passing a React node to the `filters` property. You can use predefined components `DataViewFilters` and `DataViewTextFilter` to customize and handle filtering directly in the toolbar. The `DataViewFilters` is a wrapper allowing conditional filtering using multiple attributes. If you need just a single filter, you can use `DataViewTextFilter` or a different filter component alone. Props of these filter components are listed at the bottom of this page. 
+The data view toolbar can include a set of filters by passing a React node to the `filters` property. You can use predefined components `DataViewFilters`, `DataViewTextFilter` and `DataViewCheckboxFilter` to customize and handle filtering directly in the toolbar. The `DataViewFilters` is a wrapper allowing conditional filtering using multiple attributes. If you need just a single filter, you can use `DataViewTextFilter`, `DataViewCheckboxFilter` or a different filter component alone. Props of these filter components are listed at the bottom of this page. 
 
 You can decide between passing `value` and `onChange` event to every filter separately or pass `values` and `onChange` to the `DataViewFilters` wrapper which make them available to its children. Props directly passed to child filters have a higher priority than the "inherited" ones. 
 
@@ -101,7 +102,7 @@ You can decide between passing `value` and `onChange` event to every filter sepa
 The `useDataViewFilters` hook manages the filter state of the data view. It allows you to define default filter values, synchronize filter state with URL parameters, and handle filter changes efficiently.
 
 **Initial values:**
-- `initialFilters` object with default filter values
+- `initialFilters` object with default filter values (if the filter param allows multiple values, pass an array)
 - optional `searchParams` object for managing URL-based filter state
 - optional `setSearchParams` function to update the URL when filters are modified
 
@@ -118,3 +119,34 @@ This example demonstrates the setup and usage of filters within the data view. I
 ```js file="./FiltersExample.tsx"
 
 ```
+
+### Sort state
+
+The `useDataViewSort` hook manages the sorting state of a data view. It provides an easy way to handle sorting logic, including synchronization with URL parameters and defining 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`).
+- Optional `searchParams` object to manage URL-based synchronization of sort state.
+- Optional `setSearchParams` function to update the URL parameters when sorting changes.
+- `defaultDirection` to set the default direction when no direction is specified.
+- Customizable parameter names for the URL:
+  - `sortByParam`: name of the URL parameter for the column key.
+  - `directionParam`: name of the URL parameter for the sorting direction.
+
+The `useDataViewSort` hook integrates seamlessly with React Router to manage 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.
+
+### Sorting example
+
+This example demonstrates how to set up and use sorting functionality within a data view. The implementation includes dynamic sorting by column with persistence of sort state in the URL using React Router.
+
+
+```js file="./SortingExample.tsx"
+
+```

package/patternfly-docs/content/extensions/data-view/examples/Functionality/SortingExample.tsx

@@ -0,0 +1,87 @@
+/* eslint-disable no-nested-ternary */
+import React, { useMemo } from 'react';
+import { useDataViewSort } from '@patternfly/react-data-view/dist/dynamic/Hooks';
+import { DataViewTable, DataViewTr, DataViewTh } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
+import { ThProps } from '@patternfly/react-table';
+import { BrowserRouter, useSearchParams } from 'react-router-dom';
+
+interface Repository {
+  name: string;
+  branches: string;
+  prs: string;
+  workspaces: string;
+  lastCommit: string;
+};
+
+const COLUMNS = [
+  { label: 'Repository', key: 'name', index: 0 },
+  { label: 'Branch', key: 'branches', index: 1 },
+  { label: 'Pull request', key: 'prs', index: 2 },
+  { label: 'Workspace', key: 'workspaces', index: 3 },
+  { label: 'Last commit', key: 'lastCommit', index: 4 }
+];
+
+const repositories: Repository[] = [
+  { name: 'Repository one', branches: 'Branch one', prs: 'Pull request one', workspaces: 'Workspace one', lastCommit: 'Timestamp one' },
+  { name: 'Repository two', branches: 'Branch two', prs: 'Pull request two', workspaces: 'Workspace two', lastCommit: 'Timestamp two' },
+  { name: 'Repository three', branches: 'Branch three', prs: 'Pull request three', workspaces: 'Workspace three', lastCommit: 'Timestamp three' },
+  { name: 'Repository four', branches: 'Branch four', prs: 'Pull request four', workspaces: 'Workspace four', lastCommit: 'Timestamp four' },
+  { name: 'Repository five', branches: 'Branch five', prs: 'Pull request five', workspaces: 'Workspace five', lastCommit: 'Timestamp five' },
+  { name: 'Repository six', branches: 'Branch six', prs: 'Pull request six', workspaces: 'Workspace six', lastCommit: 'Timestamp six' }
+];
+
+const sortData = (data: Repository[], sortBy: string | undefined, direction: 'asc' | 'desc' | undefined) =>
+  sortBy && direction
+    ? [ ...data ].sort((a, b) =>
+      direction === 'asc'
+        ? a[sortBy] < b[sortBy] ? -1 : a[sortBy] > b[sortBy] ? 1 : 0
+        : a[sortBy] > b[sortBy] ? -1 : a[sortBy] < b[sortBy] ? 1 : 0
+    )
+    : data;
+
+const ouiaId = 'TableExample';
+
+export const MyTable: React.FunctionComponent = () => {
+  const [ searchParams, setSearchParams ] = useSearchParams();
+  const { sortBy, direction, onSort } = useDataViewSort({ searchParams, setSearchParams });
+  const sortByIndex = useMemo(() => COLUMNS.findIndex(item => item.key === sortBy), [ sortBy ]);
+
+  const getSortParams = (columnIndex: number): ThProps['sort'] => ({
+    sortBy: {
+      index: sortByIndex,
+      direction,
+      defaultDirection: 'asc'
+    },
+    onSort: (_event, index, direction) => onSort(_event, COLUMNS[index].key, direction),
+    columnIndex
+  });
+
+  const columns: DataViewTh[] = COLUMNS.map((column, index) => ({
+    cell: column.label,
+    props: { sort: getSortParams(index) }
+  }));
+
+  const rows: DataViewTr[] = useMemo(() => sortData(repositories, sortBy, direction).map(({ name, branches, prs, workspaces, lastCommit }) => [
+    name,
+    branches,
+    prs,
+    workspaces,
+    lastCommit,
+  ]), [ sortBy, direction ]);
+
+  return (
+    <DataViewTable
+      aria-label="Repositories table"
+      ouiaId={ouiaId}
+      columns={columns}
+      rows={rows}
+    />
+  );
+};
+
+export const BasicExample: React.FunctionComponent = () => (
+  <BrowserRouter>
+    <MyTable/>
+  </BrowserRouter>
+)
+

package/src/DataViewCheckboxFilter/DataViewCheckboxFilter.test.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import DataViewCheckboxFilter, { DataViewCheckboxFilterProps } from './DataViewCheckboxFilter';
+import DataViewToolbar from '../DataViewToolbar';
+
+describe('DataViewCheckboxFilter component', () => {
+  const defaultProps: DataViewCheckboxFilterProps = {
+    filterId: 'test-checkbox-filter',
+    title: 'Test Checkbox Filter',
+    value: [ 'workspace-one' ],
+    options: [
+      { label: 'Workspace one', value: 'workspace-one' },
+      { label: 'Workspace two', value: 'workspace-two' },
+      { label: 'Workspace three', value: 'workspace-three' },
+    ],
+  };
+
+  it('should render correctly', () => {
+    const { container } = render(
+      <DataViewToolbar filters={<DataViewCheckboxFilter {...defaultProps} />} />
+    );
+    expect(container).toMatchSnapshot();
+  });
+});