Feat/implement design reporting tab

centrifuge-app/src/components/DataTable.tsx

@@ -4,6 +4,7 @@ import BN from 'bn.js'
 import * as React from 'react'
 import { Link, LinkProps } from 'react-router-dom'
 import styled from 'styled-components'
+import { useElementScrollSize } from '../utils/useElementScrollSize'
 
 type GroupedProps = {
   groupIndex?: number
@@ -68,6 +69,7 @@ export const DataTable = <T extends Record<string, any>>({
   )
 
   const [currentSortKey, setCurrentSortKey] = React.useState(defaultSortKey || '')
+  const [setNode, { scrollWidth }] = useElementScrollSize()
 
   const updateSortOrder = (sortKey: Column['sortKey']) => {
     if (!sortKey) return
@@ -82,8 +84,13 @@ export const DataTable = <T extends Record<string, any>>({
   }, [orderBy, data, currentSortKey, page, pageSize])
 
   const showHeader = groupIndex === 0 || !groupIndex
+
   return (
-    <Stack as={rounded && !lastGroupIndex ? Card : Stack}>
+    <Stack
+      ref={setNode}
+      as={rounded && !lastGroupIndex ? Card : Stack}
+      minWidth={scrollWidth > 0 ? scrollWidth : 'auto'}
+    >
       <Shelf>
         {showHeader &&
           columns.map((col, i) => (
@@ -189,22 +196,22 @@ const DataCol = styled(Text)<{ align: Column['align'] }>`
   white-space: nowrap;
 
   &:first-child {
-    padding-right: '16px';
+    padding-right: 16px;
   }
   ${({ align }) => {
     switch (align) {
       case 'left':
         return css({
           justifyContent: 'flex-start',
           '&:last-child': {
-            paddingRight: '16px',
+            paddingRight: 16,
           },
         })
       case 'center':
         return css({
           justifyContent: 'center',
           '&:last-child': {
-            paddingRight: '16px',
+            paddingRight: 16,
           },
         })
       case 'right':
@@ -214,7 +221,7 @@ const DataCol = styled(Text)<{ align: Column['align'] }>`
           justifyContent: 'flex-end',
 
           '&:last-child': {
-            paddingRight: '16px',
+            paddingRight: 16,
           },
         })
     }

centrifuge-app/src/components/DataTableGroup.tsx

@@ -2,9 +2,15 @@ import { Card, Stack } from '@centrifuge/fabric'
 import * as React from 'react'
 import { DataTableProps } from './DataTable'
 
-export function DataTableGroup({ children }: { children: React.ReactElement<DataTableProps>[] }) {
+export function DataTableGroup({
+  children,
+  rounded = true,
+}: {
+  children: React.ReactElement<DataTableProps>[]
+  rounded?: boolean
+}) {
   return (
-    <Stack as={Card} gap="3">
+    <Stack as={rounded ? Card : undefined} gap="3">
       {React.Children.map(children, (child, index) => {
         return React.isValidElement(child)
           ? React.cloneElement(child, {