feat(results): ✨ Brand new Results table

- Resizable columns
- Hide / Show columns
- Reorganize columns
- Expand result

apps/builder/components/results/ResultsTable/Row.tsx

@@ -0,0 +1,73 @@
+import React, { memo, useState } from 'react'
+import { Row as RowProps } from '@tanstack/react-table'
+import { Button, chakra, Fade } from '@chakra-ui/react'
+import { ExpandIcon } from 'assets/icons'
+
+type Props = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  row: RowProps<any>
+  isSelected: boolean
+  bottomElement?: React.MutableRefObject<HTMLDivElement | null>
+  onExpandButtonClick: () => void
+}
+
+const Row = ({ row, bottomElement, onExpandButtonClick }: Props) => {
+  const [isExpandButtonVisible, setIsExpandButtonVisible] = useState(false)
+
+  const showExpandButton = () => setIsExpandButtonVisible(true)
+  const hideExpandButton = () => setIsExpandButtonVisible(false)
+  return (
+    <tr
+      key={row.id}
+      data-rowid={row.id}
+      ref={(ref) => {
+        if (bottomElement && bottomElement.current?.dataset.rowid !== row.id)
+          bottomElement.current = ref
+      }}
+      onMouseEnter={showExpandButton}
+      onClick={showExpandButton}
+      onMouseLeave={hideExpandButton}
+    >
+      {row.getVisibleCells().map((cell, cellIndex) => (
+        <chakra.td
+          key={cell.id}
+          px="4"
+          py="2"
+          border="1px"
+          borderColor="gray.200"
+          whiteSpace="nowrap"
+          wordBreak="normal"
+          overflow="hidden"
+          pos="relative"
+        >
+          {cell.renderCell()}
+          <chakra.span
+            pos="absolute"
+            top="0"
+            right={2}
+            h="full"
+            display="inline-flex"
+            alignItems="center"
+          >
+            <Fade unmountOnExit in={isExpandButtonVisible && cellIndex === 1}>
+              <Button
+                leftIcon={<ExpandIcon />}
+                shadow="lg"
+                size="xs"
+                onClick={onExpandButtonClick}
+              >
+                Open
+              </Button>
+            </Fade>
+          </chakra.span>
+        </chakra.td>
+      ))}
+    </tr>
+  )
+}
+
+export default memo(
+  Row,
+  (prev, next) =>
+    prev.row.id === next.row.id && prev.isSelected === next.isSelected
+)