},
];
const rows: DataViewTr[] = repositories.map(({ id, name, branches, prs, workspaces, lastCommit }) => [
- {
- id,
- cell: workspaces,
- props: {
- favorites: { isFavorited: true }
- }
- },
- { cell: },
+ { id, cell: name },
branches,
prs,
workspaces,
- lastCommit,
- { cell: , props: { isActionCell: true } },
+ lastCommit
]);
-const columns: DataViewTh[] = [
- null,
- 'Repositories',
- { cell: <>Branches },
- 'Pull requests',
- { cell: 'Workspaces', props: { info: { tooltip: 'More information' }, isStickyColumn: true } },
- { cell: 'Last commit', props: { sort: { sortBy: {}, columnIndex: 4 } } },
-];
+const columns: DataViewTh[] = [ null, 'Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit' ];
-const ouiaId = 'TableExample';
+const ouiaId = 'ExpandableTableExample';
export const ExpandableExample: FunctionComponent = () => (
diff --git a/packages/module/patternfly-docs/content/extensions/data-view/examples/Table/DataViewTableInteractiveExample.tsx b/packages/module/patternfly-docs/content/extensions/data-view/examples/Table/DataViewTableInteractiveExample.tsx
index 4972770d..58ad7fed 100644
--- a/packages/module/patternfly-docs/content/extensions/data-view/examples/Table/DataViewTableInteractiveExample.tsx
+++ b/packages/module/patternfly-docs/content/extensions/data-view/examples/Table/DataViewTableInteractiveExample.tsx
@@ -114,11 +114,11 @@ export const InteractiveExample: FunctionComponent = () => {
setIsExpandable(checked)}
- aria-label="Toggle expandable rows"
+ aria-label="Toggle compound expandable rows"
/>
diff --git a/packages/module/patternfly-docs/content/extensions/data-view/examples/Table/Table.md b/packages/module/patternfly-docs/content/extensions/data-view/examples/Table/Table.md
index 2aa382ad..60b60034 100644
--- a/packages/module/patternfly-docs/content/extensions/data-view/examples/Table/Table.md
+++ b/packages/module/patternfly-docs/content/extensions/data-view/examples/Table/Table.md
@@ -58,28 +58,26 @@ If you want to have all expandable nodes open on initial load pass the `expandAl
```
-## Expandable rows
+## Adding expandable content to rows
-To add expandable content to table cells, pass an array of `ExpandableContent` objects to the `expandedRows` prop of the `` component. Each expandable content object defines which cell can be expanded and what content to display when expanded.
+To add expandable content to table rows, pass an array of `ExpandableContent` objects to the `expandedRows` prop of the `` component and set `isExpandable` to `true`.
The `ExpandableContent` interface is defined as:
```typescript
interface ExpandableContent {
- /** The ID of the row containing the expandable cell (must match the id property in the row data) */
- rowId: number;
- /** The column index (0-based) that should be expandable */
- columnId: number;
- /** The content to display when the cell is expanded */
+ rowId: string | number;
+ columnId?: number;
content: ReactNode;
}
```
+The `columnId` property is optional. Omit it for [expandable rows](#expandable-rows-example), which add an expand toggle as the first column. Provide it on all entries for [compound expandable rows](#compound-expandable-rows), where individual cells act as expand toggles.
+
+## Expandable rows
-When a cell has expandable content:
-- A compound expand toggle button appears in the cell
-- Clicking the toggle expands the row to show the additional content below
-- Only one expanded cell is shown per row at a time
-- Clicking another expandable cell in the same row switches the expanded content
+To make a parent/child row pair expandable, omit `columnId` from the expandable content entries:
+- A toggle is added as the first column (no column header)
+- Rows without matching expandable content display an empty toggle cell
### Expandable rows example
@@ -87,6 +85,18 @@ When a cell has expandable content:
```
+## Compound expandable rows
+
+To make a parent/child row pair compound expandable, provide `columnId` on all expandable content entries:
+- Individual cells with expandable content act as expand toggles
+- Only one cell can be expanded per row at a time
+
+### Compound expandable rows example
+
+```js file="./DataViewTableCompoundExpandableExample.tsx"
+
+```
+
## Sticky header and columns
To enable sticky headers and columns, set the `isSticky` prop to `true` on the `` component. This keeps the table header and designated columns visible when scrolling.
@@ -112,8 +122,8 @@ When sticky headers and columns are enabled:
```
### Interactive example
-- Interactive example show how the different composable options work together.
-- By toggling the toggles you can switch between them and observe the behaviour
+- This interactive example shows how the different composable options work together
+- By toggling the toggles, you can switch between them and observe the behaviour
```js file="./DataViewTableInteractiveExample.tsx"
diff --git a/packages/module/patternfly-docs/generated/index.js b/packages/module/patternfly-docs/generated/index.js
index 610e983e..be229904 100644
--- a/packages/module/patternfly-docs/generated/index.js
+++ b/packages/module/patternfly-docs/generated/index.js
@@ -14,8 +14,8 @@ module.exports = {
'/extensions/data-view/table/react': {
id: "Table",
title: "Data view table",
- toc: [{"text":"Configuring rows and columns"},[{"text":"Table example"}],{"text":"Expandable rows"},[{"text":"Expandable rows example"}],{"text":"Sticky header and columns"},[{"text":"Sticky header and columns example"},{"text":"Interactive example"},{"text":"Resizable columns"}],{"text":"Tree table"},[{"text":"Tree table example"}],{"text":"Sorting"},[{"text":"Sorting example"},{"text":"Sorting state"}],{"text":"States"},[{"text":"Empty"},{"text":"Error"},{"text":"Loading"}]],
- examples: ["Table example","Expandable rows example","Sticky header and columns example","Interactive example","Resizable columns","Tree table example","Sorting example","Empty","Error","Loading"],
+ toc: [{"text":"Configuring rows and columns"},[{"text":"Table example"}],{"text":"Adding expandable content to rows"},{"text":"Expandable rows"},[{"text":"Expandable rows example"}],{"text":"Compound expandable rows"},[{"text":"Compound expandable rows example"}],{"text":"Sticky header and columns"},[{"text":"Sticky header and columns example"},{"text":"Interactive example"},{"text":"Resizable columns"}],{"text":"Tree table"},[{"text":"Tree table example"}],{"text":"Sorting"},[{"text":"Sorting example"},{"text":"Sorting state"}],{"text":"States"},[{"text":"Empty"},{"text":"Error"},{"text":"Loading"}]],
+ examples: ["Table example","Expandable rows example","Compound expandable rows example","Sticky header and columns example","Interactive example","Resizable columns","Tree table example","Sorting example","Empty","Error","Loading"],
section: "extensions",
subsection: "Data view",
source: "react",
diff --git a/packages/module/src/DataViewTableBasic/DataViewTableBasic.test.tsx b/packages/module/src/DataViewTableBasic/DataViewTableBasic.test.tsx
index c52e1959..d6cf63c3 100644
--- a/packages/module/src/DataViewTableBasic/DataViewTableBasic.test.tsx
+++ b/packages/module/src/DataViewTableBasic/DataViewTableBasic.test.tsx
@@ -45,6 +45,19 @@ const objectExpandableContents: ExpandableContent[] = [
{ rowId: '1', columnId: 1, content: