All/selected row switch

Author: radekkaluzik

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

@@ -0,0 +1,99 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { Pagination, ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
+import { useDataViewPagination, useDataViewSelection } from '@patternfly/react-data-view/dist/dynamic/Hooks';
+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';
+import { BulkSelect, BulkSelectValue } from '@patternfly/react-component-groups';
+
+const perPageOptions = [
+  { title: '5', value: 5 },
+  { title: '10', value: 10 }
+];
+
+interface Repository {
+  name: string;
+  branches: string | null;
+  prs: string | null;
+  workspaces: string;
+  lastCommit: string;
+};
+
+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 rows = repositories.map(item => Object.values(item));
+
+const columns = [ 'Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit' ];
+
+const ouiaId = 'LayoutExample';
+
+export const BasicExample: React.FunctionComponent = () => {
+  const pagination = useDataViewPagination({ perPage: 5 });
+  const selection = useDataViewSelection({ matchOption: (a, b) => a[0] === b[0] });
+  const [ selectedToggle, setSelectedToggle ] = useState('all')
+  const { selected, onSelect } = selection;
+  const { page, perPage, onSetPage } = pagination;
+
+  const pageRows = useMemo(() => (selectedToggle === 'selected' ? selected : rows).slice((page - 1) * perPage, ((page - 1) * perPage) + perPage), [ page, perPage, selectedToggle ]);
+
+  const handleBulkSelect = (value: BulkSelectValue) => {
+    value === BulkSelectValue.none && onSelect(false);
+    value === BulkSelectValue.all && onSelect(true, rows);
+  };
+    
+  const handleItemClick = (event, _isSelected: boolean) => {
+    const id = event.currentTarget.id;
+    if (selectedToggle !== id) {
+      setSelectedToggle(id);
+      onSetPage(undefined, 1);
+    }
+  };
+
+  useEffect(() => {
+    if (selected.length === 0) {
+      setSelectedToggle('all');
+    }
+  }, [ selected ]);
+
+  return (
+    <DataView selection={selection}>
+      <DataViewToolbar 
+        ouiaId='DataViewHeader'
+        bulkSelect={
+          <BulkSelect
+            canSelectAll
+            isDataPaginated={false}
+            totalCount={repositories.length}
+            selectedCount={selected.length}
+            onSelect={handleBulkSelect}
+          />
+        } 
+        toggleGroup={<ToggleGroup aria-label="Default with single selectable">
+          <ToggleGroupItem
+            text="All"
+            buttonId="all"
+            isSelected={selectedToggle === 'all'}
+            onChange={handleItemClick}
+          />
+          <ToggleGroupItem
+            isDisabled={selected.length === 0}
+            text="Selected"
+            buttonId="selected"
+            isSelected={selectedToggle === 'selected'}
+            onChange={handleItemClick}
+          />
+        </ToggleGroup>
+        }
+        pagination={<Pagination perPageOptions={perPageOptions} itemCount={repositories.length} {...pagination} />} 
+      />
+      <DataViewTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={pageRows} />
+    </DataView>
+  );
+};

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

@@ -15,8 +15,9 @@ sortValue: 2
 propComponents: ['DataViewToolbar', 'DataViewFilters', 'DataViewTextFilter', 'DataViewCheckboxFilter']
 sourceLink: https://github.com/patternfly/react-data-view/blob/main/packages/module/patternfly-docs/content/extensions/data-view/examples/Toolbar/Toolbar.md
 ---
-import { useMemo } from 'react';
+import { useMemo, useState, useEffect } from 'react';
 import { BrowserRouter, useSearchParams } from 'react-router-dom';
+import { Pagination, ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
 import { useDataViewPagination, useDataViewSelection, useDataViewFilters } from '@patternfly/react-data-view/dist/dynamic/Hooks';
 import { DataView } from '@patternfly/react-data-view/dist/dynamic/DataView';
 import { BulkSelect, BulkSelectValue, ErrorState, ResponsiveAction, ResponsiveActions, SkeletonTableHead, SkeletonTableBody } from '@patternfly/react-component-groups';
@@ -140,3 +141,34 @@ This example demonstrates the setup and usage of filters within the data view. I
 ```js file="./FiltersExample.tsx"
 
 ```
+
+
+## All/selected data switch
+To allow users to filter data records in the data view, add filtering support that displays the applied filter chips.
+
+The data view toolbar can include a set of filters by passing a React node to the `filters` property. You can use the predefined components `<DataViewFilters>`, `<DataViewTextFilter>`, and `<DataViewCheckboxFilter>` to customize and handle filtering directly in the toolbar. The `<DataViewFilters>` component is a wrapper that allows 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 in the [props section of this page](#props).
+
+You can either pass a `value` and `onChange` event to every filter separately, or you can pass `values` and `onChange` to the `<DataViewFilters>` wrapper, which makes them available to its children. Props directly passed to child filters have a higher priority than the "inherited" ones. 
+
+### Filters state
+
+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 (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.
+
+The `useDataViewFilters` hook works well with the [React Router](https://reactrouter.com/) library to support URL-based filtering. Alternatively, you can manage the filter state in the URL using `URLSearchParams` and `window.history.pushState` APIs, or other routing libraries. If no URL parameters are provided, the filter state is managed internally.
+
+**Return values:**
+- `filters` object representing the current filter values.
+- `onSetFilters` function to update the filter state.
+- `clearAllFilters` function to reset all filters to their initial values.
+
+### All/selected example
+This example demonstrates the setup and usage of filters within the data view. It includes text filters for different attributes, the ability to clear all filters, and persistence of filter state in the URL.
+
+```js file="./AllSelectedExample.tsx"
+
+```

packages/module/patternfly-docs/generated/index.js

@@ -2,8 +2,8 @@ module.exports = {
   '/extensions/data-view/toolbar/react': {
     id: "Toolbar",
     title: "Data view toolbar",
-    toc: [[{"text":"Toolbar example"}],{"text":"Toolbar actions"},[{"text":"Actions example"}],{"text":"Pagination"},[{"text":"Pagination state"},{"text":"Pagination example"}],{"text":"Selection"},[{"text":"Selection state"},{"text":"Selection example"}],{"text":"Filters"},[{"text":"Filters state"},{"text":"Filtering example"}]],
-    examples: ["Toolbar example","Actions example","Pagination example","Selection example","Filtering example"],
+    toc: [[{"text":"Toolbar example"}],{"text":"Toolbar actions"},[{"text":"Actions example"}],{"text":"Pagination"},[{"text":"Pagination state"},{"text":"Pagination example"}],{"text":"Selection"},[{"text":"Selection state"},{"text":"Selection example"}],{"text":"Filters"},[{"text":"Filters state"},{"text":"Filtering example"}],{"text":"All/selected data switch"},[{"text":"Filters state","id":"filters-state-0"},{"text":"All/selected example"}]],
+    examples: ["Toolbar example","Actions example","Pagination example","Selection example","Filtering example","All/selected example"],
     section: "extensions",
     subsection: "Data view",
     source: "react",

packages/module/src/DataViewToolbar/DataViewToolbar.tsx

@@ -13,13 +13,15 @@ export interface DataViewToolbarProps extends Omit<PropsWithChildren<ToolbarProp
   pagination?: React.ReactNode;
   /** React node to display actions */
   actions?: React.ReactNode;
+  /** React node to display toggle group */
+  toggleGroup?: React.ReactNode;
   /** React node to display filters */
   filters?: React.ReactNode;
   /** React node to display custom filter labels */
   customLabelGroupContent?: React.ReactNode;
 }
 
-export const DataViewToolbar: React.FC<DataViewToolbarProps> = ({ className, ouiaId = 'DataViewToolbar', bulkSelect, actions, pagination, filters, customLabelGroupContent, clearAllFilters, children, ...props }: DataViewToolbarProps) => {
+export const DataViewToolbar: React.FC<DataViewToolbarProps> = ({ className, ouiaId = 'DataViewToolbar', bulkSelect, actions, toggleGroup, pagination, filters, customLabelGroupContent, clearAllFilters, children, ...props }: DataViewToolbarProps) => {
   const defaultClearFilters = useRef(
     <ToolbarItem>
       <Button ouiaId={`${ouiaId}-clear-all-filters`} variant="link" onClick={clearAllFilters} isInline>
@@ -45,6 +47,11 @@ export const DataViewToolbar: React.FC<DataViewToolbarProps> = ({ className, oui
             {actions}
           </ToolbarItem>
         )}
+        {toggleGroup && (
+          <ToolbarItem>
+            {toggleGroup}
+          </ToolbarItem>
+        )}
         {pagination && (
           <ToolbarItem variant={ToolbarItemVariant.pagination} data-ouia-component-id={`${ouiaId}-pagination`}>
             {pagination}