fix: table nested in collapsible row separator

traefik · Oct 17, 2024 · 3b26448 · 3b26448
1 parent c873f00
commit 3b26448
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 14 deletions.
diff --git a/components/AriaTable/AriaTable.tsx b/components/AriaTable/AriaTable.tsx
@@ -67,7 +67,7 @@ const AnimatedContainer = ({ isOpen, children }: { isOpen: boolean; children: Re
             pointerEvents: 'none',
             border: 'none',
           },
-    [isOpen]
+    [isOpen],
   );
 
   const containerStyle = useMemo(
@@ -84,7 +84,7 @@ const AnimatedContainer = ({ isOpen, children }: { isOpen: boolean; children: Re
             overflow: 'hidden',
             padding: '0px 16px',
           },
-    [isOpen]
+    [isOpen],
   );
 
   return (
@@ -151,7 +151,7 @@ export const Tr = forwardRef<ElementRef<typeof StyledTr>, TrProps>(
           </Td>
         ) : null,
       // eslint-disable-next-line react-hooks/exhaustive-deps
-      [isCollapsed]
+      [isCollapsed],
     );
 
     const renderedChildren = useMemo(() => {
@@ -163,7 +163,7 @@ export const Tr = forwardRef<ElementRef<typeof StyledTr>, TrProps>(
             ...children?.props,
           },
           // @ts-ignore: Object is possibly 'null'.
-          [TdEl, ...(children?.props?.children || [])]
+          [TdEl, ...(children?.props?.children || [])],
         );
       }
 
@@ -184,7 +184,7 @@ export const Tr = forwardRef<ElementRef<typeof StyledTr>, TrProps>(
             !!collapsedContent && !isCollapsed
               ? {
                   ...css,
-                  [`&:nth-last-child(2) span`]: {
+                  [`&:nth-last-child(2) > span`]: {
                     borderBottom: 'none',
                   },
                 }
@@ -199,7 +199,7 @@ export const Tr = forwardRef<ElementRef<typeof StyledTr>, TrProps>(
         )}
       </>
     );
-  }
+  },
 );
 
 const StyledTh = styled('span', TableTh, {
@@ -235,7 +235,7 @@ export const Td = forwardRef<ElementRef<typeof StyledTd>, TdProps>(
               height: '100%',
             }
           : {},
-      [fullColSpan]
+      [fullColSpan],
     );
     if (fullColSpan) {
       return (
@@ -246,7 +246,7 @@ export const Td = forwardRef<ElementRef<typeof StyledTd>, TdProps>(
       );
     }
     return <StyledTd ref={ref} role="cell" css={css} {...props} />;
-  }
+  },
 );
 
 const StyledThead = styled('div', TableThead, {

diff --git a/components/Table/Table.stories.tsx b/components/Table/Table.stories.tsx
@@ -705,4 +705,67 @@ CollapsibleRow.args = {
   elevation: '1',
 };
 
+export const NestedCollapsibleRow: StoryFn<any> = ({ interactive, ...args }) => {
+  const [selectedRow, setSelectedRow] = useState(1);
+  const makeSelectableRowProps = useCallback(
+    (rowNum: number) => ({
+      active: selectedRow === rowNum,
+      onClick: () => setSelectedRow(rowNum),
+    }),
+    [selectedRow, setSelectedRow],
+  );
+
+  return (
+    <Flex direction="column" gap="4">
+      <TableForStory {...args}>
+        <Thead>
+          <Tr emptyFirstColumn tableHead>
+            <Th>First name</Th>
+            <Th>Last name</Th>
+            <Th>Status</Th>
+            <Th>Role</Th>
+          </Tr>
+        </Thead>
+        <Tbody>
+          <Tr
+            interactive={interactive}
+            collapsedContent={
+              <Text>
+                This is an additional description of this row above. It could be anything.
+              </Text>
+            }
+            collapsedContentColSpan={5}
+            {...makeSelectableRowProps(2)}
+          >
+            <Td>Johnny</Td>
+            <Td>Depp</Td>
+            <Td subtle>
+              <Badge variant="orange">AFK</Badge>
+            </Td>
+            <Td subtle>Actor</Td>
+          </Tr>
+          <Tr
+            collapsedContent={<Basic />}
+            collapsedContentColSpan={5}
+            interactive={interactive}
+            {...makeSelectableRowProps(3)}
+          >
+            <Td>Natalie</Td>
+            <Td>Portman</Td>
+            <Td>
+              <Badge variant="green">Connected</Badge>
+            </Td>
+            <Td subtle>Actor</Td>
+          </Tr>
+        </Tbody>
+      </TableForStory>
+    </Flex>
+  );
+};
+
+NestedCollapsibleRow.args = {
+  interactive: true,
+  elevation: '1',
+};
+
 export default Component;
diff --git a/components/Table/Table.tsx b/components/Table/Table.tsx
@@ -92,7 +92,7 @@ export const StyledTr = styled('tr', {
   '&:hover': {
     color: '$tableHoverText',
   },
-  [`&:last-child ${Td}`]: {
+  [`&:last-child > ${Td}`]: {
     borderBottom: 'none',
   },
 
@@ -146,7 +146,7 @@ const AnimatedTr = ({
             padding: '0px 16px',
             border: 'none',
           },
-    [isOpen]
+    [isOpen],
   );
 
   const containerStyle = useMemo(
@@ -158,7 +158,7 @@ const AnimatedTr = ({
             height: 0,
             overflow: 'hidden',
           },
-    [isOpen]
+    [isOpen],
   );
 
   return (
@@ -188,7 +188,7 @@ export const Tr = forwardRef<ElementRef<typeof StyledTr>, TrProps>(
       css,
       ...props
     },
-    ref
+    ref,
   ) => {
     const [isCollapsed, setIsCollapsed] = useState(false);
 
@@ -200,7 +200,7 @@ export const Tr = forwardRef<ElementRef<typeof StyledTr>, TrProps>(
             !!collapsedContent && !isCollapsed
               ? {
                   ...css,
-                  [`&:nth-last-child(2) ${Td}`]: {
+                  [`&:nth-last-child(2) > ${Td}`]: {
                     borderBottom: 'none',
                   },
                 }
@@ -247,7 +247,7 @@ export const Tr = forwardRef<ElementRef<typeof StyledTr>, TrProps>(
         )}
       </>
     );
-  }
+  },
 );
 
 export const Tfoot = styled('tfoot', {