diff --git a/packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap b/packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap
index c9368a18c3c..0edcd54d430 100644
--- a/packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap
+++ b/packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap
@@ -23,13 +23,13 @@ exports[`AnalyticalTable Alternate Row Color 1`] = `
       <header
         class="AnalyticalTable--tableHeaderRow-"
         role="rowgroup"
-        style="position: relative; width: 600px;"
+        style="position: relative; width: 240px;"
       >
         <div
           class="AnalyticalTable--th-"
           id="name"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 0px; width: 150px;"
+          style="position: absolute; top: 0px; left: 0px; width: 60px;"
         >
           <div
             style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
@@ -96,7 +96,7 @@ exports[`AnalyticalTable Alternate Row Color 1`] = `
           class="AnalyticalTable--th-"
           id="age"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 150px; width: 150px;"
+          style="position: absolute; top: 0px; left: 60px; width: 60px;"
         >
           <div
             style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
@@ -163,7 +163,7 @@ exports[`AnalyticalTable Alternate Row Color 1`] = `
           class="AnalyticalTable--th-"
           id="friend.name"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 300px; width: 150px;"
+          style="position: absolute; top: 0px; left: 120px; width: 60px;"
         >
           <div
             style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
@@ -230,7 +230,7 @@ exports[`AnalyticalTable Alternate Row Color 1`] = `
           class="AnalyticalTable--th-"
           id="friend.age"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 450px; width: 150px;"
+          style="position: absolute; top: 0px; left: 180px; width: 60px;"
         >
           <div
             style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden;"
@@ -296,7 +296,7 @@ exports[`AnalyticalTable Alternate Row Color 1`] = `
         </div>
       </header>
       <div
-        style="position: relative; height: 220px; width: 600px; overflow: auto; will-change: transform; direction: ltr;"
+        style="position: relative; height: 220px; width: 240px; overflow: auto; will-change: transform; direction: ltr;"
       >
         <div
           class="AnalyticalTable--tbody- AnalyticalTable--alternateRowColor-"
@@ -310,7 +310,7 @@ exports[`AnalyticalTable Alternate Row Color 1`] = `
           >
             <div
               class="AnalyticalTable--tableCell-"
-              style="position: absolute; top: 0px; left: 0px; width: 150px;"
+              style="position: absolute; top: 0px; left: 0px; width: 60px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -322,7 +322,7 @@ exports[`AnalyticalTable Alternate Row Color 1`] = `
             </div>
             <div
               class="AnalyticalTable--tableCell-"
-              style="position: absolute; top: 0px; left: 150px; width: 150px;"
+              style="position: absolute; top: 0px; left: 60px; width: 60px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -334,7 +334,7 @@ exports[`AnalyticalTable Alternate Row Color 1`] = `
             </div>
             <div
               class="AnalyticalTable--tableCell-"
-              style="position: absolute; top: 0px; left: 300px; width: 150px;"
+              style="position: absolute; top: 0px; left: 120px; width: 60px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -346,7 +346,7 @@ exports[`AnalyticalTable Alternate Row Color 1`] = `
             </div>
             <div
               class="AnalyticalTable--tableCell-"
-              style="position: absolute; top: 0px; left: 450px; width: 150px;"
+              style="position: absolute; top: 0px; left: 180px; width: 60px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -365,7 +365,7 @@ exports[`AnalyticalTable Alternate Row Color 1`] = `
           >
             <div
               class="AnalyticalTable--tableCell-"
-              style="position: absolute; top: 0px; left: 0px; width: 150px;"
+              style="position: absolute; top: 0px; left: 0px; width: 60px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -377,7 +377,7 @@ exports[`AnalyticalTable Alternate Row Color 1`] = `
             </div>
             <div
               class="AnalyticalTable--tableCell-"
-              style="position: absolute; top: 0px; left: 150px; width: 150px;"
+              style="position: absolute; top: 0px; left: 60px; width: 60px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -389,7 +389,7 @@ exports[`AnalyticalTable Alternate Row Color 1`] = `
             </div>
             <div
               class="AnalyticalTable--tableCell-"
