Table cell align right (#182)

* Add right alignment for Table data cell content * Fix th styling for right alignment * .
statisticsnorway · Mar 26, 2024 · 5e96e65 · 5e96e65
1 parent 2d35e3d
commit 5e96e65
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 7 deletions.
diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
@@ -121,6 +121,12 @@ const TableDesktopView = ({ columns, data, activeTab }: TableDesktopViewProps) =
     return <ArrowUp className={selectedColumn ? styles.displayArrowOnSelectedColumn : undefined} size={18} />
   }
 
+  const alignCell = (alignment?: string) => {
+    if (alignment === 'center') return styles.alignTextCenter
+    if (alignment === 'right') return styles.alignTextRight
+    return ''
+  }
+
   return (
     <div className={styles.tableContainer}>
       <table className={styles.table}>
@@ -131,7 +137,7 @@ const TableDesktopView = ({ columns, data, activeTab }: TableDesktopViewProps) =
               return (
                 <th
                   key={column.id}
-                  className={sortableColumn ? styles.sortableColumn : undefined}
+                  className={`${sortableColumn ? styles.sortableColumn : undefined} ${alignCell(column.align)}`}
                   onClick={sortableColumn ? () => handleSortBy(column.id) : undefined}
                 >
                   {sortableColumn ? (
@@ -153,7 +159,7 @@ const TableDesktopView = ({ columns, data, activeTab }: TableDesktopViewProps) =
               return (
                 <tr key={row.id + index} className={conditionalStyling(index)}>
                   {columns.map((column) => (
-                    <td key={column.id} className={column.align === 'center' ? styles.centerText : undefined}>
+                    <td key={column.id} className={alignCell(column.align)}>
                       {row[column.id]}
                     </td>
                   ))}

diff --git a/src/components/Table/table.module.scss b/src/components/Table/table.module.scss
@@ -78,13 +78,13 @@
       span {
         display: inline-block;
         position: relative;
-        padding-right: 30px;
+        padding-right: 2rem;
         white-space: nowrap;
 
         svg {
           position: absolute;
           top: 50%;
-          right: 5px;
+          right: .5rem;
           transform: translateY(-50%);
           display: none;
         }
@@ -117,7 +117,7 @@
     padding: .5rem;
     border-bottom: 1px inset variables.$ssb-dark-2;
 
-    >* {
+    > * {
       display: flex;
       flex-direction: column;
 
@@ -140,9 +140,21 @@
   }
 }
 
-.centerText {
+.alignTextCenter {
   span {
     display: flex;
     justify-content: center;
   }
+}
+
+.alignTextRight {
+  text-align: right !important;
+
+  span {
+    padding-right: 0 !important;
+
+    svg {
+      left: -1.75rem;
+    }
+  }
 }
diff --git a/src/pages/TeamDetail/TeamDetail.tsx b/src/pages/TeamDetail/TeamDetail.tsx
@@ -85,7 +85,7 @@ const SHARED_BUCKETS_TAB = {
       label: 'Tilgang',
     },
     // { id: 'delte_data', label: 'Delte data' },
-    { id: 'antall_personer', label: 'Antall personer' },
+    { id: 'antall_personer', label: 'Antall personer', align: 'right' },
   ],
 }
 

diff --git a/src/pages/TeamMembers/TeamMembers.tsx b/src/pages/TeamMembers/TeamMembers.tsx
@@ -111,10 +111,12 @@ const TeamMembers = () => {
         {
           id: 'team',
           label: 'Team',
+          align: 'right',
         },
         {
           id: 'data_admin',
           label: 'Data-admin roller',
+          align: 'right',
         },
         {
           id: 'seksjonsleder',

diff --git a/src/pages/TeamOverview/TeamOverview.tsx b/src/pages/TeamOverview/TeamOverview.tsx
@@ -98,6 +98,7 @@ const TeamOverview = () => {
         {
           id: 'teammedlemmer',
           label: 'Teammedlemmer',
+          align: 'right',
         },
         {
           id: 'managers',