docs(component-overview): update table examples

SpareBank1 · Apr 26, 2024 · 7c5c1f7 · 7c5c1f7
1 parent 5d4927c
commit 7c5c1f7
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 53 deletions.
diff --git a/component-overview/examples/tables/Table-advanced.jsx b/component-overview/examples/tables/Table-advanced.jsx
@@ -1,7 +1,9 @@
 import Table from '@sb1/ffe-tables-react';
 import { TertiaryButton } from '@sb1/ffe-buttons-react';
+import { formatNumber } from '@sb1/ffe-formatters';
 
 () => {
+
     const Button = ({ children }) => (
         // stopPropagation hindrer at raden ekspanderer/kollapser når vi trykker på knappen
         <TertiaryButton onClick={e => e.stopPropagation()}>
@@ -16,15 +18,15 @@ import { TertiaryButton } from '@sb1/ffe-buttons-react';
             email: 'ola@normann.no',
             address: 'Gateveien 2',
             age: 23,
-            networth: '12 693 005,93',
+            networth: formatNumber(12693005.93, { decimals: 2 }),
             button: <Button>poke</Button>,
         },
         {
             id: 1,
             name: 'Sivert Svenska',
             email: 'sivert@svenska.se',
             age: 45,
-            networth: '9 005,93',
+            networth: formatNumber(9005.93, { decimals: 2 }),
             button: <Button>poke</Button>,
         },
         {
@@ -33,7 +35,7 @@ import { TertiaryButton } from '@sb1/ffe-buttons-react';
             email: 'daniel@dansk.dk',
             address: <Button>legg til adresse</Button>,
             age: 39,
-            networth: '8 693 005,93',
+            networth: formatNumber(8693005.93, { decimals: 2 }),
             button: <Button>poke</Button>,
         },
         {
@@ -46,15 +48,7 @@ import { TertiaryButton } from '@sb1/ffe-buttons-react';
             button: <Button>poke</Button>,
         },
     ];
