Skip to content

Commit 5a70995

Browse files
mcokermcoker
authored
fix(table): updated nested sticky header example with isBorderRow tr (#12527)
* fix(table): updated nested sticky header example with isBorderRow tr * chore: removed random slash
1 parent 894e315 commit 5a70995

2 files changed

Lines changed: 85 additions & 79 deletions

File tree

‎packages/react-table/src/components/Table/examples/Table.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -452,6 +452,7 @@ To make a nested column header:
452452
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.
453453
3. Pass `hasNestedHeader` to `Thead`.
454454
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`.
455456

456457
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`.
457458

‎packages/react-table/src/components/Table/examples/TableNestedStickyHeader.tsx‎

Lines changed: 84 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -112,85 +112,90 @@ export const TableNestedHeaders: React.FunctionComponent = () => {
112112
});
113113

114114
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>
190138
</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>
195200
);
196201
};

0 commit comments

Comments
 (0)