diff --git a/public/akaunting-js/generalAction.js b/public/akaunting-js/generalAction.js
index a2f229f71..55b4f3b91 100644
--- a/public/akaunting-js/generalAction.js
+++ b/public/akaunting-js/generalAction.js
@@ -360,6 +360,12 @@ if (navigator.userAgent.search("Firefox") >= 0) {
 
 //margue animation for truncated text
 function marqueeAnimation(truncate) {
+    if (truncate.closest('[data-disable-truncate]') !== null) {
+        truncate.parentElement.classList.add('truncate');
+        return;
+    }
+    // offsetwidth = width of the text, clientWidth = width of parent text (div)
+    // because some index page has icons, we use two time parent element
     if (truncate.offsetWidth > truncate.parentElement.clientWidth || truncate.offsetWidth > truncate.parentElement.parentElement.clientWidth) {        
         truncate.addEventListener('mouseover', function () {
             truncate.parentElement.style.animationPlayState = 'running';
@@ -385,7 +391,7 @@ document.querySelectorAll('[data-truncate]').forEach((truncate) => {
     marqueeAnimation(truncate);
 });
 
-//disable/enable icons ejected from data-truncate
+//disable/enable icons ejected from data-truncate, HTML of icons ejected from parent element (data-truncate)
 document.querySelectorAll('[data-index-icon]').forEach((defaultText) => {
     defaultText.parentElement.parentElement.parentElement.appendChild(defaultText);
 });
diff --git a/resources/views/components/table/index.blade.php b/resources/views/components/table/index.blade.php
index 6c0f1907a..91d311568 100644
--- a/resources/views/components/table/index.blade.php
+++ b/resources/views/components/table/index.blade.php
@@ -1,6 +1,6 @@
 <div class="overflow-x-visible">
     <div class="py-2 align-middle">
-        <table class="flex flex-col divide-y divide-gray-200">
+        <table class="flex flex-col divide-y divide-gray-200" {{ $attributes }}>
             {{ $slot }}
         </table>
     </div>