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

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,41 @@ 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"
 
 ```
 
+### 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 +97,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 +121,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](/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](/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

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

package/release.config.js

@@ -18,5 +18,5 @@ module.exports = {
     '@semantic-release/npm'
   ],
   tagFormat: 'prerelease-v${version}',
-  dryRun: true
+  dryRun: false
 };

package/src/DataViewCheckboxFilter/__snapshots__/DataViewCheckboxFilter.test.tsx.snap

@@ -135,7 +135,6 @@ exports[`DataViewCheckboxFilter component should render correctly 1`] = `
                       class="pf-v6-c-label__actions"
                     >
                       <button
-                        aria-disabled="false"
                         aria-label="Close Workspace one"
                         class="pf-v6-c-button pf-m-plain pf-m-no-padding"
                         data-ouia-component-id="OUIA-Generated-Button-plain-1"
@@ -176,7 +175,6 @@ exports[`DataViewCheckboxFilter component should render correctly 1`] = `
           class="pf-v6-c-toolbar__item"
         >
           <button
-            aria-disabled="false"
             class="pf-v6-c-button pf-m-link pf-m-inline"
             data-ouia-component-id="DataViewToolbar-clear-all-filters"
             data-ouia-component-type="PF6/Button"

package/src/DataViewFilters/__snapshots__/DataViewFilters.test.tsx.snap

@@ -26,7 +26,6 @@ exports[`DataViewFilters component should render correctly 1`] = `
               class="pf-v6-c-toolbar__toggle"
             >
               <button
-                aria-disabled="false"
                 aria-haspopup="false"
                 aria-label="Show Filters"
                 class="pf-v6-c-button pf-m-plain"
@@ -173,7 +172,6 @@ exports[`DataViewFilters component should render correctly 1`] = `
           class="pf-v6-c-toolbar__item"
         >
           <button
-            aria-disabled="false"
             class="pf-v6-c-button pf-m-link pf-m-inline"
             data-ouia-component-id="DataViewToolbar-clear-all-filters"
             data-ouia-component-type="PF6/Button"

package/src/DataViewTable/DataViewTable.tsx

@@ -1,46 +1,55 @@
 import { FC, ReactNode } from 'react';
-import {
-  TdProps,
-  ThProps,
-  TrProps
-} from '@patternfly/react-table';
+import { TdProps, ThProps, TrProps, InnerScrollContainer } from '@patternfly/react-table';
 import { DataViewTableTree, DataViewTableTreeProps } from '../DataViewTableTree';
 import { DataViewTableBasic, DataViewTableBasicProps } from '../DataViewTableBasic';
+import { DataViewThResizableProps } from '../DataViewTh/DataViewTh';
 
 // Table head typings
-export type DataViewTh = ReactNode | {
-  /** Table head cell node */
-  cell: ReactNode;
-  /** Props passed to Th */
-  props?: ThProps
-};
-export const isDataViewThObject = (value: DataViewTh): value is { cell: ReactNode; props?: ThProps } => value != null && typeof value === 'object' && 'cell' in value;
+export type DataViewTh =
+  | ReactNode
+  | {
+      /** Table head cell node */
+      cell: ReactNode;
+      /** Additional props for a resizable column */
+      resizableProps?: DataViewThResizableProps;
+      /** Props passed to Th */
+      props?: ThProps;
+    };
+export const isDataViewThObject = (value: DataViewTh): value is { cell: ReactNode; props?: ThProps } =>
+  value != null && typeof value === 'object' && 'cell' in value;
 
 // Basic table typings
 export interface DataViewTrObject {
   /** Array of rows */
-  row: DataViewTd[],
+  row: DataViewTd[];
   /** Unique identifier of a row */
-  id?: string,
+  id?: string;
   /** Props passed to Tr */
-  props?: TrProps
+  props?: TrProps;
 }
 
-export type DataViewTd = ReactNode | {
-  /** Table body cell node */
-  cell: ReactNode;
-  /** Props passed to Td */
-  props?: TdProps
-};
+export type DataViewTd =
+  | ReactNode
+  | {
+      /** Table body cell node */
+      cell: ReactNode;
+      /** Props passed to Td */
+      props?: TdProps;
+    };
 
 export type DataViewTr = DataViewTd[] | DataViewTrObject;
 
-export const isDataViewTdObject = (value: DataViewTd): value is { cell: ReactNode; props?: TdProps } => value != null && typeof value === 'object' && 'cell' in value;
-export const isDataViewTrObject = (value: DataViewTr): value is { row: DataViewTd[], id?: string } => value != null && typeof value === 'object' && 'row' in value;
+export const isDataViewTdObject = (value: DataViewTd): value is { cell: ReactNode; props?: TdProps } =>
+  value != null && typeof value === 'object' && 'cell' in value;
+export const isDataViewTrObject = (value: DataViewTr): value is { row: DataViewTd[]; id?: string } =>
+  value != null && typeof value === 'object' && 'row' in value;
 
 // Tree table typings
 /** extends DataViewTrObject */
-export interface DataViewTrTree extends DataViewTrObject { id: string, children?: DataViewTrTree[] }
+export interface DataViewTrTree extends DataViewTrObject {
+  id: string;
+  children?: DataViewTrTree[];
+}
 
 export type DataViewTableProps =
   | ({
@@ -48,10 +57,22 @@ export type DataViewTableProps =
     } & DataViewTableTreeProps)
   | ({
       isTreeTable?: false;
+      isResizable?: boolean;
     } & DataViewTableBasicProps);
 
-export const DataViewTable: FC<DataViewTableProps> = (props) => (
-  props.isTreeTable ? <DataViewTableTree {...props} /> : <DataViewTableBasic {...props} />
-);
+export const DataViewTable: FC<DataViewTableProps> = (props) => {
+  if (props.isTreeTable) {
+    return <DataViewTableTree {...props} />;
+  } else {
+    const { isResizable, ...rest } = props;
+    return isResizable ? (
+      <InnerScrollContainer>
+        <DataViewTableBasic hasResizableColumns {...rest} />
+      </InnerScrollContainer>
+    ) : (
+      <DataViewTableBasic {...rest} />
+    );
+  }
+};
 
 export default DataViewTable;

package/src/DataViewTable/__snapshots__/DataViewTable.test.tsx.snap

@@ -21,7 +21,7 @@ exports[`DataViewTable component should render a basic table correctly 1`] = `
         data-ouia-safe="true"
       >
         <th
