@patternfly/react-data-view 5.3.0 → 5.4.1

package/dist/esm/DataViewTableTree/DataViewTableTree.d.ts

@@ -7,8 +7,10 @@ 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>>;
+    /** Table head states to be displayed when active */
+    headStates?: Partial<Record<DataViewState | string, React.ReactNode>>;
+    /** Table body states to be displayed when active */
+    bodyStates?: Partial<Record<DataViewState | string, React.ReactNode>>;
     /** Optional icon for the leaf rows */
     leafIcon?: React.ReactNode;
     /** Optional icon for the expanded parent rows */

package/dist/esm/DataViewTableTree/DataViewTableTree.js

@@ -10,9 +10,9 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { useMemo } from 'react';
-import { Table, Tbody, Td, Tr, TreeRowWrapper, } from '@patternfly/react-table';
+import { Table, Tbody, Td, TreeRowWrapper, } from '@patternfly/react-table';
 import { useInternalContext } from '../InternalContext';
-import { DataViewTableHeader } from '../DataViewTableHeader';
+import { DataViewTableHead } from '../DataViewTableHead';
 import { isDataViewTdObject } from '../DataViewTable';
 const getDescendants = (node) => (!node.children || !node.children.length) ? [node] : node.children.flatMap(getDescendants);
 const isNodeChecked = (node, isSelected) => {
@@ -29,11 +29,13 @@ const isNodeChecked = (node, isSelected) => {
     return allSelected;
 };
 export const DataViewTableTree = (_a) => {
-    var { columns, rows, states = {}, leafIcon = null, expandedIcon = null, collapsedIcon = null, ouiaId = 'DataViewTableTree' } = _a, props = __rest(_a, ["columns", "rows", "states", "leafIcon", "expandedIcon", "collapsedIcon", "ouiaId"]);
+    var { columns, rows, headStates, bodyStates, leafIcon = null, expandedIcon = null, collapsedIcon = null, ouiaId = 'DataViewTableTree' } = _a, props = __rest(_a, ["columns", "rows", "headStates", "bodyStates", "leafIcon", "expandedIcon", "collapsedIcon", "ouiaId"]);
     const { selection, activeState } = useInternalContext();
     const { onSelect, isSelected, isSelectDisabled } = selection !== null && selection !== void 0 ? selection : {};
     const [expandedNodeIds, setExpandedNodeIds] = React.useState([]);
     const [expandedDetailsNodeNames, setExpandedDetailsNodeIds] = React.useState([]);
+    const activeHeadState = useMemo(() => activeState ? headStates === null || headStates === void 0 ? void 0 : headStates[activeState] : undefined, [activeState, headStates]);
+    const activeBodyState = useMemo(() => activeState ? bodyStates === null || bodyStates === void 0 ? void 0 : bodyStates[activeState] : undefined, [activeState, bodyStates]);
     const nodes = useMemo(() => {
         const renderRows = ([node, ...remainingNodes], level = 1, posinset = 1, rowIndex = 0, isHidden = false) => {
             var _a, _b, _c, _d;
@@ -97,8 +99,7 @@ export const DataViewTableTree = (_a) => {
         ouiaId
     ]);
     return (React.createElement(Table, Object.assign({ isTreeTable: true, "aria-label": "Data table", ouiaId: ouiaId }, props),
-        React.createElement(DataViewTableHeader, { isTreeTable: true, columns: columns, ouiaId: ouiaId }),
-        React.createElement(Tbody, null, activeState && Object.keys(states).includes(activeState) ? (React.createElement(Tr, { key: activeState, ouiaId: `${ouiaId}-tr-${activeState}` },
-            React.createElement(Td, { colSpan: columns.length }, states[activeState]))) : nodes)));
+        activeHeadState || React.createElement(DataViewTableHead, { isTreeTable: true, columns: columns, ouiaId: ouiaId }),
+        activeBodyState || React.createElement(Tbody, null, nodes)));
 };
 export default DataViewTableTree;

package/dist/esm/DataViewTableTree/DataViewTableTree.test.js

@@ -69,12 +69,17 @@ describe('DataViewTableTree component', () => {
     });
     test('should render tree table with an empty state', () => {
         const { container } = render(React.createElement(DataView, { activeState: "empty" },
-            React.createElement(DataViewTable, { isTreeTable: true, "aria-label": 'Repositories table', ouiaId: ouiaId, columns: columns, states: { empty: "No data found" }, rows: [] })));
+            React.createElement(DataViewTable, { isTreeTable: true, "aria-label": 'Repositories table', ouiaId: ouiaId, columns: columns, bodyStates: { empty: "No data found" }, rows: [] })));
         expect(container).toMatchSnapshot();
     });
     test('should render tree table with an error state', () => {
         const { container } = render(React.createElement(DataView, { activeState: "error" },
-            React.createElement(DataViewTable, { isTreeTable: true, "aria-label": 'Repositories table', ouiaId: ouiaId, columns: columns, states: { error: "Some error" }, rows: [] })));
+            React.createElement(DataViewTable, { isTreeTable: true, "aria-label": 'Repositories table', ouiaId: ouiaId, columns: columns, bodyStates: { error: "Some error" }, rows: [] })));
+        expect(container).toMatchSnapshot();
+    });
+    test('should render tree table with a loading state', () => {
+        const { container } = render(React.createElement(DataView, { activeState: "loading" },
+            React.createElement(DataViewTable, { isTreeTable: true, "aria-label": 'Repositories table', ouiaId: ouiaId, columns: columns, bodyStates: { loading: "Data is loading" }, rows: [] })));
         expect(container).toMatchSnapshot();
     });
 });