-              style="position: absolute; top: 0px; left: 300px; width: 150px;"
+              style="position: absolute; top: 0px; left: 120px; width: 60px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -401,7 +401,7 @@ exports[`AnalyticalTable Alternate Row Color 1`] = `
             </div>
             <div
               class="AnalyticalTable--tableCell-"
-              style="position: absolute; top: 0px; left: 450px; width: 150px;"
+              style="position: absolute; top: 0px; left: 180px; width: 60px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -496,13 +496,13 @@ exports[`AnalyticalTable Loading - Loader 1`] = `
       <header
         class="AnalyticalTable--tableHeaderRow-"
         role="rowgroup"
-        style="position: relative; width: 600px;"
+        style="position: relative; width: 240px;"
       >
         <div
           class="AnalyticalTable--th-"
           id="name"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 0px; width: 150px;"
+          style="position: absolute; top: 0px; left: 0px; width: 60px;"
         >
           <div
             style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
@@ -569,7 +569,7 @@ exports[`AnalyticalTable Loading - Loader 1`] = `
           class="AnalyticalTable--th-"
           id="age"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 150px; width: 150px;"
+          style="position: absolute; top: 0px; left: 60px; width: 60px;"
         >
           <div
             style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
@@ -636,7 +636,7 @@ exports[`AnalyticalTable Loading - Loader 1`] = `
           class="AnalyticalTable--th-"
           id="friend.name"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 300px; width: 150px;"
+          style="position: absolute; top: 0px; left: 120px; width: 60px;"
         >
           <div
             style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
@@ -703,7 +703,7 @@ exports[`AnalyticalTable Loading - Loader 1`] = `
           class="AnalyticalTable--th-"
           id="friend.age"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 450px; width: 150px;"
+          style="position: absolute; top: 0px; left: 180px; width: 60px;"
         >
           <div
             style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden;"
@@ -769,7 +769,7 @@ exports[`AnalyticalTable Loading - Loader 1`] = `
         </div>
       </header>
       <div
-        style="position: relative; height: 220px; width: 600px; overflow: auto; will-change: transform; direction: ltr;"
+        style="position: relative; height: 220px; width: 240px; overflow: auto; will-change: transform; direction: ltr;"
       >
         <div
           class="AnalyticalTable--tbody-"
@@ -783,7 +783,7 @@ exports[`AnalyticalTable Loading - Loader 1`] = `
           >
             <div
               class="AnalyticalTable--tableCell-"
-              style="position: absolute; top: 0px; left: 0px; width: 150px;"
+              style="position: absolute; top: 0px; left: 0px; width: 60px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -795,7 +795,7 @@ exports[`AnalyticalTable Loading - Loader 1`] = `
             </div>
             <div
               class="AnalyticalTable--tableCell-"
-              style="position: absolute; top: 0px; left: 150px; width: 150px;"
+              style="position: absolute; top: 0px; left: 60px; width: 60px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -807,7 +807,7 @@ exports[`AnalyticalTable Loading - Loader 1`] = `
             </div>
             <div
               class="AnalyticalTable--tableCell-"
-              style="position: absolute; top: 0px; left: 300px; width: 150px;"
+              style="position: absolute; top: 0px; left: 120px; width: 60px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -819,7 +819,7 @@ exports[`AnalyticalTable Loading - Loader 1`] = `
             </div>
             <div
               class="AnalyticalTable--tableCell-"
-              style="position: absolute; top: 0px; left: 450px; width: 150px;"
+              style="position: absolute; top: 0px; left: 180px; width: 60px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -838,7 +838,7 @@ exports[`AnalyticalTable Loading - Loader 1`] = `
           >
             <div
               class="AnalyticalTable--tableCell-"
-              style="position: absolute; top: 0px; left: 0px; width: 150px;"
+              style="position: absolute; top: 0px; left: 0px; width: 60px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -850,7 +850,7 @@ exports[`AnalyticalTable Loading - Loader 1`] = `
             </div>
             <div
               class="AnalyticalTable--tableCell-"
