@patternfly/react-data-view 5.1.3 → 5.2.0

package/patternfly-docs/content/extensions/data-view/examples/Components/DataViewTableErrorExample.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { DataView, DataViewState } from '@patternfly/react-data-view/dist/dynamic/DataView';
+import { DataViewTable, DataViewTr, DataViewTh } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
+import { ErrorState } from '@patternfly/react-component-groups';
+
+interface Repository {
+  id: number;
+  name: string;
+  branches: string | null;
+  prs: string | null;
+  workspaces: string;
+  lastCommit: string;
+}
+
+const repositories: Repository[] = [];
+
+// you can also pass props to Tr by returning { row: DataViewTd[], props: TrProps } }
+const rows: DataViewTr[] = repositories.map((repository) => Object.values(repository));
+
+const columns: DataViewTh[] = [ 'Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit' ];
+
+const ouiaId = 'TableErrorExample';
+
+const error = (
+  <ErrorState errorTitle='Unable to load data' errorDescription='There was an error retrieving data. Check your connection and reload the page.' />
+);
+
+export const BasicExample: React.FunctionComponent = () => (
+  <DataView activeState={DataViewState.error}>
+    <DataViewTable 
+      aria-label='Repositories table' 
+      ouiaId={ouiaId}
+      columns={columns}
+      rows={rows}
+      states={{ error }}
+    />
+  </DataView>
+);

package/patternfly-docs/content/extensions/data-view/examples/Components/DataViewTableTreeExample.tsx

@@ -42,19 +42,13 @@ const buildRows = (repositories: Repository[]): DataViewTrTree[] => repositories
   ...(repo.children
     ? { 
       children: buildRows(repo.children) // build rows for children
-    }
+    } 
     : {})
 }));
 
 const rows: DataViewTrTree[] = buildRows(repositories);
 
-const columns: DataViewTh[] = [
-  'Repositories', 
-  'Branches', 
-  'Pull requests', 
-  'Workspaces', 
-  'Last commit'
-];
+const columns: DataViewTh[] = [ 'Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit' ];
 
 const ouiaId = 'TreeTableExample';
 
@@ -63,7 +57,15 @@ export const BasicExample: React.FunctionComponent = () => {
 
   return (
     <DataView selection={selection}>
-      <DataViewTable isTreeTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={rows} leafIcon={<LeafIcon/>} expandedIcon={<FolderOpenIcon aria-hidden />} collapsedIcon={<FolderIcon aria-hidden />} />
+      <DataViewTable 
+        isTreeTable 
+        ouiaId={ouiaId}
+        columns={columns} 
+        rows={rows}
+        leafIcon={<LeafIcon/>}
+        expandedIcon={<FolderOpenIcon aria-hidden />}
+        collapsedIcon={<FolderIcon aria-hidden />} 
+      />
     </DataView>
   );
 }

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

@@ -11,7 +11,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: ['DataView']
+propComponents: ['DataView', 'DataViewState']
 sourceLink: https://github.com/patternfly/react-data-view/blob/main/packages/module/patternfly-docs/content/extensions/data-view/examples/Layout/Layout.md
 ---
 import { useMemo } from 'react';

package/src/DataView/DataView.tsx

@@ -2,13 +2,23 @@ import React from 'react';
 import { Stack, StackItem } from '@patternfly/react-core';
 import { DataViewSelection, InternalContextProvider } from '../InternalContext';
 
+export const DataViewState = {
+  empty: 'empty',
+  loading: 'loading',
+  error: 'error'
+} as const;
+
+export type DataViewState = typeof DataViewState[keyof typeof DataViewState];
+
 export interface DataViewProps {
   /** Content rendered inside the data view */
   children: React.ReactNode;
   /** Custom OUIA ID */
   ouiaId?: string;
   /** Selection context configuration */
-  selection?: DataViewSelection
+  selection?: DataViewSelection;
+  /** Currently active state */
+  activeState?: DataViewState;
 }
 
 export type DataViewImpementationProps = Omit<DataViewProps, 'onSelect' | 'isItemSelected' | 'isItemSelectDisabled'>;
