From ed0de6e4ac0b7fa5b6e2d6cf9a34dcb2d9d5d4c8 Mon Sep 17 00:00:00 2001 From: Filip Hlavac Date: Sat, 24 Aug 2024 00:06:01 +0200 Subject: [PATCH] Init table renderer --- .../data-view/examples/Layout/Layout.md | 1 + .../Layout/PredefinedLayoutExample.tsx | 22 +++--- .../src/DataViewTable/DataViewTable.test.tsx | 0 .../src/DataViewTable/DataViewTable.tsx | 70 +++++++++++++++++++ packages/module/src/DataViewTable/index.ts | 2 + packages/module/src/index.ts | 3 + 6 files changed, 88 insertions(+), 10 deletions(-) create mode 100644 packages/module/src/DataViewTable/DataViewTable.test.tsx create mode 100644 packages/module/src/DataViewTable/DataViewTable.tsx create mode 100644 packages/module/src/DataViewTable/index.ts diff --git a/packages/module/patternfly-docs/content/extensions/data-view/examples/Layout/Layout.md b/packages/module/patternfly-docs/content/extensions/data-view/examples/Layout/Layout.md index 194c9be..f984daa 100644 --- a/packages/module/patternfly-docs/content/extensions/data-view/examples/Layout/Layout.md +++ b/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. diff --git a/packages/module/patternfly-docs/content/extensions/data-view/examples/Layout/PredefinedLayoutExample.tsx b/packages/module/patternfly-docs/content/extensions/data-view/examples/Layout/PredefinedLayoutExample.tsx index 2b8adcb..1ded845 100644 --- a/packages/module/patternfly-docs/content/extensions/data-view/examples/Layout/PredefinedLayoutExample.tsx +++ b/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 = () => { /> } /> - + {/* How to pass select? */} + + {/*
))} -
@@ -103,7 +105,7 @@ export const BasicExample: React.FunctionComponent = () => {
+ */} { + key: string, + label: React.ReactNode, +} + +export interface DataViewTableProps extends Omit { + /** Columns definition in key, label format */ + columns: DataViewTableColumn[]; + /** Current page data */ + pageData: Record[]; + /** Callback when a row is selected or deselected */ + onSelect: (isSelecting: boolean, dataItem: Record) => void; + /** Function to determine if a row is selected */ + isSelected: (dataItem: Record) => boolean; + /** Custom OUIA ID */ + ouiaId?: string; +} + +export const DataViewTable: React.FC = ({ + columns, + pageData, + ouiaId = "DataViewTable", + onSelect, + isSelected, + ...props +}: DataViewTableProps) => ( + + + + + ))} + + + + {pageData.map((item, rowIndex) => ( + + {onSelect && ( + + ))} + + ))} + +
+ {columns.map(({ key, label, ...rest }) => ( + + {label} +
onSelect(isSelecting, item), + isSelected: isSelected(item), + isDisabled: false + }} + />) + } + {/* How to modify rendered cell content? Pass node or mapping function? */} + {columns.map((column, colIndex) => ( + + {item[column.key]} +
+) + +export default DataViewTable; diff --git a/packages/module/src/DataViewTable/index.ts b/packages/module/src/DataViewTable/index.ts new file mode 100644 index 0000000..3537380 --- /dev/null +++ b/packages/module/src/DataViewTable/index.ts @@ -0,0 +1,2 @@ +export { default } from './DataViewTable'; +export * from './DataViewTable'; diff --git a/packages/module/src/index.ts b/packages/module/src/index.ts index f87a6d0..28e1d68 100644 --- a/packages/module/src/index.ts +++ b/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';