-              style="position: absolute; top: 0px; left: 150px; width: 150px;"
+              style="position: absolute; top: 0px; left: 60px; width: 60px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -862,7 +862,7 @@ exports[`AnalyticalTable Loading - Loader 1`] = `
             </div>
             <div
               class="AnalyticalTable--tableCell-"
-              style="position: absolute; top: 0px; left: 300px; width: 150px;"
+              style="position: absolute; top: 0px; left: 120px; width: 60px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -874,7 +874,7 @@ exports[`AnalyticalTable Loading - Loader 1`] = `
             </div>
             <div
               class="AnalyticalTable--tableCell-"
-              style="position: absolute; top: 0px; left: 450px; width: 150px;"
+              style="position: absolute; top: 0px; left: 180px; width: 60px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -969,13 +969,13 @@ exports[`AnalyticalTable Loading - Placeholder 1`] = `
       <header
         class="AnalyticalTable--tableHeaderRow-"
         role="rowgroup"
-        style="position: relative; width: 600px;"
+        style="position: relative; width: 240px;"
       >
         <div
           class="AnalyticalTable--th-"
           id="name"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 0px; width: 150px;"
+          style="position: absolute; top: 0px; left: 0px; width: 60px;"
         >
           <div
             style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
@@ -1042,7 +1042,7 @@ exports[`AnalyticalTable Loading - Placeholder 1`] = `
           class="AnalyticalTable--th-"
           id="age"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 150px; width: 150px;"
+          style="position: absolute; top: 0px; left: 60px; width: 60px;"
         >
           <div
             style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
@@ -1109,7 +1109,7 @@ exports[`AnalyticalTable Loading - Placeholder 1`] = `
           class="AnalyticalTable--th-"
           id="friend.name"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 300px; width: 150px;"
+          style="position: absolute; top: 0px; left: 120px; width: 60px;"
         >
           <div
             style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
@@ -1176,7 +1176,7 @@ exports[`AnalyticalTable Loading - Placeholder 1`] = `
           class="AnalyticalTable--th-"
           id="friend.age"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 450px; width: 150px;"
+          style="position: absolute; top: 0px; left: 180px; width: 60px;"
         >
           <div
             style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden;"
@@ -1497,13 +1497,13 @@ exports[`AnalyticalTable Tree Table 1`] = `
       <header
         class="AnalyticalTable--tableHeaderRow-"
         role="rowgroup"
-        style="position: relative; width: 600px;"
+        style="position: relative; width: 240px;"
       >
         <div
           class="AnalyticalTable--th-"
           id="name"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 0px; width: 150px;"
+          style="position: absolute; top: 0px; left: 0px; width: 60px;"
         >
           <div
             style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
@@ -1591,7 +1591,7 @@ exports[`AnalyticalTable Tree Table 1`] = `
           class="AnalyticalTable--th-"
           id="age"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 150px; width: 150px;"
+          style="position: absolute; top: 0px; left: 60px; width: 60px;"
         >
           <div
             style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
@@ -1679,7 +1679,7 @@ exports[`AnalyticalTable Tree Table 1`] = `
           class="AnalyticalTable--th-"
           id="friend.name"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 300px; width: 150px;"
+          style="position: absolute; top: 0px; left: 120px; width: 60px;"
         >
           <div
             style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
@@ -1767,7 +1767,7 @@ exports[`AnalyticalTable Tree Table 1`] = `
           class="AnalyticalTable--th-"
           id="friend.age"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 450px; width: 150px;"
+          style="position: absolute; top: 0px; left: 180px; width: 60px;"
         >
           <div
             style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden;"
@@ -1854,7 +1854,7 @@ exports[`AnalyticalTable Tree Table 1`] = `
         </div>
       </header>
       <div
-        style="position: relative; height: 220px; width: 600px; overflow: auto; will-change: transform; direction: ltr;"
+        style="position: relative; height: 220px; width: 240px; overflow: auto; will-change: transform; direction: ltr;"
       >
         <div
           class="AnalyticalTable--tbody- AnalyticalTable--selectable-"
