fix: tablevis export icons

libs/shared/lib/components/buttons/buttons.module.scss

@@ -20,7 +20,7 @@
   }
   padding: 0.25em 0.75em;
   span {
-    overflow: hidden;
+    overflow: visible;
     text-overflow: ellipsis;
     line-height: 1em;
   }
@@ -144,3 +144,9 @@
 .btn-rounded {
   @apply rounded-full;
 }
+
+.exported {
+  span {
+    transform: translate(0px, -8px);
+  }
+}
\ No newline at end of file

libs/shared/lib/components/buttons/buttons.module.scss.d.ts

@@ -16,5 +16,6 @@ declare const classNames: {
   readonly 'btn-ghost': 'btn-ghost';
   readonly 'btn-block': 'btn-block';
   readonly 'btn-rounded': 'btn-rounded';
+  readonly exported: 'exported';
 };
 export = classNames;

libs/shared/lib/components/pagination/index.tsx

@@ -36,15 +36,18 @@ export const Pagination: React.FC<PaginationProps> = ({
     }
   };
 
-  const backIcon = arrangement === 'vertical' ? 'icon-[ic--baseline-arrow-upward]' : 'icon-[ic--baseline-arrow-back]';
-  const forwardIcon = arrangement === 'vertical' ? 'icon-[ic--baseline-arrow-downward]' : 'icon-[ic--baseline-arrow-forward]';
-
+  const backIcon = <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
+  <path fill="currentColor" d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/>
+</svg>
+  const forwardIcon = <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
+  <path fill="currentColor" d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/>
+</svg>
+  
   return (
-    <div
-      className={`self-center table-pagination flex flex-col items-center py-2 gap-1.5 ${arrangement === 'vertical' ? 'flex-col' : 'flex-row'} ${className}`}
-    >
+    <div className={`self-center table-pagination flex flex-col items-center py-2 gap-1.5 ${className}`}>
       <div className="inline-block text-sm">
-        <span className="font-semibold">{`${firstItem} - ${numItemsArrayReal}`}</span> of {totalItems}
+        <span className="font-semibold">{`${firstItem} - ${firstItem + numItemsArrayReal - 1}`}</span>
+        <span className="ml-1">of {totalItems}</span>
       </div>
       <div className={`grid ${arrangement === 'vertical' ? 'grid-rows-3' : 'grid-cols-2'} gap-2`}>
         <Button

libs/shared/lib/vis/visualizations/tablevis/components/Table.tsx

@@ -307,8 +307,10 @@ export const Table = ({ data, itemsPerPage, showBarPlot, showAttributes, selecte
                               )
                             ) : (
                               <div className="font-normal mx-auto flex flex-row items-start justify-center w-full gap-1 text-center text-secondary-700 p-1">
-                                <span className="text-2xs overflow-x-hidden truncate">Unique values:</span>
-                                <span className="text-xs shrink-0">{data2Render[index]?.numElements}</span>
+                              <div className="flex items-center space-x-1 whitespace-nowrap">
+                                <span className="text-2xs">Unique values:</span>
+                                <span className="text-xs font-medium">{data2Render[index]?.numElements}</span>
+                              </div>
                               </div>
                             ))}
                         </div>

libs/shared/lib/vis/visualizations/tablevis/tablevis.tsx

@@ -8,6 +8,7 @@ import html2canvas from 'html2canvas';
 import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { VISComponentType, VisualizationPropTypes, VisualizationSettingsPropTypes } from '../../common';
 import { AugmentedNodeAttributes, Table } from './components/Table';
+import styles from '../../../components/buttons/buttons.module.scss';
 
 export interface TableVisHandle {
   exportImageInternal: () => void;
@@ -110,8 +111,13 @@ export const TableVis = forwardRef<TableVisHandle, VisualizationPropTypes<TableP
 
     const exportImageInternal = () => {
       if (ref.current) {
-        // Check if divRef.current is not null
-        html2canvas(ref.current).then((canvas) => {
+        const clonedElement = ref.current.cloneNode(true) as HTMLDivElement;
+        clonedElement.classList.add(styles.exported);
+
+        document.body.appendChild(clonedElement); 
+
+        html2canvas(clonedElement).then((canvas) => {
+          document.body.removeChild(clonedElement); 
           const pngData = canvas.toDataURL('image/png');
           const a = document.createElement('a');
           a.href = pngData;