Merge pull request #124 from eea/develop

Release Make table mobile responsive Table.jsx
eea · May 22, 2024 · 97d2f56 · 97d2f56
2 parents ae4fea5 + 107f042
commit 97d2f56
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 12 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,7 +4,13 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
-### [8.0.1](https://github.com/eea/volto-block-data-figure/compare/8.0.0...8.0.1) - 21 May 2024
+### [8.0.2](https://github.com/eea/volto-block-data-figure/compare/8.0.1...8.0.2) - 22 May 2024
+
+#### :bug: Bug Fixes
+
+- fix: Make table mobile responsive Table.jsx - refs #270236 [dobri1408 - [`d855fdf`](https://github.com/eea/volto-block-data-figure/commit/d855fdf6ae3b3e4a53c92c7a8582ec957141925d)]
+
+### [8.0.1](https://github.com/eea/volto-block-data-figure/compare/8.0.0...8.0.1) - 22 May 2024
 
 #### :bug: Bug Fixes
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-block-data-figure",
-  "version": "8.0.1",
+  "version": "8.0.2",
   "description": "volto-block-data-figure: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

diff --git a/src/components/manage/Blocks/DataFigure/Table.jsx b/src/components/manage/Blocks/DataFigure/Table.jsx
@@ -11,29 +11,41 @@ import { Table } from 'semantic-ui-react';
  * @extends Component
  */
 const DataTable = ({ data }) => {
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   let headers = data?.tabledata?.properties || {};
-  headers = Object.keys(headers)
-    .map((key) => ({
-      key: key,
-      ...headers[key],
-    }))
-    .sort((a, b) => a.order - b.order);
+
+  const [headersSorted, setHeadersSorted] = React.useState([]);
+
+  React.useEffect(() => {
+    if (Object.keys(headers).length > 0)
+      setHeadersSorted(
+        Object.keys(headers)
+          .map((key) => ({
+            key: key,
+            ...headers[key],
+          }))
+
+          .sort((a, b) => a.order - b.order),
+      );
+  }, [headers]);
+
   const rows = data?.tabledata?.items || [];
+
   return headers ? (
     <>
-      <Table compact striped>
+      <Table compact striped className="responsive">
         <Table.Header>
           <Table.Row>
-            {headers.map((item) => (
+            {headersSorted.map((item) => (
               <Table.HeaderCell>{item.label || item.key}</Table.HeaderCell>
             ))}
           </Table.Row>
         </Table.Header>
         <Table.Body>
           {rows.map((row, idx) => (
             <Table.Row key={`tabledata-${idx}`}>
-              {headers.map((header) => (
-                <Table.Cell>
+              {headersSorted.map((header) => (
+                <Table.Cell data-label={header.label}>
                   {row[header.key] !== null && row[header.key] !== undefined
                     ? row[header.key]
                     : ''}