@@ -1868,7 +1868,7 @@ exports[`AnalyticalTable Tree Table 1`] = `
           >
             <div
               class="AnalyticalTable--tableCell-"
-              style="position: absolute; top: 0px; left: 0px; width: 150px;"
+              style="position: absolute; top: 0px; left: 0px; width: 60px;"
             >
               <span
                 style="cursor: pointer; padding-left: 0px;"
@@ -1890,7 +1890,7 @@ exports[`AnalyticalTable Tree Table 1`] = `
             </div>
             <div
               class="AnalyticalTable--tableCell-"
-              style="position: absolute; top: 0px; left: 150px; width: 150px;"
+              style="position: absolute; top: 0px; left: 60px; width: 60px;"
             >
               <span
                 style="padding-left: 0px;"
@@ -1905,7 +1905,7 @@ exports[`AnalyticalTable Tree Table 1`] = `
             </div>
             <div
               class="AnalyticalTable--tableCell-"
-              style="position: absolute; top: 0px; left: 300px; width: 150px;"
+              style="position: absolute; top: 0px; left: 120px; width: 60px;"
             >
               <span
                 style="padding-left: 0px;"
@@ -1920,7 +1920,7 @@ exports[`AnalyticalTable Tree Table 1`] = `
             </div>
             <div
               class="AnalyticalTable--tableCell-"
-              style="position: absolute; top: 0px; left: 450px; width: 150px;"
+              style="position: absolute; top: 0px; left: 180px; width: 60px;"
             >
               <span
                 style="padding-left: 0px;"
@@ -1942,7 +1942,7 @@ exports[`AnalyticalTable Tree Table 1`] = `
           >
             <div
               class="AnalyticalTable--tableCell-"
-              style="position: absolute; top: 0px; left: 0px; width: 150px;"
+              style="position: absolute; top: 0px; left: 0px; width: 60px;"
             >
               <span />
               <span
@@ -1955,7 +1955,7 @@ exports[`AnalyticalTable Tree Table 1`] = `
             </div>
             <div
               class="AnalyticalTable--tableCell-"
-              style="position: absolute; top: 0px; left: 150px; width: 150px;"
+              style="position: absolute; top: 0px; left: 60px; width: 60px;"
             >
               <span
                 style="padding-left: 0px;"
@@ -1970,7 +1970,7 @@ exports[`AnalyticalTable Tree Table 1`] = `
             </div>
             <div
               class="AnalyticalTable--tableCell-"
-              style="position: absolute; top: 0px; left: 300px; width: 150px;"
+              style="position: absolute; top: 0px; left: 120px; width: 60px;"
             >
               <span
                 style="padding-left: 0px;"
@@ -1985,7 +1985,7 @@ exports[`AnalyticalTable Tree Table 1`] = `
             </div>
             <div
               class="AnalyticalTable--tableCell-"
-              style="position: absolute; top: 0px; left: 450px; width: 150px;"
+              style="position: absolute; top: 0px; left: 180px; width: 60px;"
             >
               <span
                 style="padding-left: 0px;"
@@ -2083,13 +2083,13 @@ exports[`AnalyticalTable custom row height 1`] = `
       <header
         class="AnalyticalTable--tableHeaderRow-"
         role="rowgroup"
-        style="position: relative; width: 600px;"
+        style="position: relative; width: 240px;"
       >
         <div
           class="AnalyticalTable--th-"
           id="name"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 0px; width: 150px;"
+          style="position: absolute; top: 0px; left: 0px; width: 60px;"
         >
           <div
             style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
@@ -2156,7 +2156,7 @@ exports[`AnalyticalTable custom row height 1`] = `
           class="AnalyticalTable--th-"
           id="age"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 150px; width: 150px;"
+          style="position: absolute; top: 0px; left: 60px; width: 60px;"
         >
           <div
             style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
@@ -2223,7 +2223,7 @@ exports[`AnalyticalTable custom row height 1`] = `
           class="AnalyticalTable--th-"
           id="friend.name"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 300px; width: 150px;"
+          style="position: absolute; top: 0px; left: 120px; width: 60px;"
         >
           <div
             style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
@@ -2290,7 +2290,7 @@ exports[`AnalyticalTable custom row height 1`] = `
           class="AnalyticalTable--th-"
           id="friend.age"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 450px; width: 150px;"