package/dist/esm/InternalContext/InternalContext.d.ts

@@ -8,12 +8,18 @@ export interface DataViewSelection {
     /** Determines if selection is disabled for a given item */
     isSelectDisabled?: (item: any) => boolean;
 }
-export interface InternalContextValue {
+export interface InternalContextProps {
+    /** Data selection props */
     selection?: DataViewSelection;
-    activeState?: DataViewState;
+    /** Currently active state */
+    activeState?: DataViewState | string;
+}
+export interface InternalContextValue extends InternalContextProps {
+    /** Flag indicating if data view is selectable (auto-calculated) */
+    isSelectable: boolean;
 }
 export declare const InternalContext: React.Context<InternalContextValue>;
-export type InternalProviderProps = PropsWithChildren<InternalContextValue>;
+export type InternalProviderProps = PropsWithChildren<InternalContextProps>;
 export declare const InternalContextProvider: React.FC<InternalProviderProps>;
 export declare const useInternalContext: () => InternalContextValue;
 export default InternalContext;

package/dist/esm/InternalContext/InternalContext.js

@@ -1,8 +1,12 @@
-import React, { createContext, useContext } from 'react';
+import React, { createContext, useContext, useMemo } from 'react';
 export const InternalContext = createContext({
     selection: undefined,
-    activeState: undefined
+    activeState: undefined,
+    isSelectable: false,
 });
-export const InternalContextProvider = ({ children, selection, activeState }) => (React.createElement(InternalContext.Provider, { value: { selection, activeState } }, children));
+export const InternalContextProvider = ({ children, selection, activeState }) => {
+    const isSelectable = useMemo(() => Boolean((selection === null || selection === void 0 ? void 0 : selection.onSelect) && (selection === null || selection === void 0 ? void 0 : selection.isSelected)), [selection === null || selection === void 0 ? void 0 : selection.onSelect, selection === null || selection === void 0 ? void 0 : selection.isSelected]);
+    return (React.createElement(InternalContext.Provider, { value: { selection, activeState, isSelectable } }, children));
+};
 export const useInternalContext = () => useContext(InternalContext);
 export default InternalContext;

package/dist/esm/index.d.ts

@@ -5,8 +5,8 @@ export { default as DataViewToolbar } from './DataViewToolbar';
 export * from './DataViewToolbar';
 export { default as DataViewTableTree } from './DataViewTableTree';
 export * from './DataViewTableTree';
-export { default as DataViewTableHeader } from './DataViewTableHeader';
-export * from './DataViewTableHeader';
+export { default as DataViewTableHead } from './DataViewTableHead';
+export * from './DataViewTableHead';
 export { default as DataViewTableBasic } from './DataViewTableBasic';
 export * from './DataViewTableBasic';
 export { default as DataViewTable } from './DataViewTable';

package/dist/esm/index.js

@@ -6,8 +6,8 @@ export { default as DataViewToolbar } from './DataViewToolbar';
 export * from './DataViewToolbar';
 export { default as DataViewTableTree } from './DataViewTableTree';
 export * from './DataViewTableTree';
-export { default as DataViewTableHeader } from './DataViewTableHeader';
-export * from './DataViewTableHeader';
+export { default as DataViewTableHead } from './DataViewTableHead';
+export * from './DataViewTableHead';
 export { default as DataViewTableBasic } from './DataViewTableBasic';
 export * from './DataViewTableBasic';
 export { default as DataViewTable } from './DataViewTable';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-data-view",
-  "version": "5.3.0",
+  "version": "5.4.1",
   "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/Components/Components.md

@@ -16,7 +16,7 @@ sourceLink: https://github.com/patternfly/react-data-view/blob/main/packages/mod
 ---
 import { Button, EmptyState, EmptyStateActions, EmptyStateBody, EmptyStateFooter, EmptyStateHeader, EmptyStateIcon } from '@patternfly/react-core';
 import { CubesIcon, FolderIcon, FolderOpenIcon, LeafIcon, ExclamationCircleIcon } from '@patternfly/react-icons';
-import { BulkSelect, ErrorState, ResponsiveAction, ResponsiveActions } from '@patternfly/react-component-groups';
+import { BulkSelect, ErrorState, ResponsiveAction, ResponsiveActions, SkeletonTableHead, SkeletonTableBody } from '@patternfly/react-component-groups';
 import { DataViewToolbar } from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
 import { DataViewTable } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
 import { useDataViewSelection } from '@patternfly/react-data-view/dist/dynamic/Hooks';
@@ -51,7 +51,7 @@ The **data view table** component renders your columns and rows definition into
 
 ### Rows and columns customization
 
-This example shows possible formats of `rows` and `columns` passed to the `DataViewTable` which allow you various customizations of the table header and body. 
+This example shows possible formats of `rows` and `columns` passed to the `DataViewTable` which allow you various customizations of the table head and body. 
 
 ```js file="./DataViewTableExample.tsx"
 
@@ -59,9 +59,9 @@ This example shows possible formats of `rows` and `columns` passed to the `DataV
 
 The `DataViewTable` component accepts the following props:
 
-- `columns` defining the column headers of the table. Each item in the array can be a `ReactNode` (for simple headers) or an object with the following properties:
-  - `cell` (`ReactNode`) content to display in the column header.
-  - optional `props` (`ThProps`) to pass to the `<Th>` component, such as `width`, `sort`, and other table header cell properties.
+- `columns` defining 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` (`ReactNode`) content to display in the column head.
+  - optional `props` (`ThProps`) to pass to the `<Th>` component, such as `width`, `sort`, and other table head cell properties.
 
 - `rows` defining the rows to be displayed in the table. Each item in the array can be either an array of `DataViewTd` (for simple rows) or an object with the following properties:
   - `row` (`DataViewTd[]`) defining the content for each cell in the row.
@@ -72,28 +72,37 @@ The `DataViewTable` component accepts the following props:
 
 - optional `props` (`TableProps`) that are passed down to the `<Table>` component, except for `onSelect`, which is managed internally.
 
+It is also possible to disable row selection using the `isSelectDisabled` function passed to the wrapping data view component through `selection`.
+
 ### Tree table example
 This example shows the tree table variant with expandable rows, custom icons for leaf and parent nodes. Tree table is turned on by passing `isTreeTable` flag to the `DataViewTable` component. You can pass `collapsedIcon`, `expandedIcon` or `leafIcon` to be displayen rows with given status. The tree table rows have to be defined in a format of object with following keys:
   - `row` (`DataViewTd[]`) defining the content for each cell in the row.
   - `id` (`string`) for the row (used to match items in selection end expand the rows).
   - optional `children` (`DataViewTrTree[]`) defining the children rows.
 
-It is also possible to disable row selection using the `isSelectDisabled` function passed to the wrapping data view component.
+It is also possible to disable row selection using the `isSelectDisabled` function passed to the wrapping data view component through `selection`.
 
 ```js file="./DataViewTableTreeExample.tsx"
 
 ```
 
 ### Empty state example
-The data view table supports displaying a custom empty state. You can pass it using the `states` property and `empty` key. It will be automatically displayed in case there are no rows to be rendered.
+The data view table supports displaying a custom empty state. You can pass it using the the `headStates` and `bodyStates` properties and their `empty` key. It will be automatically displayed in case there are no rows to be rendered.
 
 ```js file="./DataViewTableEmptyExample.tsx"
 
 ```
 
 ### Error state example
-The data view table also supports displaying an error state. You can pass it using the `states` property and `error` key. It will be displayed in case the data view recieves its `state` property set to `error`.
+The data view table also supports displaying an error state. You can pass it using the the `headStates` and `bodyStates` properties and their `error` key. It will be displayed in case the data view recieves its `state` property set to `error`.
 
 ```js file="./DataViewTableErrorExample.tsx"
 
 ```
+
+### Loading state example
+The data view table also supports displaying a custom loading state. You can pass it using the `headStates` and `bodyStates` properties and their `loading` key. Your state will be displayed in case the data view recieves its `state` property set to `loading`.
+
+```js file="./DataViewTableLoadingExample.tsx"
+
+```

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

@@ -3,6 +3,7 @@ import { DataView, DataViewState } from '@patternfly/react-data-view/dist/dynami
 import { DataViewTable, DataViewTr, DataViewTh } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
 import { CubesIcon } from '@patternfly/react-icons';
 import { Button, EmptyState, EmptyStateActions, EmptyStateBody, EmptyStateFooter, EmptyStateHeader, EmptyStateIcon } from '@patternfly/react-core';
+import { Tbody, Td, Tr } from '@patternfly/react-table';
 
 interface Repository {
   id: number;
@@ -23,19 +24,25 @@ const columns: DataViewTh[] = [ 'Repositories', 'Branches', 'Pull requests', 'Wo
 const ouiaId = 'TableExample';
 
 const empty = (
-  <EmptyState>
-    <EmptyStateHeader titleText="No data found" headingLevel="h4" icon={<EmptyStateIcon icon={CubesIcon} />} />
-    <EmptyStateBody>There are no matching data to be displayed.</EmptyStateBody>
-    <EmptyStateFooter>
-      <EmptyStateActions>
-        <Button variant="primary">Primary action</Button>
-      </EmptyStateActions>
-      <EmptyStateActions>
-        <Button variant="link">Multiple</Button>
-        <Button variant="link">Action Buttons</Button>
-      </EmptyStateActions>
-    </EmptyStateFooter>
-  </EmptyState>
+  <Tbody>
+    <Tr key="loading" ouiaId={`${ouiaId}-tr-loading`}>
+      <Td colSpan={columns.length}>
+        <EmptyState>
+          <EmptyStateHeader titleText="No data found" headingLevel="h4" icon={<EmptyStateIcon icon={CubesIcon} />} />
+          <EmptyStateBody>There are no matching data to be displayed.</EmptyStateBody>
+          <EmptyStateFooter>
+            <EmptyStateActions>
+              <Button variant="primary">Primary action</Button>
+            </EmptyStateActions>
+            <EmptyStateActions>
+              <Button variant="link">Multiple</Button>
+              <Button variant="link">Action Buttons</Button>
+            </EmptyStateActions>
+          </EmptyStateFooter>
+        </EmptyState>
+      </Td>
+    </Tr>
+  </Tbody>
 );
 
 export const BasicExample: React.FunctionComponent = () => (
@@ -45,7 +52,7 @@ export const BasicExample: React.FunctionComponent = () => (
       ouiaId={ouiaId}
       columns={columns}
       rows={rows}
-      states={{ empty }}
+      bodyStates={{ empty }}
     />
   </DataView>
 );

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

@@ -2,6 +2,7 @@ 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';
+import { Tbody, Td, Tr } from '@patternfly/react-table';
 
 interface Repository {
   id: number;
@@ -22,7 +23,13 @@ const columns: DataViewTh[] = [ 'Repositories', 'Branches', 'Pull requests', 'Wo
 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.' />
+  <Tbody>
+    <Tr key="loading" ouiaId={`${ouiaId}-tr-loading`}>
+      <Td colSpan={columns.length}>
+        <ErrorState errorTitle='Unable to load data' errorDescription='There was an error retrieving data. Check your connection and reload the page.' />
+      </Td>
+    </Tr>
+  </Tbody>
 );
 
 export const BasicExample: React.FunctionComponent = () => (
@@ -32,7 +39,7 @@ export const BasicExample: React.FunctionComponent = () => (
       ouiaId={ouiaId}
       columns={columns}
       rows={rows}
-      states={{ error }}
+      bodyStates={{ error }}
     />
   </DataView>
 );

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

@@ -0,0 +1,27 @@
+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 { SkeletonTableBody, SkeletonTableHead } from '@patternfly/react-component-groups';
+
+// you can also pass props to Tr by returning { row: DataViewTd[], props: TrProps } }
+const rows: DataViewTr[] = [];
+
+const columns: DataViewTh[] = [ 'Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit' ];
+
+const ouiaId = 'TableExample';
+
+const headLoading = <SkeletonTableHead columns={columns} />
+const bodyLoading = <SkeletonTableBody rowsCount={5} columnsCount={columns.length} />;
+
+export const BasicExample: React.FunctionComponent = () => (
+  <DataView activeState={DataViewState.loading}>
+    <DataViewTable
+      aria-label='Repositories table' 
+      ouiaId={ouiaId}
+      columns={columns}
+      rows={rows}
+      headStates={{ loading: headLoading }}
+      bodyStates={{ loading: bodyLoading }}
+    />
+  </DataView>
+);

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

@@ -18,6 +18,7 @@ import { Table, Tbody, Th, Thead, Tr, Td } from '@patternfly/react-table';
 import { DataView } from '@patternfly/react-data-view/dist/dynamic/DataView';
 import { DataViewTable } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
 import { useDataViewEventsContext, DataViewEventsContext, DataViewEventsProvider, EventTypes } from '@patternfly/react-data-view/dist/dynamic/DataViewEventsContext';
+import { useDataViewSelection } from '@patternfly/react-data-view/dist/dynamic/Hooks';
 import { Drawer, DrawerContent, DrawerContentBody } from '@patternfly/react-core';
 
 The **data view  events context** provides a way of listening to the data view events from the outside of the component.

package/patternfly-docs/content/extensions/data-view/examples/EventsContext/EventsExample.tsx

@@ -3,6 +3,8 @@ import { Drawer, DrawerActions, DrawerCloseButton, DrawerContent, DrawerContentB
 import { DataView } from '@patternfly/react-data-view/dist/dynamic/DataView';
 import { DataViewTable } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
 import { DataViewEventsProvider, EventTypes, useDataViewEventsContext } from '@patternfly/react-data-view/dist/dynamic/DataViewEventsContext';
+import { useDataViewSelection } from '@patternfly/react-data-view/dist/dynamic/Hooks';
+import { ActionsColumn } from '@patternfly/react-table';
 
 interface Repository {
   name: string;
@@ -64,25 +66,45 @@ interface RepositoriesTableProps {
   selectedRepo?: Repository;
 }
 
+const rowActions = [
+  {
+    title: 'Some action',
+    onClick: () => console.log('clicked on Some action')  // eslint-disable-line no-console
+  },
+  {
+    title: <div>Another action</div>,
+    onClick: () => console.log('clicked on Another action')  // eslint-disable-line no-console
+  },
+  {
+    isSeparator: true
+  },
+  {
+    title: 'Third action',
+    onClick: () => console.log('clicked on Third action')  // eslint-disable-line no-console
+  }
+];
+
 const RepositoriesTable: React.FunctionComponent<RepositoriesTableProps> = ({ selectedRepo = undefined }) => {
+  const selection = useDataViewSelection({ matchOption: (a, b) => a.row[0] === b.row[0] });
   const { trigger } = useDataViewEventsContext();
   const rows = useMemo(() => {
-    const handleRowClick = (repo: Repository | undefined) => {
-      trigger(EventTypes.rowClick, repo);
+    const handleRowClick = (event, repo: Repository | undefined) => {
+      // prevents drawer toggle on actions or checkbox click
+      (event.target.matches('td') || event.target.matches('tr')) && trigger(EventTypes.rowClick, repo);
     };
 
     return repositories.map(repo => ({
-      row: Object.values(repo),
+      row: [ ...Object.values(repo), { cell: <ActionsColumn items={rowActions}/>, props: { isActionCell: true } } ],
       props: {
         isClickable: true,
-        onRowClick: () => handleRowClick(selectedRepo?.name === repo.name ? undefined : repo),
+        onRowClick: (event) => handleRowClick(event, selectedRepo?.name === repo.name ? undefined : repo),
         isRowSelected: selectedRepo?.name === repo.name
       }
     }));
   }, [ selectedRepo?.name, trigger ]);
 
   return (
-    <DataView>
+    <DataView selection={selection}>
       <DataViewTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={rows} />
     </DataView>
   );

package/src/DataView/DataView.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Stack, StackItem } from '@patternfly/react-core';
+import { Stack, StackItem, StackProps } from '@patternfly/react-core';
 import { DataViewSelection, InternalContextProvider } from '../InternalContext';
 
 export const DataViewState = {
@@ -10,7 +10,8 @@ export const DataViewState = {
 
 export type DataViewState = typeof DataViewState[keyof typeof DataViewState];
 
-export interface DataViewProps {
+/** extends StackProps */
+export interface DataViewProps extends StackProps {
   /** Content rendered inside the data view */
   children: React.ReactNode;
   /** Custom OUIA ID */
@@ -18,7 +19,7 @@ export interface DataViewProps {
   /** Selection context configuration */
   selection?: DataViewSelection;
   /** Currently active state */
-  activeState?: DataViewState;
+  activeState?: DataViewState | string;
 }
 
 export type DataViewImpementationProps = Omit<DataViewProps, 'onSelect' | 'isItemSelected' | 'isItemSelectDisabled'>;

package/src/DataViewTable/DataViewTable.tsx

@@ -7,7 +7,7 @@ import {
 import { DataViewTableTree, DataViewTableTreeProps } from '../DataViewTableTree';
 import { DataViewTableBasic, DataViewTableBasicProps } from '../DataViewTableBasic';
 
-// Table header typings
+// Table head typings
 export type DataViewTh = ReactNode | { cell: ReactNode; props?: ThProps };
 export const isDataViewThObject = (value: DataViewTh): value is { cell: ReactNode; props?: ThProps } => value != null && typeof value === 'object' && 'cell' in value;
 

package/src/DataViewTableBasic/DataViewTableBasic.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
+import { DataView } from '../DataView';
 import { DataViewTableBasic } from './DataViewTableBasic';
-import DataView from '../DataView/DataView';
 
 interface Repository {
   name: string;
@@ -39,7 +39,7 @@ describe('DataViewTable component', () => {
   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={[]} />
+        <DataViewTableBasic aria-label='Repositories table' ouiaId={ouiaId} columns={columns} bodyStates={{ empty: "No data found" }} rows={[]} />
       </DataView>
     );
     expect(container).toMatchSnapshot();
@@ -48,9 +48,18 @@ describe('DataViewTable component', () => {
   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={[]} />
+        <DataViewTableBasic aria-label='Repositories table' ouiaId={ouiaId} columns={columns} bodyStates={{ error: "Some error" }} rows={[]} />
       </DataView>
     );
     expect(container).toMatchSnapshot();
   });
+
+  test('should render with a loading state', () => {
+    const { container } = render(
+      <DataView activeState="loading">
+        <DataViewTableBasic aria-label='Repositories table' ouiaId={ouiaId} columns={columns} bodyStates={{ loading: "Data is loading" }} rows={[]} />
+      </DataView> 
+    );
+    expect(container).toMatchSnapshot();
+  });
 });

package/src/DataViewTableBasic/DataViewTableBasic.tsx

@@ -7,7 +7,7 @@ import {
   Tr,
 } from '@patternfly/react-table';
 import { useInternalContext } from '../InternalContext';
-import { DataViewTableHeader } from '../DataViewTableHeader';
+import { DataViewTableHead } from '../DataViewTableHead';
 import { DataViewTh, DataViewTr, isDataViewTdObject, isDataViewTrObject } from '../DataViewTable';
 import { DataViewState } from '../DataView/DataView';
 
@@ -16,8 +16,10 @@ export interface DataViewTableBasicProps extends Omit<TableProps, 'onSelect' | '
   columns: DataViewTh[];
   /** Current page rows */
   rows: DataViewTr[];
-  /** States to be displayed when active */
-  states?: Partial<Record<DataViewState, React.ReactNode>>
+  /** Table head states to be displayed when active */
+  headStates?: Partial<Record<DataViewState | string, React.ReactNode>>
+  /** Table body states to be displayed when active */
+  bodyStates?: Partial<Record<DataViewState | string, React.ReactNode>>
   /** Custom OUIA ID */
   ouiaId?: string;
 }
@@ -26,57 +28,53 @@ export const DataViewTableBasic: React.FC<DataViewTableBasicProps> = ({
   columns,
   rows,
   ouiaId = 'DataViewTableBasic',
-  states = {},
+  headStates,
+  bodyStates,
   ...props
 }: DataViewTableBasicProps) => {
-  const { selection, activeState } = useInternalContext();
+  const { selection, activeState, isSelectable } = useInternalContext();
   const { onSelect, isSelected, isSelectDisabled } = selection ?? {};
-  const isSelectable = useMemo(() => Boolean(onSelect && isSelected), [ onSelect, isSelected ]);
+
+  const activeHeadState = useMemo(() => activeState ? headStates?.[activeState] : undefined, [ activeState, headStates ]);
+  const activeBodyState = useMemo(() => activeState ? bodyStates?.[activeState] : undefined, [ activeState, bodyStates ]);
+
+  const renderedRows = useMemo(() => rows.map((row, rowIndex) => {
+    const rowIsObject = isDataViewTrObject(row);
+    return (
+      <Tr key={rowIndex} ouiaId={`${ouiaId}-tr-${rowIndex}`} {...(rowIsObject && row?.props)}>
+        {isSelectable && (
+          <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 (
+            <Td
+              key={colIndex}
+              {...(cellIsObject && (cell?.props ?? {}))}
+              data-ouia-component-id={`${ouiaId}-td-${rowIndex}-${colIndex}`}
+            >
+              {cellIsObject ? cell.cell : cell}
+            </Td>
+          );
+        })}
+      </Tr>
+    );
+  }), [ rows, isSelectable, isSelected, isSelectDisabled, onSelect, ouiaId ]);
 
   return (
     <Table aria-label="Data table" ouiaId={ouiaId} {...props}>
-      <DataViewTableHeader columns={columns} ouiaId={ouiaId} />
-      <Tbody>
-        {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={`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>
+      { activeHeadState || <DataViewTableHead columns={columns} ouiaId={ouiaId} /> }
+      { activeBodyState || <Tbody>{renderedRows}</Tbody> }
     </Table>
   );
 };