@@ -16,7 +26,7 @@ export type DataViewImpementationProps = Omit<DataViewProps, 'onSelect' | 'isIte
 const DataViewImplementation: React.FC<DataViewImpementationProps> = ({
   children, ouiaId = 'DataView', ...props
 }: DataViewImpementationProps) => (
-  <Stack data-ouia-component-id={`${ouiaId}-stack}`} {...props}>
+  <Stack data-ouia-component-id={`${ouiaId}-stack`} {...props}>
     {React.Children.map(children, (child, index) => (
       <StackItem data-ouia-component-id={`${ouiaId}-stack-item-${index}`}>
         {child}
@@ -25,8 +35,8 @@ const DataViewImplementation: React.FC<DataViewImpementationProps> = ({
   </Stack>
 )
 
-export const DataView: React.FC<DataViewProps> = ({ children, selection, ...props }: DataViewProps) => (
-  <InternalContextProvider selection={selection}>
+export const DataView: React.FC<DataViewProps> = ({ children, selection, activeState, ...props }: DataViewProps) => (
+  <InternalContextProvider selection={selection} activeState={activeState} >
     <DataViewImplementation {...props}>{children}</DataViewImplementation>
   </InternalContextProvider>
 );

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

@@ -7,7 +7,7 @@ exports[`DataView component should render correctly 1`] = `
     <div>
       <div
         class="pf-v5-l-stack"
-        data-ouia-component-id="DataView-stack}"
+        data-ouia-component-id="DataView-stack"
       >
         <div
           class="pf-v5-l-stack__item"
@@ -45,7 +45,7 @@ exports[`DataView component should render correctly 1`] = `
   "container": <div>
     <div
       class="pf-v5-l-stack"
-      data-ouia-component-id="DataView-stack}"
+      data-ouia-component-id="DataView-stack"
     >
       <div
         class="pf-v5-l-stack__item"

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

@@ -395,7 +395,7 @@ exports[`DataViewTable component should render a tree table correctly 1`] = `
         aria-posinset="1"
         aria-setsize="2"
         class="pf-v5-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-9"
+        data-ouia-component-id="TableExample-tr-0"
         data-ouia-component-type="PF5/TableRow"
         data-ouia-safe="true"
       >
@@ -519,7 +519,7 @@ exports[`DataViewTable component should render a tree table correctly 1`] = `
         aria-posinset="1"
         aria-setsize="0"
         class="pf-v5-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-10"
+        data-ouia-component-id="TableExample-tr-1"
         data-ouia-component-type="PF5/TableRow"
         data-ouia-safe="true"
         hidden=""
@@ -611,7 +611,7 @@ exports[`DataViewTable component should render a tree table correctly 1`] = `
         aria-posinset="2"
         aria-setsize="0"
         class="pf-v5-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-11"
+        data-ouia-component-id="TableExample-tr-2"
         data-ouia-component-type="PF5/TableRow"
         data-ouia-safe="true"
         hidden=""
@@ -703,7 +703,7 @@ exports[`DataViewTable component should render a tree table correctly 1`] = `
         aria-posinset="2"
         aria-setsize="1"
         class="pf-v5-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-12"
+        data-ouia-component-id="TableExample-tr-3"
         data-ouia-component-type="PF5/TableRow"
         data-ouia-safe="true"
       >
@@ -827,7 +827,7 @@ exports[`DataViewTable component should render a tree table correctly 1`] = `
         aria-posinset="1"
         aria-setsize="0"
         class="pf-v5-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-13"
+        data-ouia-component-id="TableExample-tr-4"
         data-ouia-component-type="PF5/TableRow"
         data-ouia-safe="true"
         hidden=""
@@ -919,7 +919,7 @@ exports[`DataViewTable component should render a tree table correctly 1`] = `
         aria-posinset="3"
         aria-setsize="0"
         class="pf-v5-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-14"
+        data-ouia-component-id="TableExample-tr-5"
         data-ouia-component-type="PF5/TableRow"
         data-ouia-safe="true"
       >

package/src/DataViewTableBasic/DataViewTableBasic.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { DataViewTableBasic } from './DataViewTableBasic';
+import DataView from '../DataView/DataView';
 
 interface Repository {
   name: string;
@@ -34,4 +35,22 @@ describe('DataViewTable component', () => {
     );
     expect(container).toMatchSnapshot();
   });
+
+  test('should render with an empty state', () => {
+    const { container } = render(
+      <DataView activeState="empty">
+        <DataViewTableBasic aria-label='Repositories table' ouiaId={ouiaId} columns={columns} states={{ empty:"No data found" }} rows={[]} />
+      </DataView>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test('should render with an error state', () => {
+    const { container } = render(
+      <DataView activeState="error">
+        <DataViewTableBasic aria-label='Repositories table' ouiaId={ouiaId} columns={columns} states={{ error:"Some error" }} rows={[]} />
+      </DataView>
+    );
+    expect(container).toMatchSnapshot();
+  });
 });

package/src/DataViewTableBasic/DataViewTableBasic.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import {
   Table,
   TableProps,
@@ -9,12 +9,15 @@ import {
 import { useInternalContext } from '../InternalContext';
 import { DataViewTableHeader } from '../DataViewTableHeader';
 import { DataViewTh, DataViewTr, isDataViewTdObject, isDataViewTrObject } from '../DataViewTable';
+import { DataViewState } from '../DataView/DataView';
 
 export interface DataViewTableBasicProps extends Omit<TableProps, 'onSelect' | 'rows'> {
   /** Columns definition */
   columns: DataViewTh[];
   /** Current page rows */
   rows: DataViewTr[];
+  /** States to be displayed when active */
+  states?: Partial<Record<DataViewState, React.ReactNode>>
   /** Custom OUIA ID */
   ouiaId?: string;
 }
@@ -23,46 +26,56 @@ export const DataViewTableBasic: React.FC<DataViewTableBasicProps> = ({
   columns,
   rows,
   ouiaId = 'DataViewTableBasic',
+  states = {},
   ...props
 }: DataViewTableBasicProps) => {
-  const { selection } = useInternalContext();
+  const { selection, activeState } = useInternalContext();
   const { onSelect, isSelected, isSelectDisabled } = selection ?? {};
+  const isSelectable = useMemo(() => Boolean(onSelect && isSelected), [ onSelect, isSelected ]);
 
   return (
     <Table aria-label="Data table" ouiaId={ouiaId} {...props}>
       <DataViewTableHeader columns={columns} ouiaId={ouiaId} />
       <Tbody>
-        {rows.map((row, rowIndex) => { 
-          const rowIsObject = isDataViewTrObject(row);
-          return (
-            <Tr key={rowIndex} ouiaId={`${ouiaId}-tr-${rowIndex}`} {...(rowIsObject && (row?.props ?? {}))}>
-              {onSelect && isSelected && (
-                <Td
-                  key={`select-${rowIndex}`}
-                  select={{
-                    rowIndex,
-                    onSelect: (_event, isSelecting) => {
-                      onSelect?.(isSelecting, rowIsObject ? row : [ row ])
-                    },
-                    isSelected: isSelected?.(row) || false,
-                    isDisabled: isSelectDisabled?.(row) || false,
-                  }}
-                />
-              )}
-              {(rowIsObject ? row.row : row).map((cell, colIndex) => {
-                const cellIsObject = isDataViewTdObject(cell);
-                return (
+        {activeState && Object.keys(states).includes(activeState) ? (
+          <Tr key={activeState} ouiaId={`${ouiaId}-tr-${activeState}`}>
+            <Td colSpan={columns.length + Number(isSelectable)}>
+              {states[activeState]}
+            </Td>
+          </Tr>
+        ) : (
+          rows.map((row, rowIndex) => {
+            const rowIsObject = isDataViewTrObject(row);
+            return (
+              <Tr key={rowIndex} ouiaId={`${ouiaId}-tr-${rowIndex}`} {...(rowIsObject && row?.props)}>
+                {isSelectable && (
                   <Td
-                    key={colIndex}
-                    {...(cellIsObject && (cell?.props ?? {}))}
-                    data-ouia-component-id={`${ouiaId}-td-${rowIndex}-${colIndex}`}
-                  >
-                    {cellIsObject ? cell.cell : cell}
-                  </Td>
-                )
-              })}
-            </Tr>
-          )})}
+                    key={`select-${rowIndex}`}
+                    select={{
+                      rowIndex,
+                      onSelect: (_event, isSelecting) => {
+                        onSelect?.(isSelecting, rowIsObject ? row : [ row ]);
+                      },
+                      isSelected: isSelected?.(row) || false,
+                      isDisabled: isSelectDisabled?.(row) || false,
+                    }}
+                  />
+                )}
+                {(rowIsObject ? row.row : row).map((cell, colIndex) => {
+                  const cellIsObject = isDataViewTdObject(cell);
+                  return (
+                    <Td
+                      key={colIndex}
+                      {...(cellIsObject && (cell?.props ?? {}))}
+                      data-ouia-component-id={`${ouiaId}-td-${rowIndex}-${colIndex}`}
+                    >
+                      {cellIsObject ? cell.cell : cell}
+                    </Td>
+                  );
+                })}
+              </Tr>
+            );
+          }))}
       </Tbody>
     </Table>
   );

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

@@ -322,3 +322,193 @@ exports[`DataViewTable component should render correctly 1`] = `
   </table>
 </div>
 `;
+
+exports[`DataViewTable component should render with an empty state 1`] = `
+<div>
+  <div
+    class="pf-v5-l-stack"
+    data-ouia-component-id="DataView-stack"
+  >
+    <div
+      class="pf-v5-l-stack__item"
+      data-ouia-component-id="DataView-stack-item-0"
+    >
+      <table
+        aria-label="Repositories table"
+        class="pf-v5-c-table pf-m-grid-md"
+        data-ouia-component-id="TableExample"
+        data-ouia-component-type="PF5/Table"
+        data-ouia-safe="true"
+        role="grid"
+      >
+        <thead
+          class="pf-v5-c-table__thead"
+          data-ouia-component-id="TableExample-thead"
+        >
+          <tr
+            class="pf-v5-c-table__tr"
+            data-ouia-component-id="TableExample-tr-head"
+            data-ouia-component-type="PF5/TableRow"
+            data-ouia-safe="true"
+          >
+            <th
+              class="pf-v5-c-table__th"
+              data-ouia-component-id="TableExample-th-0"
+              scope="col"
+              tabindex="-1"
+            >
+              Repositories
+            </th>
+            <th
+              class="pf-v5-c-table__th"
+              data-ouia-component-id="TableExample-th-1"
+              scope="col"
+              tabindex="-1"
+            >
+              Branches
+            </th>
+            <th
+              class="pf-v5-c-table__th"
+              data-ouia-component-id="TableExample-th-2"
+              scope="col"
+              tabindex="-1"
+            >
+              Pull requests
+            </th>
+            <th
+              class="pf-v5-c-table__th"
+              data-ouia-component-id="TableExample-th-3"
+              scope="col"
+              tabindex="-1"
+            >
+              Workspaces
+            </th>
+            <th
+              class="pf-v5-c-table__th"
+              data-ouia-component-id="TableExample-th-4"
+              scope="col"
+              tabindex="-1"
+            >
+              Last commit
+            </th>
+          </tr>
+        </thead>
+        <tbody
+          class="pf-v5-c-table__tbody"
+          role="rowgroup"
+        >
+          <tr
+            class="pf-v5-c-table__tr"
+            data-ouia-component-id="TableExample-tr-empty"
+            data-ouia-component-type="PF5/TableRow"
+            data-ouia-safe="true"
+          >
+            <td
+              class="pf-v5-c-table__td"
+              colspan="5"
+              tabindex="-1"
+            >
+              No data found
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`DataViewTable component should render with an error state 1`] = `
+<div>
+  <div
+    class="pf-v5-l-stack"
+    data-ouia-component-id="DataView-stack"
+  >
+    <div
+      class="pf-v5-l-stack__item"
+      data-ouia-component-id="DataView-stack-item-0"
+    >
+      <table
+        aria-label="Repositories table"
+        class="pf-v5-c-table pf-m-grid-md"
+        data-ouia-component-id="TableExample"
+        data-ouia-component-type="PF5/Table"
+        data-ouia-safe="true"
+        role="grid"
+      >
+        <thead
+          class="pf-v5-c-table__thead"
+          data-ouia-component-id="TableExample-thead"
+        >
+          <tr
+            class="pf-v5-c-table__tr"
+            data-ouia-component-id="TableExample-tr-head"
+            data-ouia-component-type="PF5/TableRow"
+            data-ouia-safe="true"
+          >
+            <th
+              class="pf-v5-c-table__th"
+              data-ouia-component-id="TableExample-th-0"
+              scope="col"
+              tabindex="-1"
+            >
+              Repositories
+            </th>
+            <th
+              class="pf-v5-c-table__th"
+              data-ouia-component-id="TableExample-th-1"
+              scope="col"
+              tabindex="-1"
+            >
+              Branches
+            </th>
+            <th
+              class="pf-v5-c-table__th"
+              data-ouia-component-id="TableExample-th-2"
+              scope="col"
+              tabindex="-1"
+            >
+              Pull requests
+            </th>
+            <th
+              class="pf-v5-c-table__th"
+              data-ouia-component-id="TableExample-th-3"
+              scope="col"
+              tabindex="-1"
+            >
+              Workspaces
+            </th>
+            <th
+              class="pf-v5-c-table__th"
+              data-ouia-component-id="TableExample-th-4"
+              scope="col"
+              tabindex="-1"
+            >
+              Last commit
+            </th>
+          </tr>
+        </thead>
+        <tbody
+          class="pf-v5-c-table__tbody"
+          role="rowgroup"
+        >
+          <tr
+            class="pf-v5-c-table__tr"
+            data-ouia-component-id="TableExample-tr-error"
+            data-ouia-component-type="PF5/TableRow"
+            data-ouia-safe="true"
+          >
+            <td
+              class="pf-v5-c-table__td"
+              colspan="5"
+              tabindex="-1"
+            >
+              Some error
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
+`;

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

@@ -69,7 +69,7 @@ exports[`DataViewTableHeader component should render selection column when selec
 <div>
   <div
     class="pf-v5-l-stack"
-    data-ouia-component-id="DataView-stack}"
+    data-ouia-component-id="DataView-stack"
   >
     <div
       class="pf-v5-l-stack__item"
@@ -155,7 +155,7 @@ exports[`DataViewTableHeader component should render the tree table correctly wh
 <div>
   <div
     class="pf-v5-l-stack"
-    data-ouia-component-id="DataView-stack}"
+    data-ouia-component-id="DataView-stack"
   >
     <div
       class="pf-v5-l-stack__item"

package/src/DataViewTableTree/DataViewTableTree.test.tsx

@@ -82,4 +82,23 @@ describe('DataViewTableTree component', () => {
     );
     expect(container).toMatchSnapshot();
   });
+
+  test('should render tree table with an empty state', () => {
+    const { container } = render(
+      <DataView activeState="empty">
+        <DataViewTable isTreeTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} states={{ empty: "No data found" }} rows={[]} />
+
+      </DataView> 
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test('should render tree table with an error state', () => {
+    const { container } = render(
+      <DataView activeState="error">
+        <DataViewTable isTreeTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} states={{ error: "Some error" }} rows={[]} />
+      </DataView>
+    );
+    expect(container).toMatchSnapshot();
+  });
 });

package/src/DataViewTableTree/DataViewTableTree.tsx

@@ -5,11 +5,13 @@ import {
   Tbody,
   Td,
   TdProps,
+  Tr,
   TreeRowWrapper,
 } from '@patternfly/react-table';
 import { useInternalContext } from '../InternalContext';
 import { DataViewTableHeader } from '../DataViewTableHeader';
 import { DataViewTh, DataViewTrTree, isDataViewTdObject } from '../DataViewTable';
+import { DataViewState } from '../DataView/DataView';
 
 const getDescendants = (node: DataViewTrTree): DataViewTrTree[] => (!node.children || !node.children.length) ? [ node ] : node.children.flatMap(getDescendants);
 
@@ -34,6 +36,8 @@ export interface DataViewTableTreeProps extends Omit<TableProps, 'onSelect' | 'r
   columns: DataViewTh[];
   /** Current page rows */
   rows: DataViewTrTree[];
+  /** States to be displayed when active */
+  states?: Partial<Record<DataViewState, React.ReactNode>>
   /** Optional icon for the leaf rows */
   leafIcon?: React.ReactNode;
   /** Optional icon for the expanded parent rows */
@@ -47,19 +51,20 @@ export interface DataViewTableTreeProps extends Omit<TableProps, 'onSelect' | 'r
 export const DataViewTableTree: React.FC<DataViewTableTreeProps> = ({
   columns,
   rows,
+  states = {},
   leafIcon = null,
   expandedIcon = null,
   collapsedIcon = null,
   ouiaId = 'DataViewTableTree',
   ...props
 }: DataViewTableTreeProps) => {
-  const { selection } = useInternalContext();
+  const { selection, activeState } = useInternalContext();
   const { onSelect, isSelected, isSelectDisabled } = selection ?? {};
   const [ expandedNodeIds, setExpandedNodeIds ] = React.useState<string[]>([]);
   const [ expandedDetailsNodeNames, setExpandedDetailsNodeIds ] = React.useState<string[]>([]);
 
   const nodes = useMemo(() => {
-    
+
     const renderRows = (
       [ node, ...remainingNodes ]: DataViewTrTree[],
       level = 1,
@@ -99,7 +104,6 @@ export const DataViewTableTree: React.FC<DataViewTableTreeProps> = ({
           'aria-posinset': posinset,
           'aria-setsize': node.children?.length ?? 0,
           isChecked,
-          ouiaId: `${ouiaId}-tree-toggle-${node.id}`,
           checkboxId: `checkbox_id_${node.id?.toLowerCase().replace(/\s+/g, '_')}`,
           icon,
         },
@@ -110,7 +114,7 @@ export const DataViewTableTree: React.FC<DataViewTableTreeProps> = ({
         : [];
 
       return [
-        <TreeRowWrapper key={node.id} row={{ props: treeRow.props }}>
+        <TreeRowWrapper key={node.id} row={{ props: treeRow.props }} ouiaId={`${ouiaId}-tr-${rowIndex}`}>
           {node.row.map((cell, colIndex) => {
             const cellIsObject = isDataViewTdObject(cell);
             return (
@@ -131,12 +135,32 @@ export const DataViewTableTree: React.FC<DataViewTableTreeProps> = ({
     };
 
     return renderRows(rows);
-  }, [ rows, expandedNodeIds, expandedDetailsNodeNames, leafIcon, expandedIcon, collapsedIcon, isSelected, onSelect, isSelectDisabled, ouiaId ]);
+  }, [
+    rows,
+    expandedNodeIds,
+    expandedDetailsNodeNames,
+    leafIcon,
+    expandedIcon,
+    collapsedIcon,
+    isSelected,
+    onSelect,
+    isSelectDisabled,
+    ouiaId
+  ]);
 
   return (
     <Table isTreeTable aria-label="Data table" ouiaId={ouiaId} {...props}>
       <DataViewTableHeader isTreeTable columns={columns} ouiaId={ouiaId} />
-      <Tbody>{nodes}</Tbody>
+      <Tbody>{
+        activeState && Object.keys(states).includes(activeState) ? (
+          <Tr key={activeState} ouiaId={`${ouiaId}-tr-${activeState}`}>
+            <Td colSpan={columns.length}>
+              {states[activeState]}
+            </Td>
+          </Tr>
+        ) : nodes
+      }
+      </Tbody>
     </Table>
   );
 };