@patternfly/react-table 6.6.0-prerelease.7 → 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.
- package/CHANGELOG.md +18 -0
- package/LICENSE +21 -0
- package/components/package.json +1 -1
- package/deprecated/package.json +1 -1
- package/dist/dynamic/components/Table/package.json +1 -1
- package/dist/dynamic/components/Table/utils/decorators/package.json +1 -1
- package/dist/dynamic/components/Table/utils/package.json +1 -1
- package/dist/dynamic/deprecated/components/Table/base/package.json +1 -1
- package/dist/dynamic/deprecated/components/Table/package.json +1 -1
- package/dist/dynamic/deprecated/components/package.json +1 -1
- package/dist/umd/assets/output-BNeslI6z.css +8570 -0
- package/dist/umd/react-table.min.js +10 -0
- package/package.json +7 -6
- package/src/components/Table/examples/Table.md +1 -0
- package/src/components/Table/examples/TableNestedStickyHeader.tsx +84 -79
|
@@ -112,85 +112,90 @@ export const TableNestedHeaders: React.FunctionComponent = () => {
|
|
|
112
112
|
});
|
|
113
113
|
|
|
114
114
|
return (
|
|
115
|
-
<
|
|
116
|
-
<
|
|
117
|
-
<
|
|
118
|
-
<
|
|
119
|
-
<
|
|
120
|
-
{
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
{
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
{
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
{
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
{
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
{
|
|
136
|
-
|
|
137
|
-
|
|
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
|
-
|
|
193
|
-
|
|
194
|
-
|
|
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
|
};
|