@patternfly/react-table 6.6.0-prerelease.8 → 6.6.0-prerelease.9

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.
Files changed (14) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/components/package.json +1 -1
  3. package/deprecated/package.json +1 -1
  4. package/dist/dynamic/components/Table/package.json +1 -1
  5. package/dist/dynamic/components/Table/utils/decorators/package.json +1 -1
  6. package/dist/dynamic/components/Table/utils/package.json +1 -1
  7. package/dist/dynamic/deprecated/components/Table/base/package.json +1 -1
  8. package/dist/dynamic/deprecated/components/Table/package.json +1 -1
  9. package/dist/dynamic/deprecated/components/package.json +1 -1
  10. package/dist/umd/assets/{output-DQ9xDMCt.css → output-BNeslI6z.css} +3660 -3635
  11. package/dist/umd/react-table.min.js +1 -1
  12. package/package.json +6 -6
  13. package/src/components/Table/examples/Table.md +1 -0
  14. package/src/components/Table/examples/TableNestedStickyHeader.tsx +84 -79
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@patternfly/react-table",
3
- "version": "6.6.0-prerelease.8",
3
+ "version": "6.6.0-prerelease.9",
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",
@@ -40,10 +40,10 @@
40
40
  "subpaths": "node ../../scripts/exportSubpaths.mjs --config subpaths.config.json"
41
41
  },
42
42
  "dependencies": {
43
- "@patternfly/react-core": "^6.6.0-prerelease.8",
44
- "@patternfly/react-icons": "^6.6.0-prerelease.3",
45
- "@patternfly/react-styles": "^6.6.0-prerelease.3",
46
- "@patternfly/react-tokens": "^6.6.0-prerelease.3",
43
+ "@patternfly/react-core": "^6.6.0-prerelease.9",
44
+ "@patternfly/react-icons": "^6.6.0-prerelease.4",
45
+ "@patternfly/react-styles": "^6.6.0-prerelease.4",
46
+ "@patternfly/react-tokens": "^6.6.0-prerelease.4",
47
47
  "lodash": "^4.18.1",
48
48
  "tslib": "^2.8.1"
49
49
  },
@@ -51,5 +51,5 @@
51
51
  "react": "^17 || ^18 || ^19",
52
52
  "react-dom": "^17 || ^18 || ^19"
53
53
  },
54
- "gitHead": "6403b82a97c1ff1ec98902e3c6f1998233f88dbd"
54
+ "gitHead": "8edf04a73a28f6f05243f7e40cc23e50185ce9bb"
55
55
  }
package/src/components/Table/examples/Table.md CHANGED
@@ -452,6 +452,7 @@ To make a nested column header:
452
452
  2. Pass `nestedHeaderColumnSpans` to `Table`. `nestedHeaderColumnSpans` is an array of numbers representing the column spans of the top level columns to `Table`, where each number is equal to the number of sub columns for a column, or `1` if a column contains no sub columns.
453
453
  3. Pass `hasNestedHeader` to `Thead`.
454
454
  4. Pass two `Tr` as children of `Thead`.
455
+ 5. If the parent `Table` has a sticky header, pass an additional `Tr isBorderRow` in `Thead` to create the bottom border in the `Thead`.
455
456
 
456
457
  The first `Tr` represents the top level of columns, and each must pass either `rowSpan` if the column does not contain sub columns or `colSpan` if the column contains sub columns. The value of `rowSpan` is equal to the number of rows the nested header will span, typically `2`, and the value of `colSpan` is equal to the number of sub columns in a column. Each `Th` except the last should also pass `hasRightBorder`.
457
458
 
package/src/components/Table/examples/TableNestedStickyHeader.tsx CHANGED
@@ -112,85 +112,90 @@ export const TableNestedHeaders: React.FunctionComponent = () => {
112
112
  });
113
113
 