-          class="pf-v6-c-table__th"
+          class="pf-v6-c-table__th pf-m-truncate"
           data-ouia-component-id="TableExample-th-0"
           scope="col"
           tabindex="-1"
@@ -29,7 +29,7 @@ exports[`DataViewTable component should render a basic table correctly 1`] = `
           Repositories
         </th>
         <th
-          class="pf-v6-c-table__th"
+          class="pf-v6-c-table__th pf-m-truncate"
           data-ouia-component-id="TableExample-th-1"
           scope="col"
           tabindex="-1"
@@ -37,7 +37,7 @@ exports[`DataViewTable component should render a basic table correctly 1`] = `
           Branches
         </th>
         <th
-          class="pf-v6-c-table__th"
+          class="pf-v6-c-table__th pf-m-truncate"
           data-ouia-component-id="TableExample-th-2"
           scope="col"
           tabindex="-1"
@@ -45,7 +45,7 @@ exports[`DataViewTable component should render a basic table correctly 1`] = `
           Pull requests
         </th>
         <th
-          class="pf-v6-c-table__th"
+          class="pf-v6-c-table__th pf-m-truncate"
           data-ouia-component-id="TableExample-th-3"
           scope="col"
           tabindex="-1"
@@ -53,7 +53,7 @@ exports[`DataViewTable component should render a basic table correctly 1`] = `
           Workspaces
         </th>
         <th
-          class="pf-v6-c-table__th"
+          class="pf-v6-c-table__th pf-m-truncate"
           data-ouia-component-id="TableExample-th-4"
           scope="col"
           tabindex="-1"
@@ -344,7 +344,7 @@ exports[`DataViewTable component should render a tree table correctly 1`] = `
         data-ouia-safe="true"
       >
         <th
-          class="pf-v6-c-table__th"
+          class="pf-v6-c-table__th pf-m-truncate"
           data-ouia-component-id="TableExample-th-0"
           scope="col"
           tabindex="-1"
@@ -352,7 +352,7 @@ exports[`DataViewTable component should render a tree table correctly 1`] = `
           Repositories
         </th>
         <th
-          class="pf-v6-c-table__th"
+          class="pf-v6-c-table__th pf-m-truncate"
           data-ouia-component-id="TableExample-th-1"
           scope="col"
           tabindex="-1"
@@ -360,7 +360,7 @@ exports[`DataViewTable component should render a tree table correctly 1`] = `
           Branches
         </th>
         <th
-          class="pf-v6-c-table__th"
+          class="pf-v6-c-table__th pf-m-truncate"
           data-ouia-component-id="TableExample-th-2"
           scope="col"
           tabindex="-1"
@@ -368,7 +368,7 @@ exports[`DataViewTable component should render a tree table correctly 1`] = `
           Pull requests
         </th>
         <th
