Init table renderer

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

@@ -19,6 +19,7 @@ import { useDataViewPagination, useDataViewSelection } from '@patternfly/react-d
 import { BulkSelect, BulkSelectValue } from '@patternfly/react-component-groups/dist/dynamic/BulkSelect';
 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';
 
 The **data view** component renders record data in a configured layout.
 

packages/module/patternfly-docs/content/extensions/data-view/examples/Layout/PredefinedLayoutExample.tsx

@@ -1,9 +1,9 @@
 import React, { useMemo } from 'react';
 import { Pagination } from '@patternfly/react-core';
-import { Table, Tbody, Th, Thead, Tr, Td } from '@patternfly/react-table';
 import { useDataViewPagination, useDataViewSelection } from '@patternfly/react-data-view/dist/dynamic/Hooks';
 import { BulkSelect, BulkSelectValue } from '@patternfly/react-component-groups/dist/dynamic/BulkSelect';
 import { DataView } from '@patternfly/react-data-view/dist/dynamic/DataView';
+import { DataViewTable } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
 import { DataViewToolbar } from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
 
 const perPageOptions = [
@@ -28,13 +28,13 @@ const repositories: Repository[] = [
   { 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 columns = [
+  { key: 'name', label: 'Repositories' },
+  { key: 'branches', label: 'Branches' },
+  { key: 'prs', label: 'Pull requests' },
+  { key: 'workspaces', label: 'Workspaces' },
+  { key: 'lastCommit', label: 'Last commit' },
+];
 
 const ouiaId = 'LayoutExample';
 
@@ -76,7 +76,9 @@ export const BasicExample: React.FunctionComponent = () => {
           />
         } 
       />
-      <Table aria-label="Repositories table" ouiaId={ouiaId}>
+      {/* How to pass select? */}
+      <DataViewTable columns={columns} ouiaId={ouiaId} pageData={pageData} />
+      {/* <Table aria-label="Repositories table" ouiaId={ouiaId}>
         <Thead data-ouia-component-id={`${ouiaId}-thead`}>
           <Tr ouiaId={`${ouiaId}-tr-head`}>
             <Th key="row-select"/>
@@ -103,7 +105,7 @@ export const BasicExample: React.FunctionComponent = () => {
             </Tr>
           ))}
         </Tbody>
-      </Table>
+      </Table> */}
       <DataViewToolbar
         ouiaId='LayoutExampleFooter'
         pagination={

packages/module/src/DataViewTable/DataViewTable.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { Table, TableProps, Tbody, Td, Th, Thead, ThProps, Tr } from '@patternfly/react-table';
+
+export interface DataViewTableColumn extends Omit<ThProps, 'label'> {
+  key: string,
+  label: React.ReactNode,
+}
+
+export interface DataViewTableProps extends Omit<TableProps, 'onSelect'> {
+  /** Columns definition in key, label format */
+  columns: DataViewTableColumn[];
+  /** Current page data */
+  pageData: Record<string, any>[];
+  /** Callback when a row is selected or deselected */
+  onSelect: (isSelecting: boolean, dataItem: Record<string, any>) => void;
+  /** Function to determine if a row is selected */
+  isSelected: (dataItem: Record<string, any>) => boolean;
+  /** Custom OUIA ID */
+  ouiaId?: string;
+}
+
+export const DataViewTable: React.FC<DataViewTableProps> = ({
+  columns,
+  pageData,
+  ouiaId = "DataViewTable",
+  onSelect,
+  isSelected,
+  ...props
+}: DataViewTableProps) => (
+  <Table aria-label="Data table" ouiaId={ouiaId} {...props}>
+    <Thead data-ouia-component-id={`${ouiaId}-thead`}>
+      <Tr ouiaId={`${ouiaId}-tr-head`}>
+        <Th key="row-select" />
+        {columns.map(({ key, label, ...rest }) => (
+          <Th key={key} data-ouia-component-id={`${ouiaId}-th-${key}`} {...rest}>
+            {label}
+          </Th>
+        ))}
+      </Tr>
+    </Thead>
+    <Tbody>
+      {pageData.map((item, rowIndex) => (
+        <Tr key={item.name} ouiaId={`${ouiaId}-tr-${rowIndex}`}>
+          {onSelect && (
+            <Td
+              key={`select-${rowIndex}`}
+              select={{
+                rowIndex,
+                onSelect: (_event, isSelecting) => onSelect(isSelecting, item),
+                isSelected: isSelected(item),
+                isDisabled: false
+              }}
+            />)
+          }
+          {/* How to modify rendered cell content? Pass node or mapping function? */}
+          {columns.map((column, colIndex) => (
+            <Td
+              key={column.key}
+              data-ouia-component-id={`${ouiaId}-td-${rowIndex}-${colIndex}`}
+            >
+              {item[column.key]}
+            </Td>
+          ))}
+        </Tr>
+      ))}
+    </Tbody>
+  </Table>
+)
+
+export default DataViewTable;

packages/module/src/DataViewTable/index.ts

@@ -0,0 +1,2 @@
+export { default } from './DataViewTable';
+export * from './DataViewTable';

packages/module/src/index.ts

@@ -4,5 +4,8 @@ export * from './Hooks';
 export { default as DataViewToolbar } from './DataViewToolbar';
 export * from './DataViewToolbar';
 
+export { default as DataViewTable } from './DataViewTable';
+export * from './DataViewTable';
+
 export { default as DataView } from './DataView';
 export * from './DataView';