diff --git a/packages/asc-web-components/table-container/TableHeader.js b/packages/asc-web-components/table-container/TableHeader.js
index ff5f8366fc..8999b39011 100644
--- a/packages/asc-web-components/table-container/TableHeader.js
+++ b/packages/asc-web-components/table-container/TableHeader.js
@@ -19,7 +19,7 @@ class TableHeader extends React.Component {
   constructor(props) {
     super(props);
 
-    this.state = { columnIndex: null };
+    this.state = { columnIndex: null, hideColumns: false };
 
     this.headerRef = React.createRef();
     this.throttledResize = throttle(this.onResize, 300);
@@ -42,10 +42,11 @@ class TableHeader extends React.Component {
 
   getNextColumn = (array, index) => {
     let i = 1;
+
     while (array.length !== i) {
       const item = array[index + i];
 
-      if (!item) return null;
+      if (!item || this.state.hideColumns) return null;
       else if (!item.enable) i++;
       else return item;
     }
@@ -194,10 +195,15 @@ class TableHeader extends React.Component {
   };
 
   onMouseUp = () => {
-    localStorage.setItem(
-      this.props.columnStorageName,
-      this.props.containerRef.current.style.gridTemplateColumns
-    );
+    !this.props.infoPanelVisible
+      ? localStorage.setItem(
+          this.props.columnStorageName,
+          this.props.containerRef.current.style.gridTemplateColumns
+        )
+      : localStorage.setItem(
+          this.props.columnInfoPanelStorageName,
+          this.props.containerRef.current.style.gridTemplateColumns
+        );
 
     window.removeEventListener("mousemove", this.onMouseMove);
     window.removeEventListener("mouseup", this.onMouseUp);
@@ -214,11 +220,16 @@ class TableHeader extends React.Component {
     const {
       containerRef,
       columnStorageName,
+      columnInfoPanelStorageName,
       resetColumnsSize,
       sectionWidth,
       infoPanelVisible,
     } = this.props;
 
+    if (!infoPanelVisible && this.state.hideColumns) {
+      this.setState({ hideColumns: false });
+    }
+
     let activeColumnIndex = null;
 
     const container = containerRef.current
@@ -274,63 +285,214 @@ class TableHeader extends React.Component {
 
     if (tableContainer.length > 1) {
       const gridTemplateColumns = [];
+      let hideColumns = false;
 
-      for (let index in tableContainer) {
-        const item = tableContainer[index];
+      if (infoPanelVisible) {
+        const storageInfoPanelSize = localStorage.getItem(
+          columnInfoPanelStorageName
+        );
 
-        const column = document.getElementById("column_" + index);
-        const enable =
-          index == tableContainer.length - 1 ||
-          (column ? column.dataset.enable === "true" : item !== "0px");
-        const defaultColumnSize = column && column.dataset.defaultSize;
+        const tableInfoPanelContainer = storageInfoPanelSize
+          ? storageInfoPanelSize.split(" ")
+          : tableContainer;
 
-        const isActiveNow = item === "0px" && enable;
-        if (isActiveNow && column) activeColumnIndex = index;
+        let containerMinWidth = containerWidth - defaultSize - settingsSize;
 
-        if (!enable) {
-          gridTemplateColumns.push("0px");
+        tableInfoPanelContainer.forEach((item, index) => {
+          const column = document.getElementById("column_" + index);
+          const enable =
+            index == tableContainer.length - 1 ||
+            (column ? column.dataset.enable === "true" : item !== "0px");
 
-          let colIndex = 1;
-          let leftEnableColumn = gridTemplateColumns[index - colIndex];
-          while (leftEnableColumn === "0px") {
-            colIndex++;
-            leftEnableColumn = gridTemplateColumns[index - colIndex];
+          if (
+            enable &&
+            item !== `${defaultSize}px` &&
+            item !== `${settingsSize}px`
+          ) {
+            if (column?.dataset?.minWidth) {
+              containerMinWidth = containerMinWidth - column.dataset.minWidth;
+            } else {
+              containerMinWidth = containerMinWidth - defaultMinColumnSize;
+            }
           }
+        });
 
-          //added the size of the disabled column to the left column
-          gridTemplateColumns[index - colIndex] =
-            this.getSubstring(gridTemplateColumns[index - colIndex]) +
-            this.getSubstring(item) +
-            "px";
-        } else if (item !== `${settingsSize}px`) {
-          const percent = (this.getSubstring(item) / oldWidth) * 100;
+        if (containerMinWidth < 0) {
+          hideColumns = true;
+        }
 
-          const newItemWidth = defaultColumnSize
-            ? `${defaultColumnSize}px`
-            : percent === 0
-            ? `${minColumnSize}px`
-            : ((containerWidth - defaultSize - settingsSize) * percent) / 100 +
-              "px";
+        if (this.state.hideColumns !== hideColumns) {
+          this.setState({ hideColumns: hideColumns });
+        }
 
-          gridTemplateColumns.push(newItemWidth);
+        if (hideColumns) {
+          tableInfoPanelContainer.forEach((item, index) => {
+            const column = document.getElementById("column_" + index);
+
+            if (column?.dataset?.minWidth) {
+              gridTemplateColumns.push(
+                `${containerWidth - defaultSize - settingsSize}px`
+              );
+            } else if (
+              item === `${defaultSize}px` ||
+              item === `${settingsSize}px`
+            ) {
+              gridTemplateColumns.push(item);
+            } else {
+              gridTemplateColumns.push("0px");
+            }
+          });
         } else {
-          gridTemplateColumns.push(item);
+          let contentWidth = containerWidth - defaultSize - settingsSize;
+
+          let enabledColumnsCount = 0;
+
+          tableInfoPanelContainer.forEach((item, index) => {
+            if (
+              index != 0 &&
+              item !== "0px" &&
+              item !== `${defaultSize}px` &&
+              item !== `${settingsSize}px`
+            ) {
+              enabledColumnsCount++;
+            }
+          });
+
+          const newOldWidth =
+            tableInfoPanelContainer
+              .map((column) => this.getSubstring(column))
+              .reduce((x, y) => x + y) -
+            defaultSize -
+            settingsSize;
+
+          if (
+            contentWidth - enabledColumnsCount * defaultMinColumnSize >
+            this.getSubstring(tableInfoPanelContainer[0])
+          ) {
+            const currentContentWidth =
+              contentWidth - +this.getSubstring(tableInfoPanelContainer[0]);
+
+            tableInfoPanelContainer.forEach((item, index) => {
+              if (index == 0) {
+                gridTemplateColumns.push(item);
+              } else {
+                const column = document.getElementById("column_" + index);
+
+                const enable =
+                  index == tableInfoPanelContainer.length - 1 ||
+                  (column ? column.dataset.enable === "true" : item !== "0px");
+
+                const defaultColumnSize = column && column.dataset.defaultSize;
+
+                if (!enable) {
+                  gridTemplateColumns.push("0px");
+                } else if (item !== `${settingsSize}px`) {
+                  const percent =
+                    (this.getSubstring(item) /
+                      (newOldWidth -
+                        +this.getSubstring(tableInfoPanelContainer[0]))) *
+                    100;
+
+                  const newItemWidth = defaultColumnSize
+                    ? `${defaultColumnSize}px`
+                    : (currentContentWidth * percent) / 100 >
+                      defaultMinColumnSize
+                    ? (currentContentWidth * percent) / 100 + "px"
+                    : defaultMinColumnSize + "px";
+
+                  gridTemplateColumns.push(newItemWidth);
+                } else {
+                  gridTemplateColumns.push(item);
+                }
+              }
+            });
+          } else {
+            tableInfoPanelContainer.forEach((item, index) => {
+              const column = document.getElementById("column_" + index);
+
+              const enable =
+                index == tableInfoPanelContainer.length - 1 ||
+                (column ? column.dataset.enable === "true" : item !== "0px");
+
+              const defaultColumnSize = column && column.dataset.defaultSize;
+
+              if (!enable) {
+                gridTemplateColumns.push("0px");
+              } else if (item !== `${settingsSize}px`) {
+                const newItemWidth = defaultColumnSize
+                  ? `${defaultColumnSize}px`
+                  : index == 0
+                  ? `${
+                      contentWidth - enabledColumnsCount * defaultMinColumnSize
+                    }px`
+                  : `${defaultMinColumnSize}px`;
+
+                gridTemplateColumns.push(newItemWidth);
+              } else {
+                gridTemplateColumns.push(item);
+              }
+            });
+          }
+        }
+      } else {
+        for (let index in tableContainer) {
+          const item = tableContainer[index];
+
+          const column = document.getElementById("column_" + index);
+          const enable =
+            index == tableContainer.length - 1 ||
+            (column ? column.dataset.enable === "true" : item !== "0px");
+          const defaultColumnSize = column && column.dataset.defaultSize;
+
+          const isActiveNow = item === "0px" && enable;
+          if (isActiveNow && column) activeColumnIndex = index;
+
+          if (!enable) {
+            gridTemplateColumns.push("0px");
+
+            let colIndex = 1;
+            let leftEnableColumn = gridTemplateColumns[index - colIndex];
+            while (leftEnableColumn === "0px") {
+              colIndex++;
+              leftEnableColumn = gridTemplateColumns[index - colIndex];
+            }
+
+            //added the size of the disabled column to the left column
+            gridTemplateColumns[index - colIndex] =
+              this.getSubstring(gridTemplateColumns[index - colIndex]) +
+              this.getSubstring(item) +
+              "px";
+          } else if (item !== `${settingsSize}px`) {
+            const percent = (this.getSubstring(item) / oldWidth) * 100;
+
+            const newItemWidth = defaultColumnSize
+              ? `${defaultColumnSize}px`
+              : percent === 0
+              ? `${minColumnSize}px`
+              : ((containerWidth - defaultSize - settingsSize) * percent) /
+                  100 +
+                "px";
+
+            gridTemplateColumns.push(newItemWidth);
+          } else {
+            gridTemplateColumns.push(item);
+          }
+        }
+
+        if (activeColumnIndex) {
+          const needReset = this.addNewColumns(
+            gridTemplateColumns,
+            activeColumnIndex,
+            containerWidth
+          );
+          if (needReset) return;
         }
       }
-
-      if (activeColumnIndex) {
-        const needReset = this.addNewColumns(
-          gridTemplateColumns,
-          activeColumnIndex,
-          containerWidth
-        );
-        if (needReset) return;
-      }
-
       str = gridTemplateColumns.join(" ");
     } else {
       this.resetColumns(true);
     }
+
     if (str) {
       container.style.gridTemplateColumns = str;
       if (this.headerRef.current) {
@@ -338,12 +500,24 @@ class TableHeader extends React.Component {
         this.headerRef.current.style.width = containerWidth + "px";
       }
 
-      localStorage.setItem(columnStorageName, str);
+      infoPanelVisible
+        ? localStorage.setItem(columnInfoPanelStorageName, str)
+        : localStorage.setItem(columnStorageName, str);
+
+      if (!infoPanelVisible) {
+        localStorage.removeItem(columnInfoPanelStorageName);
+      }
     }
   };
 
   resetColumns = (resetToDefault = false) => {
-    const { containerRef, columnStorageName, columns } = this.props;
+    const {
+      containerRef,
+      columnStorageName,
+      columnInfoPanelStorageName,
+      columns,
+      infoPanelVisible,
+    } = this.props;
     const defaultSize = this.props.columns.find((col) => col.defaultSize)
       ?.defaultSize;
 
@@ -402,7 +576,11 @@ class TableHeader extends React.Component {
       this.headerRef.current.style.width = containerWidth + "px";
     }
 
-    str && localStorage.setItem(columnStorageName, str);
+    str
+      ? !infoPanelVisible
+        ? localStorage.setItem(columnStorageName, str)
+        : localStorage.setItem(columnInfoPanelStorageName, str)
+      : null;
 
     this.onResize();
   };
@@ -451,7 +629,7 @@ class TableHeader extends React.Component {
             })}
 
             <div className="table-container_header-settings">
-              <TableSettings columns={columns} />
+              {!infoPanelVisible && <TableSettings columns={columns} />}
             </div>
           </StyledTableRow>
         </StyledTableHeader>