Hide table footer when all groups are empty

front/src/components/table/Table.tsx

@@ -70,23 +70,27 @@ function Table({ data, columns, viewName, viewIcon }: OwnProps) {
             </tr>
           ))}
         </tbody>
-        <tfoot>
+        {table
-          {table.getFooterGroups().map((footerGroup) => (
+          .getFooterGroups()
-            <tr key={footerGroup.id}>
+          .flatMap((group) => group.headers)
-              {footerGroup.headers.map((header) => (
+          .filter((header) => !!header.column.columnDef.footer).length > 0 && (
-                <th key={header.id}>
+          <tfoot>
-                  {header.isPlaceholder
+            {table.getFooterGroups().map((footerGroup) => (
-                    ? null
+              <tr key={footerGroup.id}>
-                    : flexRender(
+                {footerGroup.headers.map((header) => (
-                        header.column.columnDef.footer,
+                  <th key={header.id}>
-                        header.getContext(),
+                    {header.isPlaceholder
-                      )}
+                      ? null
-                </th>
+                      : flexRender(
-              ))}
+                          header.column.columnDef.footer,
-            </tr>
+                          header.getContext(),
-          ))}
+                        )}
-        </tfoot>
+                  </th>
-      </table>
+                ))}
+              </tr>
+            ))}
+          </tfoot>
+        )}
       </StyledTable>
     </div>
   );