114
114
  return (
115
- <InnerScrollContainer>
116
- <Table aria-label="Nested column headers table" gridBreakPoint="" isStickyHeader>
117
- <Thead hasNestedHeader>
118
- <Tr>
119
- <Th hasRightBorder colSpan={3}>
120
- {columnNames.pods}
121
- </Th>
122
- <Th hasRightBorder colSpan={2}>
123
- {columnNames.ports}
124
- </Th>
125
- <Th modifier="fitContent" hasRightBorder rowSpan={2} sort={getSortParams(5)}>
126
- {columnNames.protocol}
127
- </Th>
128
- <Th modifier="fitContent" hasRightBorder rowSpan={2} sort={getSortParams(6)}>
129
- {columnNames.flowRate}
130
- </Th>
131
- <Th modifier="fitContent" hasRightBorder rowSpan={2} sort={getSortParams(7)}>
132
- {columnNames.traffic}
133
- </Th>
134
- <Th modifier="fitContent" rowSpan={2} sort={getSortParams(8)}>
135
- {columnNames.packets}
136
- </Th>
137
- </Tr>
138
- <Tr>
139
- <Th isSubheader sort={getSortParams(0)}>
140
- {columnNames.source}
141
- </Th>
142
- <Th isSubheader sort={getSortParams(1)}>
143
- {columnNames.destination}
144
- </Th>
145
- <Th isSubheader modifier="fitContent" hasRightBorder sort={getSortParams(2)}>
146
- {columnNames.datetime}
147
- </Th>
148
- <Th isSubheader modifier="fitContent" sort={getSortParams(3)}>
149
- {columnNames.source}
150
- </Th>
151
- <Th isSubheader modifier="fitContent" hasRightBorder sort={getSortParams(4)}>
152
- {columnNames.destination}
153
- </Th>
154
- </Tr>
155
- </Thead>
156
- <Tbody>
157
- {sortedConnections.map((connection) => (
158
- <Tr key={connection.source.podName}>
159
- <Td dataLabel={columnNames.source}>{connection.source.podName}</Td>
160
- <Td dataLabel={columnNames.destination}>{connection.destination.podName}</Td>\
161
- <Td dataLabel={columnNames.datetime}>
162
- <div>
163
- <Timestamp dateFormat="full" timeFormat="medium" date={new Date(connection.timestamp)} />
164
- </div>
165
- </Td>
166
- <Td dataLabel={columnNames.source}>
167
- <Stack>
168
- <StackItem>
169
- <span>{connection.source.port.num}</span>
170
- </StackItem>
171
- <StackItem>
172
- <small>({connection.source.port.protocol})</small>
173
- </StackItem>
174
- </Stack>
175
- </Td>
176
- <Td dataLabel={columnNames.destination}>
177
- <Stack>
178
- <StackItem>
179
- <span>{connection.destination.port.num}</span>
180
- </StackItem>
181
- <StackItem>
182
- <small>({connection.destination.port.protocol})</small>
183
- </StackItem>
184
- </Stack>
185
- </Td>
186
- <Td dataLabel={columnNames.protocol}>{connection.protocol}</Td>
187
- <Td dataLabel={columnNames.flowRate}>{connection.flowRate}</Td>
188
- <Td dataLabel={columnNames.traffic}>{connection.traffic}</Td>
189
- <Td dataLabel={columnNames.packets}>{connection.packets}</Td>
115
+ <div style={{ height: '250px' }}>
116
+ <InnerScrollContainer>
117
+ <Table aria-label="Nested column headers table" gridBreakPoint="" isStickyHeader>
118
+ <Thead hasNestedHeader>
119
+ <Tr>
120
+ <Th hasRightBorder colSpan={3}>
121
+ {columnNames.pods}
122
+ </Th>
123
+ <Th hasRightBorder colSpan={2}>
124
+ {columnNames.ports}
125
+ </Th>
126
+ <Th modifier="fitContent" hasRightBorder rowSpan={2} sort={getSortParams(5)}>
127
+ {columnNames.protocol}
128
+ </Th>
129
+ <Th modifier="fitContent" hasRightBorder rowSpan={2} sort={getSortParams(6)}>
130
+ {columnNames.flowRate}
131
+ </Th>
132
+ <Th modifier="fitContent" hasRightBorder rowSpan={2} sort={getSortParams(7)}>
133
+ {columnNames.traffic}
134
+ </Th>
135
+ <Th modifier="fitContent" rowSpan={2} sort={getSortParams(8)}>
136
+ {columnNames.packets}
137
+ </Th>
190
138
  </Tr>
191
- ))}
192
- </Tbody>
193
- </Table>
194
- </InnerScrollContainer>
139
+ <Tr>
140
+ <Th isSubheader sort={getSortParams(0)}>
141
+ {columnNames.source}
142
+ </Th>
143
+ <Th isSubheader sort={getSortParams(1)}>
144
+ {columnNames.destination}
145
+ </Th>
146
+ <Th isSubheader modifier="fitContent" hasRightBorder sort={getSortParams(2)}>
147
+ {columnNames.datetime}
148
+ </Th>
149
+ <Th isSubheader modifier="fitContent" sort={getSortParams(3)}>
150
+ {columnNames.source}
151
+ </Th>
152
+ <Th isSubheader modifier="fitContent" hasRightBorder sort={getSortParams(4)}>
153
+ {columnNames.destination}
154
+ </Th>
155
+ </Tr>
156
+ <Tr isBorderRow aria-hidden="true">
157
+ <Td colSpan={9}></Td>
158
+ </Tr>
159
+ </Thead>
160
+ <Tbody>
161
+ {sortedConnections.map((connection) => (
162
+ <Tr key={connection.source.podName}>
163
+ <Td dataLabel={columnNames.source}>{connection.source.podName}</Td>
164
+ <Td dataLabel={columnNames.destination}>{connection.destination.podName}</Td>
165
+ <Td dataLabel={columnNames.datetime}>
166
+ <div>
167
+ <Timestamp dateFormat="full" timeFormat="medium" date={new Date(connection.timestamp)} />
168
+ </div>
169
+ </Td>
170
+ <Td dataLabel={columnNames.source}>
171
+ <Stack>
172
+ <StackItem>
173
+ <span>{connection.source.port.num}</span>
174
+ </StackItem>
175
+ <StackItem>
176
+ <small>({connection.source.port.protocol})</small>
177
+ </StackItem>
178
+ </Stack>
179
+ </Td>
180
+ <Td dataLabel={columnNames.destination}>
181
+ <Stack>
182
+ <StackItem>
183
+ <span>{connection.destination.port.num}</span>
184
+ </StackItem>
185
+ <StackItem>
186
+ <small>({connection.destination.port.protocol})</small>
187
+ </StackItem>
188
+ </Stack>
189
+ </Td>
190
+ <Td dataLabel={columnNames.protocol}>{connection.protocol}</Td>
191
+ <Td dataLabel={columnNames.flowRate}>{connection.flowRate}</Td>
192
+ <Td dataLabel={columnNames.traffic}>{connection.traffic}</Td>
193
+ <Td dataLabel={columnNames.packets}>{connection.packets}</Td>
194
+ </Tr>
195
+ ))}
196
+ </Tbody>
197
+ </Table>
198
+ </InnerScrollContainer>
199
+ </div>
195
200
  );
196
201
  };