+          style="position: absolute; top: 0px; left: 180px; width: 60px;"
         >
           <div
             style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden;"
@@ -2356,7 +2356,7 @@ exports[`AnalyticalTable custom row height 1`] = `
         </div>
       </header>
       <div
-        style="position: relative; height: 300px; width: 600px; overflow: auto; will-change: transform; direction: ltr;"
+        style="position: relative; height: 300px; width: 240px; overflow: auto; will-change: transform; direction: ltr;"
       >
         <div
           class="AnalyticalTable--tbody-"
@@ -2370,7 +2370,7 @@ exports[`AnalyticalTable custom row height 1`] = `
           >
             <div
               class="AnalyticalTable--tableCell-"
-              style="position: absolute; top: 0px; left: 0px; width: 150px;"
+              style="position: absolute; top: 0px; left: 0px; width: 60px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -2382,7 +2382,7 @@ exports[`AnalyticalTable custom row height 1`] = `
             </div>
             <div
               class="AnalyticalTable--tableCell-"
-              style="position: absolute; top: 0px; left: 150px; width: 150px;"
+              style="position: absolute; top: 0px; left: 60px; width: 60px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -2394,7 +2394,7 @@ exports[`AnalyticalTable custom row height 1`] = `
             </div>
             <div
               class="AnalyticalTable--tableCell-"
-              style="position: absolute; top: 0px; left: 300px; width: 150px;"
+              style="position: absolute; top: 0px; left: 120px; width: 60px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -2406,7 +2406,7 @@ exports[`AnalyticalTable custom row height 1`] = `
             </div>
             <div
               class="AnalyticalTable--tableCell-"
-              style="position: absolute; top: 0px; left: 450px; width: 150px;"
+              style="position: absolute; top: 0px; left: 180px; width: 60px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -2425,7 +2425,7 @@ exports[`AnalyticalTable custom row height 1`] = `
           >
             <div
               class="AnalyticalTable--tableCell-"
-              style="position: absolute; top: 0px; left: 0px; width: 150px;"
+              style="position: absolute; top: 0px; left: 0px; width: 60px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -2437,7 +2437,7 @@ exports[`AnalyticalTable custom row height 1`] = `
             </div>
             <div
               class="AnalyticalTable--tableCell-"
-              style="position: absolute; top: 0px; left: 150px; width: 150px;"
+              style="position: absolute; top: 0px; left: 60px; width: 60px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -2449,7 +2449,7 @@ exports[`AnalyticalTable custom row height 1`] = `
             </div>
             <div
               class="AnalyticalTable--tableCell-"
-              style="position: absolute; top: 0px; left: 300px; width: 150px;"
+              style="position: absolute; top: 0px; left: 120px; width: 60px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -2461,7 +2461,7 @@ exports[`AnalyticalTable custom row height 1`] = `
             </div>
             <div
               class="AnalyticalTable--tableCell-"
-              style="position: absolute; top: 0px; left: 450px; width: 150px;"
+              style="position: absolute; top: 0px; left: 180px; width: 60px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -2556,13 +2556,13 @@ exports[`AnalyticalTable render without data 1`] = `
       <header
         class="AnalyticalTable--tableHeaderRow-"
         role="rowgroup"
-        style="position: relative; width: 600px;"
+        style="position: relative; width: 240px;"
       >
         <div
           class="AnalyticalTable--th-"
           id="name"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 0px; width: 150px;"
+          style="position: absolute; top: 0px; left: 0px; width: 60px;"
         >
           <div
             style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
@@ -2629,7 +2629,7 @@ exports[`AnalyticalTable render without data 1`] = `
           class="AnalyticalTable--th-"
           id="age"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 150px; width: 150px;"
+          style="position: absolute; top: 0px; left: 60px; width: 60px;"
         >
           <div
             style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
@@ -2696,7 +2696,7 @@ exports[`AnalyticalTable render without data 1`] = `
           class="AnalyticalTable--th-"
           id="friend.name"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 300px; width: 150px;"
