Update to filters and table (#2512)

* Adjust filters with new design * Add formatted date * Add changes to data reports table * Make column sticky
centrifuge · Oct 21, 2024 · 60c8313 · 60c8313
1 parent fc41e30
commit 60c8313
Show file tree

Hide file tree

Showing 9 changed files with 236 additions and 224 deletions.
diff --git a/centrifuge-app/src/components/DataTable.tsx b/centrifuge-app/src/components/DataTable.tsx
@@ -129,7 +129,7 @@ export const DataTable = <T extends Record<string, any>>({
       {showHeader && (
         <HeaderRow styles={headerStyles} scrollable={scrollable}>
           {columns.map((col, i) => (
-            <HeaderCol key={i} align={col?.align}>
+            <HeaderCol key={i} align={col?.align} isLabel={col.isLabel}>
               <Text variant="body3">
                 {col?.header && typeof col.header !== 'string' && col?.sortKey && React.isValidElement(col.header)
                   ? React.cloneElement(col.header as React.ReactElement<any>, {
@@ -142,6 +142,7 @@ export const DataTable = <T extends Record<string, any>>({
           ))}
         </HeaderRow>
       )}
+
       {pinnedData?.map((row, i) => (
         <DataRow
           hoverable={hoverable}
@@ -241,6 +242,12 @@ export const DataRow = styled(Row)<any>`
       borderBottomStyle: 'solid',
       borderBottomWidth: '1px',
       borderBottomColor: 'borderPrimary',
+      borderLeftStyle: 'solid',
+      borderLeftWidth: '1px',
+      borderLeftColor: 'borderPrimary',
+      borderRightStyle: 'solid',
+      borderRightWidth: '1px',
+      borderRightColor: 'borderPrimary',
       backgroundColor: 'transparent',
       // using a&:hover caused the background sometimes not to update when switching themes
       '&:hover':
@@ -275,6 +282,13 @@ export const DataCol = styled(Text)<{ align: Column['align']; isLabel?: boolean
   min-width: 0;
   overflow: hidden;
   white-space: nowrap;
+  ${({ isLabel }) =>
+    isLabel &&
+    css({
+      position: 'sticky',
+      left: 0,
+      zIndex: 1,
+    })}
 
   ${({ align }) => {
     switch (align) {
@@ -296,10 +310,19 @@ export const DataCol = styled(Text)<{ align: Column['align']; isLabel?: boolean
   }}
 `
 
-const HeaderCol = styled(DataCol)`
+const HeaderCol = styled(DataCol)<{ isLabel?: boolean }>`
   height: 32px;
   align-items: center;
 
+  ${({ isLabel }) =>
+    isLabel &&
+    css({
+      position: 'sticky',
+      left: 0,
+      zIndex: 2,
+      backgroundColor: 'backgroundSecondary',
+    })}
+
   &:has(:focus-visible) {
     box-shadow: inset 0 0 0 3px var(--fabric-focus);
   }

diff --git a/centrifuge-app/src/components/Report/AssetList.tsx b/centrifuge-app/src/components/Report/AssetList.tsx
@@ -27,42 +27,42 @@ function getColumnConfig(isPrivate: boolean, symbol: string) {
       { header: 'Name', align: 'left', csvOnly: false, formatter: noop },
       {
         header: 'Value',
-        align: 'right',
+        align: 'left',
         csvOnly: false,
         sortable: true,
         formatter: (v: any) => (v ? formatBalance(v, symbol, 2) : '-'),
       },
       {
         header: 'Principal outstanding',
-        align: 'right',
+        align: 'left',
         csvOnly: false,
         sortable: true,
         formatter: (v: any) => (v ? formatBalance(v, symbol, 2) : '-'),
       },
       {
         header: 'Interest outstanding',
-        align: 'right',
+        align: 'left',
         csvOnly: false,
         sortable: true,
         formatter: (v: any) => (v ? formatBalance(v, symbol, 2) : '-'),
       },
       {
         header: 'Principal repaid',
-        align: 'right',
+        align: 'left',
         csvOnly: false,
         sortable: true,
         formatter: (v: any) => (v ? formatBalance(v, symbol, 2) : '-'),
       },
       {
         header: 'Interest repaid',
-        align: 'right',
+        align: 'left',
         csvOnly: false,
         sortable: true,
         formatter: (v: any) => (v ? formatBalance(v, symbol, 2) : '-'),
       },
       {
         header: 'Additional repaid',
-        align: 'right',
+        align: 'left',
         csvOnly: false,
         sortable: true,
         formatter: (v: any) => (v ? formatBalance(v, symbol, 2) : '-'),
@@ -124,28 +124,28 @@ function getColumnConfig(isPrivate: boolean, symbol: string) {
       { header: 'Name', align: 'left', csvOnly: false, formatter: noop },
       {
         header: 'Market value',
-        align: 'right',
+        align: 'left',
         csvOnly: false,
         sortable: true,
         formatter: (v: any) => (v ? formatBalance(v, symbol, 2) : '-'),
       },
       {
         header: 'Face value',
-        align: 'right',
+        align: 'left',
         csvOnly: false,
         sortable: true,
         formatter: (v: any) => (v ? formatBalance(v, symbol, 2) : '-'),
       },
       {
         header: 'Quantity',
-        align: 'right',
+        align: 'left',
         csvOnly: false,
         sortable: true,
         formatter: (v: any) => (v ? formatBalance(v, undefined, 2) : '-'),
       },
       {
         header: 'Market price',
-        align: 'right',
+        align: 'left',
         csvOnly: false,
         sortable: true,
         formatter: (v: any) => (v ? formatBalance(v, symbol, 2) : '-'),
@@ -159,14 +159,14 @@ function getColumnConfig(isPrivate: boolean, symbol: string) {
       },
       {
         header: 'Unrealized profit',
-        align: 'right',
+        align: 'left',
         csvOnly: false,
         sortable: true,
         formatter: (v: any) => (v ? formatBalance(v, symbol, 2) : '-'),
       },
       {
         header: 'Realized profit',
-        align: 'right',
+        align: 'left',
         csvOnly: false,
         sortable: true,
         formatter: (v: any) => (v ? formatBalance(v, symbol, 2) : '-'),
@@ -192,6 +192,7 @@ export function AssetList({ pool }: { pool: Pool }) {
           align: col.align,
           header: col.sortable ? <SortableTableHeader label={col.header} /> : col.header,
           sortKey: col.sortable ? `value[${index}]` : undefined,
+          width: '177px',
           cell: (row: TableDataRow & { id: string }) => {
             const assetId = row?.id?.split('-')[1]
             return col.header === 'Name' ? (

diff --git a/centrifuge-app/src/components/Report/AssetTransactions.tsx b/centrifuge-app/src/components/Report/AssetTransactions.tsx
@@ -22,9 +22,10 @@ export function AssetTransactions({ pool }: { pool: Pool }) {
   const columnConfig = [
     {
       header: 'Asset ID',
-      align: 'left',
+      align: 'center',
       csvOnly: false,
       formatter: noop,
+      width: '80px',
     },
     {
       header: 'Asset name',
@@ -34,7 +35,7 @@ export function AssetTransactions({ pool }: { pool: Pool }) {
     },
     {
       header: 'Epoch',
-      align: 'right',
+      align: 'center',
       csvOnly: false,
       formatter: noop,
     },
@@ -46,7 +47,7 @@ export function AssetTransactions({ pool }: { pool: Pool }) {
     },
     {
       header: 'Transaction type',
-      align: 'right',
+      align: 'left',
       csvOnly: false,
       formatter: noop,
     },
@@ -58,14 +59,15 @@ export function AssetTransactions({ pool }: { pool: Pool }) {
     },
     {
       header: 'Currency',
-      align: 'right',
+      align: 'left',
       csvOnly: true,
       formatter: noop,
     },
     {
       header: 'Transaction',
-      align: 'right',
+      align: 'center',
       csvOnly: false,
+      width: '80px',
       formatter: (v: any) => (
         <IconAnchor
           href={explorer.tx(v)}
@@ -113,6 +115,7 @@ export function AssetTransactions({ pool }: { pool: Pool }) {
       header: col.header,
       cell: (row: TableDataRow) => <Text variant="body3">{col.formatter((row.value as any)[index])}</Text>,
       csvOnly: col.csvOnly,
+      width: col.width ?? '252px',
     }))
     .filter((col) => !col.csvOnly)