-          class="pf-v6-c-table__th"
+          class="pf-v6-c-table__th pf-m-truncate"
           data-ouia-component-id="TableExample-th-3"
           scope="col"
           tabindex="-1"
@@ -376,7 +376,7 @@ exports[`DataViewTable component should render a tree table correctly 1`] = `
           Workspaces
         </th>
         <th
-          class="pf-v6-c-table__th"
+          class="pf-v6-c-table__th pf-m-truncate"
           data-ouia-component-id="TableExample-th-4"
           scope="col"
           tabindex="-1"
@@ -411,7 +411,6 @@ exports[`DataViewTable component should render a tree table correctly 1`] = `
               class="pf-v6-c-table__toggle"
             >
               <button
-                aria-disabled="false"
                 aria-expanded="false"
                 aria-label="Expand row 0"
                 class="pf-v6-c-button pf-m-plain"
@@ -457,7 +456,6 @@ exports[`DataViewTable component should render a tree table correctly 1`] = `
               class="pf-v6-c-table__tree-view-details-toggle"
             >
               <button
-                aria-disabled="false"
                 aria-expanded="false"
                 aria-label="Show row details"
                 class="pf-v6-c-button pf-m-plain"
@@ -553,7 +551,6 @@ exports[`DataViewTable component should render a tree table correctly 1`] = `
               class="pf-v6-c-table__tree-view-details-toggle"
             >
               <button
-                aria-disabled="false"
                 aria-expanded="false"
                 aria-label="Show row details"
                 class="pf-v6-c-button pf-m-plain"
@@ -649,7 +646,6 @@ exports[`DataViewTable component should render a tree table correctly 1`] = `
               class="pf-v6-c-table__tree-view-details-toggle"
             >
               <button
-                aria-disabled="false"
                 aria-expanded="false"
                 aria-label="Show row details"
                 class="pf-v6-c-button pf-m-plain"
@@ -735,7 +731,6 @@ exports[`DataViewTable component should render a tree table correctly 1`] = `
               class="pf-v6-c-table__toggle"
             >
               <button
-                aria-disabled="false"
                 aria-expanded="false"
                 aria-label="Expand row 3"
                 class="pf-v6-c-button pf-m-plain"
@@ -781,7 +776,6 @@ exports[`DataViewTable component should render a tree table correctly 1`] = `
               class="pf-v6-c-table__tree-view-details-toggle"
             >
               <button
-                aria-disabled="false"
                 aria-expanded="false"
                 aria-label="Show row details"
                 class="pf-v6-c-button pf-m-plain"
@@ -877,7 +871,6 @@ exports[`DataViewTable component should render a tree table correctly 1`] = `
               class="pf-v6-c-table__tree-view-details-toggle"
             >
               <button
-                aria-disabled="false"
                 aria-expanded="false"
                 aria-label="Show row details"
                 class="pf-v6-c-button pf-m-plain"
@@ -972,7 +965,6 @@ exports[`DataViewTable component should render a tree table correctly 1`] = `
               class="pf-v6-c-table__tree-view-details-toggle"
             >
               <button
-                aria-disabled="false"
                 aria-expanded="false"
                 aria-label="Show row details"
                 class="pf-v6-c-button pf-m-plain"

package/src/DataViewTableBasic/DataViewTableBasic.tsx

@@ -23,6 +23,8 @@ export interface DataViewTableBasicProps extends Omit<TableProps, 'onSelect' | '
   bodyStates?: Partial<Record<DataViewState | string, React.ReactNode>>
   /** Custom OUIA ID */
   ouiaId?: string;
+  /** @hide Indicates if the table is resizable */
+  hasResizableColumns?: boolean;
 }
 
 export const DataViewTableBasic: FC<DataViewTableBasicProps> = ({
@@ -31,6 +33,7 @@ export const DataViewTableBasic: FC<DataViewTableBasicProps> = ({
   ouiaId = 'DataViewTableBasic',
   headStates,
   bodyStates,
+  hasResizableColumns,
   ...props
 }: DataViewTableBasicProps) => {
   const { selection, activeState, isSelectable } = useInternalContext();
@@ -74,7 +77,7 @@ export const DataViewTableBasic: FC<DataViewTableBasicProps> = ({
 
   return (
     <Table aria-label="Data table" ouiaId={ouiaId} {...props}>
-      { activeHeadState || <DataViewTableHead columns={columns} ouiaId={ouiaId} /> }
+      { activeHeadState || <DataViewTableHead columns={columns} ouiaId={ouiaId} hasResizableColumns={hasResizableColumns} /> }
       { activeBodyState || <Tbody>{renderedRows}</Tbody> }
     </Table>
   );