+          style="position: absolute; top: 0px; left: 120px; width: 60px;"
         >
           <div
             style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
@@ -2763,7 +2763,7 @@ exports[`AnalyticalTable render without data 1`] = `
           class="AnalyticalTable--th-"
           id="friend.age"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 450px; width: 150px;"
+          style="position: absolute; top: 0px; left: 180px; width: 60px;"
         >
           <div
             style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden;"
@@ -2862,13 +2862,13 @@ exports[`AnalyticalTable test Asc desc 1`] = `
       <header
         class="AnalyticalTable--tableHeaderRow-"
         role="rowgroup"
-        style="position: relative; width: 600px;"
+        style="position: relative; width: 240px;"
       >
         <div
           class="AnalyticalTable--th-"
           id="name"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 0px; width: 150px;"
+          style="position: absolute; top: 0px; left: 0px; width: 60px;"
         >
           <div
             style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
@@ -2935,7 +2935,7 @@ exports[`AnalyticalTable test Asc desc 1`] = `
           class="AnalyticalTable--th-"
           id="age"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 150px; width: 150px;"
+          style="position: absolute; top: 0px; left: 60px; width: 60px;"
         >
           <div
             style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
@@ -3002,7 +3002,7 @@ exports[`AnalyticalTable test Asc desc 1`] = `
           class="AnalyticalTable--th-"
           id="friend.name"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 300px; width: 150px;"
+          style="position: absolute; top: 0px; left: 120px; width: 60px;"
         >
           <div
             style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
@@ -3069,7 +3069,7 @@ exports[`AnalyticalTable test Asc desc 1`] = `
           class="AnalyticalTable--th-"
           id="friend.age"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 450px; width: 150px;"
+          style="position: absolute; top: 0px; left: 180px; width: 60px;"
         >
           <div
             style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden;"
@@ -3135,7 +3135,7 @@ exports[`AnalyticalTable test Asc desc 1`] = `
         </div>
       </header>
       <div
-        style="position: relative; height: 220px; width: 600px; overflow: auto; will-change: transform; direction: ltr;"
+        style="position: relative; height: 220px; width: 240px; overflow: auto; will-change: transform; direction: ltr;"
       >
         <div
           class="AnalyticalTable--tbody-"
@@ -3149,7 +3149,7 @@ exports[`AnalyticalTable test Asc desc 1`] = `
           >
             <div
               class="AnalyticalTable--tableCell-"
-              style="position: absolute; top: 0px; left: 0px; width: 150px;"
+              style="position: absolute; top: 0px; left: 0px; width: 60px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -3161,7 +3161,7 @@ exports[`AnalyticalTable test Asc desc 1`] = `
             </div>
             <div
               class="AnalyticalTable--tableCell-"
-              style="position: absolute; top: 0px; left: 150px; width: 150px;"
+              style="position: absolute; top: 0px; left: 60px; width: 60px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -3173,7 +3173,7 @@ exports[`AnalyticalTable test Asc desc 1`] = `
             </div>
             <div
               class="AnalyticalTable--tableCell-"
-              style="position: absolute; top: 0px; left: 300px; width: 150px;"
+              style="position: absolute; top: 0px; left: 120px; width: 60px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -3185,7 +3185,7 @@ exports[`AnalyticalTable test Asc desc 1`] = `
             </div>
             <div
               class="AnalyticalTable--tableCell-"
-              style="position: absolute; top: 0px; left: 450px; width: 150px;"
+              style="position: absolute; top: 0px; left: 180px; width: 60px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -3204,7 +3204,7 @@ exports[`AnalyticalTable test Asc desc 1`] = `
           >
             <div
               class="AnalyticalTable--tableCell-"
-              style="position: absolute; top: 0px; left: 0px; width: 150px;"
+              style="position: absolute; top: 0px; left: 0px; width: 60px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -3216,7 +3216,7 @@ exports[`AnalyticalTable test Asc desc 1`] = `
             </div>
             <div
               class="AnalyticalTable--tableCell-"
