@patternfly/react-table 4.53.0 → 4.54.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +35 -0
- package/dist/esm/components/Table/SelectColumn.d.ts.map +1 -1
- package/dist/esm/components/Table/SelectColumn.js +2 -1
- package/dist/esm/components/Table/SelectColumn.js.map +1 -1
- package/dist/js/components/Table/SelectColumn.d.ts.map +1 -1
- package/dist/js/components/Table/SelectColumn.js +2 -1
- package/dist/js/components/Table/SelectColumn.js.map +1 -1
- package/dist/umd/react-table.css +17 -3
- package/dist/umd/react-table.js +2 -1
- package/dist/umd/react-table.min.css +17 -3
- package/dist/umd/react-table.min.js +1 -1
- package/package.json +6 -6
- package/src/components/Table/SelectColumn.tsx +3 -1
- package/src/components/Table/__snapshots__/Table.test.tsx.snap +117 -91
- package/src/components/TableComposable/examples/ComposableTable.md +5 -0
- package/src/components/TableComposable/examples/ComposableTableNestedTableExpandable.tsx +189 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@patternfly/react-table",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.54.1",
|
|
4
4
|
"description": "This library provides a set of React table components for use with the PatternFly 4",
|
|
5
5
|
"main": "dist/js/index.js",
|
|
6
6
|
"module": "dist/esm/index.js",
|
|
@@ -31,10 +31,10 @@
|
|
|
31
31
|
"clean": "rimraf dist"
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"@patternfly/react-core": "^4.
|
|
35
|
-
"@patternfly/react-icons": "^4.
|
|
36
|
-
"@patternfly/react-styles": "^4.
|
|
37
|
-
"@patternfly/react-tokens": "^4.
|
|
34
|
+
"@patternfly/react-core": "^4.185.1",
|
|
35
|
+
"@patternfly/react-icons": "^4.36.1",
|
|
36
|
+
"@patternfly/react-styles": "^4.35.1",
|
|
37
|
+
"@patternfly/react-tokens": "^4.37.1",
|
|
38
38
|
"lodash": "^4.17.19",
|
|
39
39
|
"tslib": "^2.0.0"
|
|
40
40
|
},
|
|
@@ -46,5 +46,5 @@
|
|
|
46
46
|
"react": "^16.8.0 || ^17.0.0",
|
|
47
47
|
"react-dom": "^16.8.0 || ^17.0.0"
|
|
48
48
|
},
|
|
49
|
-
"gitHead": "
|
|
49
|
+
"gitHead": "430fd806b786f8869adfd434ea94b1e3b272d833"
|
|
50
50
|
}
|
|
@@ -22,7 +22,9 @@ export const SelectColumn: React.FunctionComponent<SelectColumnProps> = ({
|
|
|
22
22
|
...props
|
|
23
23
|
}: SelectColumnProps) => (
|
|
24
24
|
<React.Fragment>
|
|
25
|
-
<
|
|
25
|
+
<label>
|
|
26
|
+
<input {...props} type={selectVariant} onChange={onSelect} />
|
|
27
|
+
</label>
|
|
26
28
|
{children}
|
|
27
29
|
</React.Fragment>
|
|
28
30
|
);
|
|
@@ -83108,13 +83108,15 @@ exports[`Selectable table 1`] = `
|
|
|
83108
83108
|
onSelect={[Function]}
|
|
83109
83109
|
selectVariant="checkbox"
|
|
83110
83110
|
>
|
|
83111
|
-
<
|
|
83112
|
-
|
|
83113
|
-
|
|
83114
|
-
|
|
83115
|
-
|
|
83116
|
-
|
|
83117
|
-
|
|
83111
|
+
<label>
|
|
83112
|
+
<input
|
|
83113
|
+
aria-label="Select all rows"
|
|
83114
|
+
checked={false}
|
|
83115
|
+
name="check-all"
|
|
83116
|
+
onChange={[Function]}
|
|
83117
|
+
type="checkbox"
|
|
83118
|
+
/>
|
|
83119
|
+
</label>
|
|
83118
83120
|
</SelectColumn>
|
|
83119
83121
|
</td>
|
|
83120
83122
|
</ThBase>
|
|
@@ -86960,13 +86962,15 @@ exports[`Selectable table 1`] = `
|
|
|
86960
86962
|
onSelect={[Function]}
|
|
86961
86963
|
selectVariant="checkbox"
|
|
86962
86964
|
>
|
|
86963
|
-
<
|
|
86964
|
-
|
|
86965
|
-
|
|
86966
|
-
|
|
86967
|
-
|
|
86968
|
-
|
|
86969
|
-
|
|
86965
|
+
<label>
|
|
86966
|
+
<input
|
|
86967
|
+
aria-label="Select row 0"
|
|
86968
|
+
checked={false}
|
|
86969
|
+
name="checkrow0"
|
|
86970
|
+
onChange={[Function]}
|
|
86971
|
+
type="checkbox"
|
|
86972
|
+
/>
|
|
86973
|
+
</label>
|
|
86970
86974
|
</SelectColumn>
|
|
86971
86975
|
</td>
|
|
86972
86976
|
</TdBase>
|
|
@@ -88986,13 +88990,15 @@ exports[`Selectable table 1`] = `
|
|
|
88986
88990
|
onSelect={[Function]}
|
|
88987
88991
|
selectVariant="checkbox"
|
|
88988
88992
|
>
|
|
88989
|
-
<
|
|
88990
|
-
|
|
88991
|
-
|
|
88992
|
-
|
|
88993
|
-
|
|
88994
|
-
|
|
88995
|
-
|
|
88993
|
+
<label>
|
|
88994
|
+
<input
|
|
88995
|
+
aria-label="Select row 3"
|
|
88996
|
+
checked={false}
|
|
88997
|
+
name="checkrow3"
|
|
88998
|
+
onChange={[Function]}
|
|
88999
|
+
type="checkbox"
|
|
89000
|
+
/>
|
|
89001
|
+
</label>
|
|
88996
89002
|
</SelectColumn>
|
|
88997
89003
|
</td>
|
|
88998
89004
|
</TdBase>
|
|
@@ -90342,13 +90348,15 @@ exports[`Selectable table 1`] = `
|
|
|
90342
90348
|
onSelect={[Function]}
|
|
90343
90349
|
selectVariant="checkbox"
|
|
90344
90350
|
>
|
|
90345
|
-
<
|
|
90346
|
-
|
|
90347
|
-
|
|
90348
|
-
|
|
90349
|
-
|
|
90350
|
-
|
|
90351
|
-
|
|
90351
|
+
<label>
|
|
90352
|
+
<input
|
|
90353
|
+
aria-label="Select row 5"
|
|
90354
|
+
checked={false}
|
|
90355
|
+
name="checkrow5"
|
|
90356
|
+
onChange={[Function]}
|
|
90357
|
+
type="checkbox"
|
|
90358
|
+
/>
|
|
90359
|
+
</label>
|
|
90352
90360
|
</SelectColumn>
|
|
90353
90361
|
</td>
|
|
90354
90362
|
</TdBase>
|
|
@@ -91034,13 +91042,15 @@ exports[`Selectable table 1`] = `
|
|
|
91034
91042
|
onSelect={[Function]}
|
|
91035
91043
|
selectVariant="checkbox"
|
|
91036
91044
|
>
|
|
91037
|
-
<
|
|
91038
|
-
|
|
91039
|
-
|
|
91040
|
-
|
|
91041
|
-
|
|
91042
|
-
|
|
91043
|
-
|
|
91045
|
+
<label>
|
|
91046
|
+
<input
|
|
91047
|
+
aria-label="Select row 6"
|
|
91048
|
+
checked={false}
|
|
91049
|
+
name="checkrow6"
|
|
91050
|
+
onChange={[Function]}
|
|
91051
|
+
type="checkbox"
|
|
91052
|
+
/>
|
|
91053
|
+
</label>
|
|
91044
91054
|
</SelectColumn>
|
|
91045
91055
|
</td>
|
|
91046
91056
|
</TdBase>
|
|
@@ -91726,13 +91736,15 @@ exports[`Selectable table 1`] = `
|
|
|
91726
91736
|
onSelect={[Function]}
|
|
91727
91737
|
selectVariant="checkbox"
|
|
91728
91738
|
>
|
|
91729
|
-
<
|
|
91730
|
-
|
|
91731
|
-
|
|
91732
|
-
|
|
91733
|
-
|
|
91734
|
-
|
|
91735
|
-
|
|
91739
|
+
<label>
|
|
91740
|
+
<input
|
|
91741
|
+
aria-label="Select row 7"
|
|
91742
|
+
checked={false}
|
|
91743
|
+
name="checkrow7"
|
|
91744
|
+
onChange={[Function]}
|
|
91745
|
+
type="checkbox"
|
|
91746
|
+
/>
|
|
91747
|
+
</label>
|
|
91736
91748
|
</SelectColumn>
|
|
91737
91749
|
</td>
|
|
91738
91750
|
</TdBase>
|
|
@@ -92418,13 +92430,15 @@ exports[`Selectable table 1`] = `
|
|
|
92418
92430
|
onSelect={[Function]}
|
|
92419
92431
|
selectVariant="checkbox"
|
|
92420
92432
|
>
|
|
92421
|
-
<
|
|
92422
|
-
|
|
92423
|
-
|
|
92424
|
-
|
|
92425
|
-
|
|
92426
|
-
|
|
92427
|
-
|
|
92433
|
+
<label>
|
|
92434
|
+
<input
|
|
92435
|
+
aria-label="Select row 8"
|
|
92436
|
+
checked={false}
|
|
92437
|
+
name="checkrow8"
|
|
92438
|
+
onChange={[Function]}
|
|
92439
|
+
type="checkbox"
|
|
92440
|
+
/>
|
|
92441
|
+
</label>
|
|
92428
92442
|
</SelectColumn>
|
|
92429
92443
|
</td>
|
|
92430
92444
|
</TdBase>
|
|
@@ -97656,13 +97670,15 @@ exports[`Selectable table with Radio 1`] = `
|
|
|
97656
97670
|
onSelect={[Function]}
|
|
97657
97671
|
selectVariant="radio"
|
|
97658
97672
|
>
|
|
97659
|
-
<
|
|
97660
|
-
|
|
97661
|
-
|
|
97662
|
-
|
|
97663
|
-
|
|
97664
|
-
|
|
97665
|
-
|
|
97673
|
+
<label>
|
|
97674
|
+
<input
|
|
97675
|
+
aria-label="Select row 0"
|
|
97676
|
+
checked={false}
|
|
97677
|
+
name="radioGroup"
|
|
97678
|
+
onChange={[Function]}
|
|
97679
|
+
type="radio"
|
|
97680
|
+
/>
|
|
97681
|
+
</label>
|
|
97666
97682
|
</SelectColumn>
|
|
97667
97683
|
</td>
|
|
97668
97684
|
</TdBase>
|
|
@@ -99679,13 +99695,15 @@ exports[`Selectable table with Radio 1`] = `
|
|
|
99679
99695
|
onSelect={[Function]}
|
|
99680
99696
|
selectVariant="radio"
|
|
99681
99697
|
>
|
|
99682
|
-
<
|
|
99683
|
-
|
|
99684
|
-
|
|
99685
|
-
|
|
99686
|
-
|
|
99687
|
-
|
|
99688
|
-
|
|
99698
|
+
<label>
|
|
99699
|
+
<input
|
|
99700
|
+
aria-label="Select row 3"
|
|
99701
|
+
checked={false}
|
|
99702
|
+
name="radioGroup"
|
|
99703
|
+
onChange={[Function]}
|
|
99704
|
+
type="radio"
|
|
99705
|
+
/>
|
|
99706
|
+
</label>
|
|
99689
99707
|
</SelectColumn>
|
|
99690
99708
|
</td>
|
|
99691
99709
|
</TdBase>
|
|
@@ -101033,13 +101051,15 @@ exports[`Selectable table with Radio 1`] = `
|
|
|
101033
101051
|
onSelect={[Function]}
|
|
101034
101052
|
selectVariant="radio"
|
|
101035
101053
|
>
|
|
101036
|
-
<
|
|
101037
|
-
|
|
101038
|
-
|
|
101039
|
-
|
|
101040
|
-
|
|
101041
|
-
|
|
101042
|
-
|
|
101054
|
+
<label>
|
|
101055
|
+
<input
|
|
101056
|
+
aria-label="Select row 5"
|
|
101057
|
+
checked={false}
|
|
101058
|
+
name="radioGroup"
|
|
101059
|
+
onChange={[Function]}
|
|
101060
|
+
type="radio"
|
|
101061
|
+
/>
|
|
101062
|
+
</label>
|
|
101043
101063
|
</SelectColumn>
|
|
101044
101064
|
</td>
|
|
101045
101065
|
</TdBase>
|
|
@@ -101724,13 +101744,15 @@ exports[`Selectable table with Radio 1`] = `
|
|
|
101724
101744
|
onSelect={[Function]}
|
|
101725
101745
|
selectVariant="radio"
|
|
101726
101746
|
>
|
|
101727
|
-
<
|
|
101728
|
-
|
|
101729
|
-
|
|
101730
|
-
|
|
101731
|
-
|
|
101732
|
-
|
|
101733
|
-
|
|
101747
|
+
<label>
|
|
101748
|
+
<input
|
|
101749
|
+
aria-label="Select row 6"
|
|
101750
|
+
checked={false}
|
|
101751
|
+
name="radioGroup"
|
|
101752
|
+
onChange={[Function]}
|
|
101753
|
+
type="radio"
|
|
101754
|
+
/>
|
|
101755
|
+
</label>
|
|
101734
101756
|
</SelectColumn>
|
|
101735
101757
|
</td>
|
|
101736
101758
|
</TdBase>
|
|
@@ -102415,13 +102437,15 @@ exports[`Selectable table with Radio 1`] = `
|
|
|
102415
102437
|
onSelect={[Function]}
|
|
102416
102438
|
selectVariant="radio"
|
|
102417
102439
|
>
|
|
102418
|
-
<
|
|
102419
|
-
|
|
102420
|
-
|
|
102421
|
-
|
|
102422
|
-
|
|
102423
|
-
|
|
102424
|
-
|
|
102440
|
+
<label>
|
|
102441
|
+
<input
|
|
102442
|
+
aria-label="Select row 7"
|
|
102443
|
+
checked={false}
|
|
102444
|
+
name="radioGroup"
|
|
102445
|
+
onChange={[Function]}
|
|
102446
|
+
type="radio"
|
|
102447
|
+
/>
|
|
102448
|
+
</label>
|
|
102425
102449
|
</SelectColumn>
|
|
102426
102450
|
</td>
|
|
102427
102451
|
</TdBase>
|
|
@@ -103106,13 +103130,15 @@ exports[`Selectable table with Radio 1`] = `
|
|
|
103106
103130
|
onSelect={[Function]}
|
|
103107
103131
|
selectVariant="radio"
|
|
103108
103132
|
>
|
|
103109
|
-
<
|
|
103110
|
-
|
|
103111
|
-
|
|
103112
|
-
|
|
103113
|
-
|
|
103114
|
-
|
|
103115
|
-
|
|
103133
|
+
<label>
|
|
103134
|
+
<input
|
|
103135
|
+
aria-label="Select row 8"
|
|
103136
|
+
checked={false}
|
|
103137
|
+
name="radioGroup"
|
|
103138
|
+
onChange={[Function]}
|
|
103139
|
+
type="radio"
|
|
103140
|
+
/>
|
|
103141
|
+
</label>
|
|
103116
103142
|
</SelectColumn>
|
|
103117
103143
|
</td>
|
|
103118
103144
|
</TdBase>
|
|
@@ -344,3 +344,8 @@ The second `Tr` represents the second level of sub columns. The `Th` in this row
|
|
|
344
344
|
|
|
345
345
|
```ts file="ComposableTableNestedExpandable.tsx"
|
|
346
346
|
```
|
|
347
|
+
|
|
348
|
+
### Composable: Expandable with nested table
|
|
349
|
+
|
|
350
|
+
```ts file="ComposableTableNestedTableExpandable.tsx"
|
|
351
|
+
```
|
|
@@ -0,0 +1,189 @@
|
|
|
1
|
+
/* eslint-disable no-console */
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import {
|
|
4
|
+
TableComposable,
|
|
5
|
+
Thead,
|
|
6
|
+
Tr,
|
|
7
|
+
Th,
|
|
8
|
+
Tbody,
|
|
9
|
+
Td,
|
|
10
|
+
ExpandableRowContent,
|
|
11
|
+
ActionsColumn,
|
|
12
|
+
IAction
|
|
13
|
+
} from '@patternfly/react-table';
|
|
14
|
+
|
|
15
|
+
interface Repository {
|
|
16
|
+
name: string;
|
|
17
|
+
branches: string;
|
|
18
|
+
prs: string;
|
|
19
|
+
nestedComponent?: React.ReactNode;
|
|
20
|
+
link?: React.ReactNode;
|
|
21
|
+
noPadding?: boolean;
|
|
22
|
+
}
|
|
23
|
+
interface NestedRepository {
|
|
24
|
+
name: string;
|
|
25
|
+
branches: string | null;
|
|
26
|
+
prs: string | null;
|
|
27
|
+
workspaces: string | null;
|
|
28
|
+
lastCommit: string | null;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
const NestedReposTable: React.FunctionComponent = () => {
|
|
32
|
+
// In real usage, this data would come from some external source like an API via props.
|
|
33
|
+
const prs: NestedRepository[] = [
|
|
34
|
+
{ name: 'Repository 1', branches: '25', prs: '25', workspaces: '5', lastCommit: '2 days ago' },
|
|
35
|
+
{ name: 'Repository 2', branches: '25', prs: '25', workspaces: '5', lastCommit: '2 days ago' },
|
|
36
|
+
{ name: 'Repository 3', branches: '25', prs: '25', workspaces: '5', lastCommit: '2 days ago' },
|
|
37
|
+
{ name: 'Repository 4', branches: '25', prs: '25', workspaces: '5', lastCommit: '2 days ago' }
|
|
38
|
+
];
|
|
39
|
+
|
|
40
|
+
const columnNames = {
|
|
41
|
+
name: 'Repositories',
|
|
42
|
+
branches: 'Branches',
|
|
43
|
+
prs: 'Pull requests',
|
|
44
|
+
workspaces: 'Workspaces',
|
|
45
|
+
lastCommit: 'Last commit'
|
|
46
|
+
};
|
|
47
|
+
|
|
48
|
+
return (
|
|
49
|
+
<TableComposable aria-label="Simple table" variant="compact">
|
|
50
|
+
<Thead>
|
|
51
|
+
<Tr>
|
|
52
|
+
<Th>{columnNames.name}</Th>
|
|
53
|
+
<Th>{columnNames.branches}</Th>
|
|
54
|
+
<Th>{columnNames.prs}</Th>
|
|
55
|
+
<Th>{columnNames.workspaces}</Th>
|
|
56
|
+
<Th>{columnNames.lastCommit}</Th>
|
|
57
|
+
</Tr>
|
|
58
|
+
</Thead>
|
|
59
|
+
<Tbody>
|
|
60
|
+
{prs.map(repo => (
|
|
61
|
+
<Tr key={repo.name}>
|
|
62
|
+
<Td dataLabel={columnNames.name}>{repo.name}</Td>
|
|
63
|
+
<Td dataLabel={columnNames.branches}>{repo.branches}</Td>
|
|
64
|
+
<Td dataLabel={columnNames.prs}>{repo.prs}</Td>
|
|
65
|
+
<Td dataLabel={columnNames.workspaces}>{repo.workspaces}</Td>
|
|
66
|
+
<Td dataLabel={columnNames.lastCommit}>{repo.lastCommit}</Td>
|
|
67
|
+
</Tr>
|
|
68
|
+
))}
|
|
69
|
+
</Tbody>
|
|
70
|
+
</TableComposable>
|
|
71
|
+
);
|
|
72
|
+
};
|
|
73
|
+
|
|
74
|
+
export const ComposableTableExpandable: React.FunctionComponent = () => {
|
|
75
|
+
// In real usage, this data would come from some external source like an API via props.
|
|
76
|
+
const repositories: Repository[] = [
|
|
77
|
+
{ name: 'Node 1', branches: '10', prs: '2', nestedComponent: <NestedReposTable />, link: <a>Link 1</a> },
|
|
78
|
+
{ name: 'Node 2', branches: '3', prs: '4', link: <a>Link 2</a> },
|
|
79
|
+
{
|
|
80
|
+
name: 'Node 3',
|
|
81
|
+
branches: '11',
|
|
82
|
+
prs: '7',
|
|
83
|
+
nestedComponent: (
|
|
84
|
+
<p>
|
|
85
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
|
|
86
|
+
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
|
87
|
+
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
|
|
88
|
+
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
|
|
89
|
+
est laborum.
|
|
90
|
+
</p>
|
|
91
|
+
),
|
|
92
|
+
link: <a>Link 3</a>
|
|
93
|
+
},
|
|
94
|
+
{
|
|
95
|
+
name: 'Node 4',
|
|
96
|
+
branches: '11',
|
|
97
|
+
prs: '7',
|
|
98
|
+
nestedComponent: 'Expandable row content has no padding.',
|
|
99
|
+
link: <a>Link 4</a>,
|
|
100
|
+
noPadding: true
|
|
101
|
+
}
|
|
102
|
+
];
|
|
103
|
+
|
|
104
|
+
const columnNames = {
|
|
105
|
+
name: 'Repositories',
|
|
106
|
+
branches: 'Branches',
|
|
107
|
+
prs: 'Pull requests',
|
|
108
|
+
link: 'Link',
|
|
109
|
+
action: 'Action'
|
|
110
|
+
};
|
|
111
|
+
// In this example, expanded rows are tracked by the repo names from each row. This could be any unique identifier.
|
|
112
|
+
// This is to prevent state from being based on row order index in case we later add sorting.
|
|
113
|
+
// Note that this behavior is very similar to selection state.
|
|
114
|
+
const initialExpandedRepoNames = repositories.filter(repo => !!repo.nestedComponent).map(repo => repo.name); // Default to all expanded
|
|
115
|
+
const [expandedRepoNames, setExpandedRepoNames] = React.useState<string[]>(initialExpandedRepoNames);
|
|
116
|
+
const setRepoExpanded = (repo: Repository, isExpanding = true) =>
|
|
117
|
+
setExpandedRepoNames(prevExpanded => {
|
|
118
|
+
const otherExpandedRepoNames = prevExpanded.filter(r => r !== repo.name);
|
|
119
|
+
return isExpanding ? [...otherExpandedRepoNames, repo.name] : otherExpandedRepoNames;
|
|
120
|
+
});
|
|
121
|
+
const isRepoExpanded = (repo: Repository) => expandedRepoNames.includes(repo.name);
|
|
122
|
+
|
|
123
|
+
const defaultActions = (repo: Repository): IAction[] => [
|
|
124
|
+
{
|
|
125
|
+
title: 'Some action',
|
|
126
|
+
onClick: () => console.log(`clicked on Some action, on row ${repo.name}`)
|
|
127
|
+
},
|
|
128
|
+
{
|
|
129
|
+
title: <a href="https://www.patternfly.org">Link action</a>
|
|
130
|
+
},
|
|
131
|
+
{
|
|
132
|
+
isSeparator: true
|
|
133
|
+
},
|
|
134
|
+
{
|
|
135
|
+
title: 'Third action',
|
|
136
|
+
onClick: () => console.log(`clicked on Third action, on row ${repo.name}`)
|
|
137
|
+
}
|
|
138
|
+
];
|
|
139
|
+
|
|
140
|
+
return (
|
|
141
|
+
<TableComposable aria-label="Simple table">
|
|
142
|
+
<Thead>
|
|
143
|
+
<Tr>
|
|
144
|
+
<Td />
|
|
145
|
+
<Th>{columnNames.name}</Th>
|
|
146
|
+
<Th>{columnNames.branches}</Th>
|
|
147
|
+
<Th>{columnNames.prs}</Th>
|
|
148
|
+
<Th>{columnNames.link}</Th>
|
|
149
|
+
<Th>{columnNames.action}</Th>
|
|
150
|
+
</Tr>
|
|
151
|
+
</Thead>
|
|
152
|
+
{repositories.map((repo, rowIndex) => (
|
|
153
|
+
<Tbody key={repo.name} isExpanded={isRepoExpanded(repo)}>
|
|
154
|
+
<Tr>
|
|
155
|
+
<Td
|
|
156
|
+
expand={
|
|
157
|
+
repo.nestedComponent
|
|
158
|
+
? {
|
|
159
|
+
rowIndex,
|
|
160
|
+
isExpanded: isRepoExpanded(repo),
|
|
161
|
+
onToggle: () => setRepoExpanded(repo, !isRepoExpanded(repo))
|
|
162
|
+
}
|
|
163
|
+
: undefined
|
|
164
|
+
}
|
|
165
|
+
/>
|
|
166
|
+
<Td dataLabel={columnNames.name}>{repo.name}</Td>
|
|
167
|
+
<Td dataLabel={columnNames.branches}>{repo.branches}</Td>
|
|
168
|
+
<Td dataLabel={columnNames.prs}>{repo.prs}</Td>
|
|
169
|
+
<Td dataLabel={columnNames.link}>{repo.link}</Td>
|
|
170
|
+
<Td dataLabel={columnNames.action}>
|
|
171
|
+
<ActionsColumn items={defaultActions(repo)} />
|
|
172
|
+
</Td>
|
|
173
|
+
</Tr>
|
|
174
|
+
{repo.nestedComponent ? (
|
|
175
|
+
<Tr isExpanded={isRepoExpanded(repo)}>
|
|
176
|
+
<Td
|
|
177
|
+
noPadding={repo.noPadding}
|
|
178
|
+
dataLabel={`${columnNames.name} expended`}
|
|
179
|
+
colSpan={Object.keys(columnNames).length + 1}
|
|
180
|
+
>
|
|
181
|
+
<ExpandableRowContent>{repo.nestedComponent}</ExpandableRowContent>
|
|
182
|
+
</Td>
|
|
183
|
+
</Tr>
|
|
184
|
+
) : null}
|
|
185
|
+
</Tbody>
|
|
186
|
+
))}
|
|
187
|
+
</TableComposable>
|
|
188
|
+
);
|
|
189
|
+
};
|