.

statisticsnorway · May 14, 2024 · fb23cc8 · fb23cc8
1 parent c94b6a5
commit fb23cc8
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 16 deletions.
diff --git a/src/components/Table/_table.scss b/src/components/Table/_table.scss
@@ -1,8 +1,9 @@
 .ssb-table {
-  // TODO: Responsive view
-
+  width: 100%;
+  overflow-x: auto;
+
   table {
-    min-width: 800px; // TODO: Example only
+    min-width: 1100px; // TODO: Example
     border-collapse: collapse;
     border: 1px solid $ssb-dark-5;
 
@@ -14,24 +15,27 @@
       border-bottom: transparent;
     }
 
-    caption, tfoot td {
+    .caption-text-wrapper, tfoot td {
       padding: 1.75rem 1rem;
+
+      @media #{$desktop} {
+        max-width: 780px;
+      }
     }
 
     th, td {
       padding: .5rem 2.5rem .5rem 1rem;
     }
 
     caption {
+      text-align: left;
+
       .caption-text-wrapper {
         // TODO: Mix-match of h3 and h4 styling
         @include roboto;
         font-size: 1rem;
         font-weight: bold;
         line-height: 1.75rem;
-        text-align: start;
-
-        max-width: 780px;
       }
     }
 

diff --git a/src/components/Table/index.jsx b/src/components/Table/index.jsx
@@ -8,14 +8,14 @@ import PropTypes from 'prop-types';
 const Table = ({ tableClass, caption, thead, tbody, tfoot }) => (
 	<div className="ssb-table">
 		<table className={`${tableClass ?? ''}`}>
-			{caption && (
+			{caption ? (
 				<caption>
 					<div className="caption-text-wrapper">
 						{caption}
 					</div>
 				</caption>
-			)}
-			{thead?.length && (
+			) : null}
+			{thead?.length ? (
 				<thead>
 					{thead.map(() => (
 						<>
@@ -31,8 +31,8 @@ const Table = ({ tableClass, caption, thead, tbody, tfoot }) => (
 						</>
 					))}
 				</thead>
-			)}
-			{tbody?.length && (
+			) : null}
+			{tbody?.length ? (
 				<tbody>
 					{tbody.map(() => (
 						<>
@@ -49,16 +49,16 @@ const Table = ({ tableClass, caption, thead, tbody, tfoot }) => (
 						</>
 					))}
 				</tbody>
-			)}
-			{tfoot?.length && (
+			) : null}
+			{tfoot?.length ? (
 				<tfoot>
 					{tfoot.map(() => (
 						<tr>
 							<td colSpan="100%"><sup>1</sup>&nbsp;Footer 1</td>
 						</tr>
 					))}
 				</tfoot>
-			)}
+			) : null}
 		</table>
 	</div>
 );

diff --git a/src/components/Table/table.story.jsx b/src/components/Table/table.story.jsx
@@ -6,7 +6,7 @@ export default {
 };
 
 export const TableExample = () => (
-	<Table caption="This is a table" thead={['1']} tbody={['2']} tfoot={['3']} />
+	<Table caption="Tabellens tittel skal inn her, ofte ganske lang og over i hvert fall to linjer. Kanskje lengre. Ofte en del lengre og kan være over flere linjer" thead={['1']} tbody={['2']} tfoot={['3']} />
 );
 
 TableExample.story = {