-              style="position: absolute; top: 0px; left: 150px; width: 150px;"
+              style="position: absolute; top: 0px; left: 60px; width: 60px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -3228,7 +3228,7 @@ exports[`AnalyticalTable test Asc desc 1`] = `
             </div>
             <div
               class="AnalyticalTable--tableCell-"
-              style="position: absolute; top: 0px; left: 300px; width: 150px;"
+              style="position: absolute; top: 0px; left: 120px; width: 60px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -3240,7 +3240,7 @@ exports[`AnalyticalTable test Asc desc 1`] = `
             </div>
             <div
               class="AnalyticalTable--tableCell-"
-              style="position: absolute; top: 0px; left: 450px; width: 150px;"
+              style="position: absolute; top: 0px; left: 180px; width: 60px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -3335,13 +3335,13 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
       <header
         class="AnalyticalTable--tableHeaderRow-"
         role="rowgroup"
-        style="position: relative; width: 600px;"
+        style="position: relative; width: 240px;"
       >
         <div
           class="AnalyticalTable--th-"
           id="name"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 0px; width: 150px;"
+          style="position: absolute; top: 0px; left: 0px; width: 60px;"
         >
           <div
             style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
@@ -3408,7 +3408,7 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
           class="AnalyticalTable--th-"
           id="age"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 150px; width: 150px;"
+          style="position: absolute; top: 0px; left: 60px; width: 60px;"
         >
           <div
             style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
@@ -3475,7 +3475,7 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
           class="AnalyticalTable--th-"
           id="friend.name"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 300px; width: 150px;"
+          style="position: absolute; top: 0px; left: 120px; width: 60px;"
         >
           <div
             style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
@@ -3542,7 +3542,7 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
           class="AnalyticalTable--th-"
           id="friend.age"
           role="columnheader"
-          style="position: absolute; top: 0px; left: 450px; width: 150px;"
+          style="position: absolute; top: 0px; left: 180px; width: 60px;"
         >
           <div
             style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden;"
@@ -3608,7 +3608,7 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
         </div>
       </header>
       <div
-        style="position: relative; height: 220px; width: 600px; overflow: auto; will-change: transform; direction: ltr;"
+        style="position: relative; height: 220px; width: 240px; overflow: auto; will-change: transform; direction: ltr;"
       >
         <div
           class="AnalyticalTable--tbody-"
@@ -3622,7 +3622,7 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
           >
             <div
               class="AnalyticalTable--tableCell-"
-              style="position: absolute; top: 0px; left: 0px; width: 150px;"
+              style="position: absolute; top: 0px; left: 0px; width: 60px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -3634,7 +3634,7 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
             </div>
             <div
               class="AnalyticalTable--tableCell-"
-              style="position: absolute; top: 0px; left: 150px; width: 150px;"
+              style="position: absolute; top: 0px; left: 60px; width: 60px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -3646,7 +3646,7 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
             </div>
             <div
               class="AnalyticalTable--tableCell-"
-              style="position: absolute; top: 0px; left: 300px; width: 150px;"
+              style="position: absolute; top: 0px; left: 120px; width: 60px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -3658,7 +3658,7 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
             </div>
             <div
               class="AnalyticalTable--tableCell-"
-              style="position: absolute; top: 0px; left: 450px; width: 150px;"
+              style="position: absolute; top: 0px; left: 180px; width: 60px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -3677,7 +3677,7 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
           >
             <div
               class="AnalyticalTable--tableCell-"
-              style="position: absolute; top: 0px; left: 0px; width: 150px;"
+              style="position: absolute; top: 0px; left: 0px; width: 60px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -3689,7 +3689,7 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
             </div>
             <div
               class="AnalyticalTable--tableCell-"
-              style="position: absolute; top: 0px; left: 150px; width: 150px;"
+              style="position: absolute; top: 0px; left: 60px; width: 60px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -3701,7 +3701,7 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
             </div>
             <div
               class="AnalyticalTable--tableCell-"
-              style="position: absolute; top: 0px; left: 300px; width: 150px;"
+              style="position: absolute; top: 0px; left: 120px; width: 60px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
@@ -3713,7 +3713,7 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
             </div>
             <div
               class="AnalyticalTable--tableCell-"
