Verified | Reporting tab (#1520)

* verified commit * refactor: Add Reporting tab to investor view and dry out into PoolReportPage * add missing dependencies * add missing dependencies * move headers and columns outside of component * add missing dependencies * disable eslint * missing dependencies * refactor: Rename to ReportContextType * remove not used startDate * eslint disable
centrifuge · Aug 21, 2023 · 5aa1b52 · 5aa1b52
1 parent b17f6c5
commit 5aa1b52
Show file tree

Hide file tree

Showing 28 changed files with 1,192 additions and 548 deletions.
diff --git a/centrifuge-app/src/components/DataTable.tsx b/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,8 @@ export const DataTable = <T extends Record<string, any>>({
   )
 
   const [currentSortKey, setCurrentSortKey] = React.useState(defaultSortKey || '')
+  const ref = React.useRef(null)
+  const { scrollWidth } = useElementScrollSize(ref)
 
   const updateSortOrder = (sortKey: Column['sortKey']) => {
     if (!sortKey) return
@@ -82,8 +85,9 @@ 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={ref} as={rounded && !lastGroupIndex ? Card : Stack} minWidth={scrollWidth > 0 ? scrollWidth : 'auto'}>
       <Shelf>
         {showHeader &&
           columns.map((col, i) => (
@@ -189,22 +193,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 +218,7 @@ const DataCol = styled(Text)<{ align: Column['align'] }>`
           justifyContent: 'flex-end',
 
           '&:last-child': {
-            paddingRight: '16px',
+            paddingRight: 16,
           },
         })
     }

diff --git a/centrifuge-app/src/components/DataTableGroup.tsx b/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, {