feat(table): Display a simple table in DataView

Author: fhlavac

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

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

packages/module/patternfly-docs/content/extensions/data-view/examples/DataView/DataViewPredefinedLayoutExample.tsx

@@ -1,24 +1,65 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Pagination } from '@patternfly/react-core';
+import { Table, Tbody, Th, Thead, Tr, Td } from '@patternfly/react-table';
+import { useDataViewPagination } 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';
 
-const layoutItemStyling = {
-  width: '100%',
-  height: '5rem',
-  padding: 'var(--pf-t--global--spacer--md)',
-  border: 'var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default)'
-};
+const perPageOptions = [
+  { title: '5', value: 5 },
+  { title: '10', value: 10 }
+]
 
-const PAGINATION = {
-  page: 1,
-  perPage: 1
+interface Repository {
+  name: string;
+  branches: string | null;
+  prs: string | null;
+  workspaces: string;
+  lastCommit: string;
 }
 
-export const BasicExample: React.FunctionComponent = () => (
-  <DataView>
-    <DataViewToolbar pagination={<Pagination {...PAGINATION} />} />
-    <div style={layoutItemStyling}>Data representation</div>
-    <DataViewToolbar pagination={<Pagination isCompact {...PAGINATION} ouiaId="DataViewFooter" />} />
-  </DataView>
-)
+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' }
+];
+
+const cols = {
+  name: 'Repositories',
+  branches: 'Branches',
+  prs: 'Pull requests',
+  workspaces: 'Workspaces',
+  lastCommit: 'Last commit'
+};
+
+const ouiaId = 'LayoutExample';
+
+export const BasicExample: React.FunctionComponent = () => { 
+  const pagination = useDataViewPagination({ perPage: 5 });
+  const { page, perPage } = pagination;
+
+  const data = useMemo(() => repositories.slice((page - 1) * perPage, ((page - 1) * perPage) + perPage), [ page, perPage ]);
+
+  return (
+    <DataView>
+      <DataViewToolbar pagination={<Pagination ouiaId={`${ouiaId}Header-pagination`} perPageOptions={perPageOptions} itemCount={repositories.length} {...pagination} />} />
+      <Table aria-label="Repositories table" ouiaId={ouiaId}>
+        <Thead data-ouia-component-id={`${ouiaId}-thead`}>
+          <Tr ouiaId={`${ouiaId}-tr-head`}>
+            {Object.values(cols).map((column, index) => <Th key={index} data-ouia-component-id={`${ouiaId}-th-${index}`}>{column}</Th>)}
+          </Tr>
+        </Thead>
+        <Tbody>
+          {data.map((repo, rowIndex) => (
+            <Tr key={repo.name} ouiaId={`${ouiaId}-tr-${rowIndex}`}>
+              {Object.keys(cols).map((column, colIndex) => <Td key={colIndex} data-ouia-component-id={`${ouiaId}-td-${rowIndex}-${colIndex}`}>{repo[column]}</Td>)}
+            </Tr>
+          ))}
+        </Tbody>
+      </Table>
+      <DataViewToolbar pagination={<Pagination isCompact ouiaId={`${ouiaId}Footer-pagination`} perPageOptions={perPageOptions} itemCount={repositories.length} {...pagination} />} />
+    </DataView>
+  )}

packages/module/src/DataView/DataView.test.tsx

@@ -1 +1 @@
-export * from './useDataViewPagination';
+export * from './pagination';

packages/module/src/Hooks/index.ts

@@ -0,0 +1,28 @@
+import { useState } from "react";
+
+export interface UseDataViewPaginationProps {
+  page?: number;
+  perPage: number;
+}
+
+export interface DataViewPaginationProps extends UseDataViewPaginationProps {
+    page: number;
+}
+
+export const useDataViewPagination = ({ page = 1, perPage }: UseDataViewPaginationProps) => { 
+  const [ state, setState ] = useState({ page, perPage });
+  
+  const onPerPageSelect = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent | undefined, newPerPage: number) => {
+    setState(prev => ({ ...prev, perPage: newPerPage }));
+  }
+  
+  const onSetPage = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent | undefined, newPage: number) => {
+    setState(prev => ({ ...prev, page: newPage }));
+  }
+  
+  return {
+    ...state,
+    onPerPageSelect,
+    onSetPage
+  }
+}