@patternfly/react-data-view 5.1.1 → 5.1.3

package/src/DataViewTable/DataViewTable.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import { DataViewTable } from './DataViewTable';
+import { DataViewTable, DataViewTrTree } from './DataViewTable';
 
 interface Repository {
   name: string;
@@ -8,30 +8,73 @@ interface Repository {
   prs: string | null;
   workspaces: string;
   lastCommit: string;
+  children?: Repository[];
 }
 
 const repositories: Repository[] = [
-  { name: 'one', branches: 'two', prs: 'three', workspaces: 'four', lastCommit: 'five' },
-  { name: 'one - 2', branches: null, prs: null, workspaces: 'four - 2', lastCommit: 'five - 2' },
-  { name: 'one - 3', branches: 'two - 3', prs: 'three - 3', workspaces: 'four - 3', lastCommit: 'five - 3' },
-  { name: 'one - 4', branches: 'two - 4', prs: 'null', workspaces: 'four - 4', lastCommit: 'five - 4' },
-  { name: 'one - 5', branches: 'two - 5', prs: 'three - 5', workspaces: 'four - 5', lastCommit: 'five - 5' },
-  { name: 'one - 6', branches: 'two - 6', prs: 'three - 6', workspaces: 'four - 6', lastCommit: 'five - 6' }
+  { 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(repo => ({
-  row: Object.values(repo),
+const rows = repositories.map(repo => ({ row: Object.values(repo) }));
+
+const repositoriesTree: Repository[] = [
+  { 
+    name: 'Repository one',
+    branches: 'Branch one',
+    prs: 'Pull request one',
+    workspaces: 'Workspace one',
+    lastCommit: 'Timestamp one',
+    children: [
+      { 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',
+    children: [ { 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 buildRows = (repositories: Repository[]): DataViewTrTree[] => repositories.map((repo) => ({
+  row: [ repo.name, repo.branches, repo.prs, repo.workspaces, repo.lastCommit ],
+  id: repo.name, // unique ID for each row
+  ...(repo.children
+    ? { 
+      children: buildRows(repo.children) // build rows for children
+    }
+    : {})
 }));
 
+const treeRows = buildRows(repositoriesTree);
+
 const columns = [ 'Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit' ];
 
 const ouiaId = 'TableExample';
 
 describe('DataViewTable component', () => {
-  test('should render correctly', () => {
+  test('should render a basic table correctly', () => {
     const { container } = render(
       <DataViewTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={rows} />
     );
     expect(container).toMatchSnapshot();
   });
+
+  test('should render a tree table correctly', () => {
+    const { container } = render(
+      <DataViewTable isTreeTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={treeRows} />
+    );
+    expect(container).toMatchSnapshot();
+  });
 });

package/src/DataViewTable/DataViewTable.tsx

@@ -1,96 +1,37 @@
 import React, { ReactNode } from 'react';
 import {
-  Table,
-  TableProps,
-  Tbody,
-  Td,
   TdProps,
-  Th,
-  Thead,
   ThProps,
-  Tr,
   TrProps
 } from '@patternfly/react-table';
-import { useInternalContext } from '../InternalContext';
+import { DataViewTableTree, DataViewTableTreeProps } from '../DataViewTableTree';
+import { DataViewTableBasic, DataViewTableBasicProps } from '../DataViewTableBasic';
 
+// Table header 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;
+
+// Basic table typings
+export interface DataViewTrObject { row: DataViewTd[], id?: string, props?: TrProps }
 export type DataViewTd = ReactNode | { cell: ReactNode; props?: TdProps };
-export type DataViewTr = DataViewTd[] | { row: DataViewTd[], id?: string, props?: TrProps };
+export type DataViewTr = DataViewTd[] | DataViewTrObject;
 
-export const isDataViewThObject = (value: DataViewTh): value is { cell: ReactNode; props?: ThProps } => value != null && typeof value === 'object' && 'cell' 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
+export interface DataViewTrTree extends DataViewTrObject { id: string, children?: DataViewTrTree[] }
 
-export interface DataViewTableProps extends Omit<TableProps, 'onSelect' | 'rows'> {
-  /** Columns definition */
-  columns: DataViewTh[];
-  /** Current page rows */
-  rows: DataViewTr[];
-  /** Custom OUIA ID */
-  ouiaId?: string;
-}
-
-export const DataViewTable: React.FC<DataViewTableProps> = ({
-  columns,
-  rows,
-  ouiaId = 'DataViewTable',
-  ...props
-}: DataViewTableProps) => {
-  const { selection } = useInternalContext();
-  const { onSelect, isSelected, isSelectDisabled } = selection ?? {};
+export type DataViewTableProps =
+  | ({
+      isTreeTable: true;
+    } & DataViewTableTreeProps)
+  | ({
+      isTreeTable?: false;
+    } & DataViewTableBasicProps);
 
-  return (
-    <Table aria-label="Data table" ouiaId={ouiaId} {...props}>
-      <Thead data-ouia-component-id={`${ouiaId}-thead`}>
-        <Tr ouiaId={`${ouiaId}-tr-head`}>
-          {onSelect && isSelected && <Th key="row-select" />}
-          {columns.map((column, index) => (
-            <Th
-              key={index}
-              {...(isDataViewThObject(column) && (column?.props ?? {}))}
-              data-ouia-component-id={`${ouiaId}-th-${index}`}
-            >
-              {isDataViewThObject(column) ? column.cell : column}
-            </Th>
-          ))}
-        </Tr>
-      </Thead>
-      <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 (
-                  <Td
-                    key={colIndex}
-                    {...(cellIsObject && (cell?.props ?? {}))}
-                    data-ouia-component-id={`${ouiaId}-td-${rowIndex}-${colIndex}`}
-                  >
-                    {cellIsObject ? cell.cell : cell}
-                  </Td>
-                )
-              })}
-            </Tr>
-          )})}
-      </Tbody>
-    </Table>
-  );
-};
+export const DataViewTable: React.FC<DataViewTableProps> = (props) => (
+  props.isTreeTable ? <DataViewTableTree {...props} /> : <DataViewTableBasic {...props} />
+);
 
 export default DataViewTable;