-
-    const formatNumber = num =>
-        Number(
-            num
-                .toString()
-                .replace(/\s/g, '')
-                .replace(/,/g, '.'),
-        );
-    const currencyCompare = (a, b) => formatNumber(a) - formatNumber(b);
+    const currencyCompare = (a, b) => a.replace(/[\s.,]+/g, '') - b.replace(/[\s.,]+/g, '');
 
     const columns = [
         { key: 'name', header: 'Navn', footer: 'Gjennomsnitt' },

diff --git a/component-overview/examples/tables/Table-customRender.jsx b/component-overview/examples/tables/Table-customRender.jsx
@@ -1,6 +1,7 @@
 import Table from '@sb1/ffe-tables-react';
 import { TertiaryButton } from '@sb1/ffe-buttons-react';
 import { Icon } from '@sb1/ffe-icons-react';
+import { formatNumber } from '@sb1/ffe-formatters';
 
 () => {
 
@@ -36,30 +37,22 @@ import { Icon } from '@sb1/ffe-icons-react';
         </TertiaryButton>
     );
 
-    const formatNumber = num =>
-        Number(
-            num
-                .toString()
-                .replace(/\s/g, '')
-                .replace(/,/g, '.'),
-        );
-
     const data = [
         {
             id: 0,
             name: 'Ola Normann',
             email: 'ola@normann.no',
             address: 'Gateveien 2',
             age: 23,
-            networth: '12 693 005,93',
+            networth: 12693005.93,
             button: <Button>poke</Button>,
         },
         {
             id: 1,
             name: 'Sivert Svenska',
             email: 'sivert@svenska.se',
             age: 45,
-            networth: '9 005,93',
+            networth: 9005.93,
             button: <Button>poke</Button>,
         },
         {
@@ -68,7 +61,7 @@ import { Icon } from '@sb1/ffe-icons-react';
             email: 'daniel@dansk.dk',
             address: <Button>legg til adresse</Button>,
             age: 39,
-            networth: '8 693 005,93',
+            networth: 8693005.93,
             button: <Button>poke</Button>,
         },
         {
@@ -77,27 +70,23 @@ import { Icon } from '@sb1/ffe-icons-react';
             email: 'lilleole@gmail.com',
             address: <Button>legg til adresse</Button>,
             age: 9,
-            networth: '23,12',
+            networth: 23.12,
             button: <Button>poke</Button>,
         },
     ].map(d => ({
-        syntetic: d.age > 18 && formatNumber(d.networth) > 10000,
+        syntetic: d.age > 18 && d.networth > 10000,
         ...d,
     }));
 
-    const currencyCompare = (a, b) => formatNumber(a) - formatNumber(b);
+    const currencyCompare = (a, b) => a - b;
 
     const ageSum = data
         .map(e => e.age)
-        .reduce((total, num) => {
-            return total + num;
-        });
+        .reduce((total, num) => total + num);
 
     const networthSum = data
-        .map(e => formatNumber(e.networth))
-        .reduce((total, num) => {
-            return total + num;
-        });
+        .map(e => e.networth)
+        .reduce((total, num) => total + num);
 
     const columnsAdvanced = [
         { key: 'name', header: 'Navn', footer: 'Gjennomsnitt' },
@@ -129,7 +118,7 @@ import { Icon } from '@sb1/ffe-icons-react';
                 return (
                     <>
                         {props.cells.age > 18 &&
-                        formatNumber(props.cells.networth) > 10000
+                        props.cells.networth > 10000
                             ? 'voksen, formue > 10000'
                             : ''}
                     </>
@@ -163,7 +152,6 @@ import { Icon } from '@sb1/ffe-icons-react';
             cellRender: (value, col, props) => {
                 return (
                     <>
-                        {' '}
                         {value
                             ? generateCheckbox(value)
                             : generateCheckbox(false)}
@@ -174,10 +162,16 @@ import { Icon } from '@sb1/ffe-icons-react';
         {
             key: 'networth',
             header: 'Formue',
-            footer: '5 348 760,23',
+            footer: 5348760.23,
             alignRight: true,
             compare: currencyCompare,
-
+            cellRender: (value, col, props) => {
+                return (
+                    <>
+                        {formatNumber(value, { decimals: 2 })}
+                    </>
+                );
+            },
             columnFooterRender: (
                 value,
                 dataWindow,
@@ -189,7 +183,7 @@ import { Icon } from '@sb1/ffe-icons-react';
                 return (
                     <th key={tdPorps.key} {...tdPorps}>
                         <span {...spanProps}>
-                            {Number(networthSum / 4).toFixed(2)}
+                            {formatNumber(networthSum / data.length, { decimals: 2 })}
                         </span>
                     </th>
                 );
@@ -264,7 +258,7 @@ import { Icon } from '@sb1/ffe-icons-react';
                             <td className="ffe-table__cell" />
                             <th className="ffe-table__cell" data-th="Formue">
                                 <span className="ffe-table__content ffe-table__content--text-right">
-                                    {networthSum}
+                                    {formatNumber(networthSum, { decimals: 2 })}
                                 </span>
                             </th>
                             <td className="ffe-table__cell" data-th="Poke">

diff --git a/component-overview/examples/tables/Table-expandedWithTable.jsx b/component-overview/examples/tables/Table-expandedWithTable.jsx
@@ -1,14 +1,15 @@
 import Table from '@sb1/ffe-tables-react';
+import { formatNumber } from '@sb1/ffe-formatters';
 
 () => {
     const data = [
         {
             id: 0,
             year: '2022',
-            sum: '13545',
-            avdrag: '6570.50',
-            renterGebyrer: '6973',
-            restgjeld: '67812.72',
+            sum: formatNumber(13545, { decimals: 2 }),
+            avdrag: formatNumber(6570.50, { decimals: 2 }),
+            renterGebyrer: formatNumber(6973, { decimals: 2}),
+            restgjeld: formatNumber(67812.72, { decimals: 2 }),
             expand: true,
         }
     ];
@@ -28,27 +29,27 @@ import Table from '@sb1/ffe-tables-react';
         { key: 'renterGebyrer', header: 'Rente + gebyrer' },
     ]
 
-    subData = [
+    const subData = [
         {
             id: 0,
             month: 'Juni',
-            sum: '1935',
-            avdrag: '6570.50',
-            renterGebyrer: '6973',
+            sum: formatNumber(1935, { decimals: 2 }),
+            avdrag: formatNumber(6570.50, { decimals: 2 }),
+            renterGebyrer: formatNumber(6973, { decimals: 2 }),
         },
         {
             id: 1,
             month: 'Juli',
-            sum: '1935',
-            avdrag: '6570.50',
-            renterGebyrer: '6973',
+            sum: formatNumber(1935, { decimals: 2 }),
+            avdrag: formatNumber(6570.50, { decimals: 2 }),
+            renterGebyrer: formatNumber(6973, { decimals: 2 }),
         },
         {
             id: 2,
             month: 'August',
-            sum: '1935',
-            avdrag: '6570.50',
-            renterGebyrer: '6973',
+            sum: formatNumber(1935, { decimals: 2 }),
+            avdrag: formatNumber(6570.50, { decimals: 2 }),
+            renterGebyrer: formatNumber(6973, { decimals: 2 }),
         }
     ]
     // Rader uten address vil ikke kunne ekspanderes fordi funksjonen returnerer falsy