refactor(#67): make baseTable accept an element instead of a string

- do this change to allow the table to receive a more general element, instead of a string containing an id to be used in FormattedMessage

dashboard/src/components/Table/BaseTable.tsx

@@ -1,23 +1,29 @@
 import type { ReactElement } from 'react';
 
-import { FormattedMessage } from 'react-intl';
+import classNames from 'classnames';
 
 import { Table, TableHead, TableHeader, TableRow } from '../ui/table';
 
 interface IBaseTable {
-  headers: string[];
+  headers: ReactElement[];
   body: ReactElement;
+  className?: string;
 }
 
-const BaseTable = ({ headers, body }: IBaseTable): JSX.Element => {
+const BaseTable = ({ headers, body, className }: IBaseTable): JSX.Element => {
   return (
-    <div>
-      <Table className="rounded-lg text-black bg-white w-full">
+    <div className="h-full">
+      <Table
+        className={classNames(
+          className,
+          'rounded-lg text-black bg-white w-full',
+        )}
+      >
         <TableHeader className="bg-mediumGray">
           <TableRow>
             {headers.map(column => (
-              <TableHead className="text-black border-b" key={column}>
-                <FormattedMessage id={column} />
+              <TableHead className="text-black border-b" key={column.key}>
+                {column}
               </TableHead>
             ))}
           </TableRow>

dashboard/src/components/Table/TreeTable.tsx

@@ -1,5 +1,7 @@
 import { useMemo } from 'react';
 
+import { FormattedMessage } from 'react-intl';
+
 import { TableRow, TableCell } from '../ui/table';
 
 import { TreeTableBody } from '../../types/tree/Tree';
@@ -52,7 +54,12 @@ const TreeTable = ({ treeTableRows }: ITreeTable): JSX.Element => {
   }, [treeTableRows]);
 
   return (
-    <BaseTable headers={treeTableColumnsLabelId} body={<>{treeTableBody}</>} />
+    <BaseTable
+      headers={treeTableColumnsLabelId.map(columnLabelId => (
+        <FormattedMessage key={columnLabelId} id={columnLabelId} />
+      ))}
+      body={<>{treeTableBody}</>}
+    />
   );
 };