-              style="position: absolute; top: 0px; left: 450px; width: 150px;"
+              style="position: absolute; top: 0px; left: 180px; width: 60px;"
             >
               <span
                 class="Text--text- Text--noWrap-"
diff --git a/packages/main/src/components/AnalyticalTable/index.tsx b/packages/main/src/components/AnalyticalTable/index.tsx
index b4516cc5d32..4f29bdf56c1 100644
--- a/packages/main/src/components/AnalyticalTable/index.tsx
+++ b/packages/main/src/components/AnalyticalTable/index.tsx
@@ -38,7 +38,7 @@ import { CommonProps } from '../../interfaces/CommonProps';
 import { JSSTheme } from '../../interfaces/JSSTheme';
 import styles from './AnayticalTable.jss';
 import { ColumnHeader } from './ColumnHeader';
-import { DefaultColumn } from './defaults/Column';
+import { DEFAULT_COLUMN_WIDTH, DefaultColumn } from './defaults/Column';
 import { DefaultLoadingComponent } from './defaults/LoadingComponent';
 import { TablePlaceholder } from './defaults/LoadingComponent/TablePlaceholder';
 import { DefaultNoDataComponent } from './defaults/NoDataComponent';
@@ -231,18 +231,30 @@ const AnalyticalTable: FC<TableProps> = forwardRef((props: TableProps, ref: Ref<
     const visibleColumns = columns.filter(Boolean).filter((item) => {
       return (item.isVisible ?? true) && !tableState.hiddenColumns.includes(item.accessor);
     });
-    const columnsWithFixedWidth = visibleColumns
-      .filter(({ width, minWidth }) => width ?? minWidth ?? false)
-      .map(({ width, minWidth }) => width ?? minWidth);
+    const columnsWithFixedWidth = visibleColumns.filter(({ width }) => width ?? false).map(({ width }) => width);
     const fixedWidth = columnsWithFixedWidth.reduce((acc, val) => acc + val, 0);
-    if (visibleColumns.length > 0 && tableRef.current.clientWidth > 0) {
-      setColumnWidth(
-        (tableRef.current.clientWidth - fixedWidth) / (visibleColumns.length - columnsWithFixedWidth.length)
-      );
+
+    const tableClientWidth = tableRef.current.clientWidth;
+    const defaultColumnsCount = visibleColumns.length - columnsWithFixedWidth.length;
+
+    //check if columns are visible and table has width
+    if (visibleColumns.length > 0 && tableClientWidth > 0) {
+      //set fixedWidth as defaultWidth if visible columns have fixed value
+      if (visibleColumns.length === columnsWithFixedWidth.length) {
+        setColumnWidth(fixedWidth / visibleColumns.length);
+        return;
+      }
+      //spread default columns
+      if (tableClientWidth >= fixedWidth + defaultColumnsCount * DEFAULT_COLUMN_WIDTH) {
+        setColumnWidth((tableClientWidth - fixedWidth) / defaultColumnsCount);
+      } else {
+        //set defaultWidth for default columns if table is overflowing
+        setColumnWidth(DEFAULT_COLUMN_WIDTH);
+      }
     } else {
-      setColumnWidth(150);
+      setColumnWidth(DEFAULT_COLUMN_WIDTH);
     }
-  }, [tableRef.current, columns, tableState.hiddenColumns]);
+  }, [tableRef.current, columns, tableState.hiddenColumns, DEFAULT_COLUMN_WIDTH]);
 
   useEffect(() => {
     updateTableSizes();
@@ -333,7 +345,7 @@ const AnalyticalTable: FC<TableProps> = forwardRef((props: TableProps, ref: Ref<
                     <ColumnHeader
                       id={column.id}
                       {...column.getHeaderProps()}
-                      isLastColumn={index === columns.length - 1}
+                      isLastColumn={index === headerGroup.headers.length - 1}
                       groupable={column.groupable ?? props.groupable}
                       sortable={column.sortable ?? props.sortable}
                       filterable={column.filterable ?? props.filterable}