Client: fixed table bug with indexing mode

packages/client/src/pages/Home/Section/Body/TableView/TableHeader.js

@@ -363,9 +363,9 @@ class FilesTableHeader extends React.Component {
         key: "Index",
         title: "#",
         enable: this.props.indexColumnIsEnabled,
-        minWidth: 75,
+        minWidth: 60,
         resizable: false,
-        shortColumn: true,
+        isShort: true,
         onChange: this.onColumnChange,
       });
     }
@@ -583,6 +583,7 @@ class FilesTableHeader extends React.Component {
         columnInfoPanelStorageName={columnInfoPanelStorageName}
         sectionWidth={sectionWidth}
         resetColumnsSize={resetColumnsSize}
+        isIndexing={isIndexing}
         sortingVisible={isIndexing ? false : sortingVisible}
         isIndexEditingMode={isIndexEditingMode}
         infoPanelVisible={infoPanelVisible}

packages/shared/components/table/Table.types.ts

@@ -50,7 +50,7 @@ export type TTableColumn = {
   defaultSize?: number;
   default?: boolean;
   resizable?: boolean;
-  shortColumn?: boolean;
+  isShort?: boolean;
   checkbox?: {
     value: boolean;
     isIndeterminate: boolean;

packages/shared/components/table/TableHeader.tsx

@@ -1329,13 +1329,31 @@ class TableHeader extends React.Component<
       }
 
       if (hideColumnsConst) {
+        const shortColumnSize =
+          columns.find((col) => col.isShort && col.enable)?.minWidth || 0;
+
         tableInfoPanelContainer.forEach((item, index) => {
           const column = document.getElementById(`column_${index}`);
 
+          const isSettingColumn =
+            Number(index) === tableInfoPanelContainer.length - 1;
+          const isQuickButtonColumn =
+            Number(index) === tableInfoPanelContainer.length - 2;
+
+          if (isIndexEditingMode && isSettingColumn) {
+            gridTemplateColumns.push("75px");
+          }
+
+          if (isIndexEditingMode && isQuickButtonColumn) {
+            gridTemplateColumns.push("24px");
+          }
+
           if (column?.dataset?.minWidth && column?.dataset?.default) {
             gridTemplateColumns.push(
-              `${containerWidth - defaultSize - settingsSize}px`,
+              `${containerWidth - defaultSize - shortColumnSize - settingsSize}px`,
             );
+          } else if (column?.dataset?.minWidth && column?.dataset?.shortColum) {
+            gridTemplateColumns.push(`${column?.dataset?.minWidth}px`);
           } else if (
             item === `${defaultSize}px` ||
             item === `${settingsSize}px`
@@ -1501,6 +1519,8 @@ class TableHeader extends React.Component<
               (column ? column.dataset.enable === "true" : item !== "0px");
             const defaultColumnSize = column && column.dataset.defaultSize;
             const isSettingColumn = Number(index) === tableContainer.length - 1;
+            const isQuickButtonColumn =
+              Number(index) === tableContainer.length - 2;
 
             const isActiveNow = item === "0px" && enable;
             if (isActiveNow && column) activeColumnIndex = index;
@@ -1525,6 +1545,8 @@ class TableHeader extends React.Component<
             } else if (item !== `${settingsSize}px` || isIndexEditingMode) {
               const percent = (getSubstring(item) / oldWidth) * 100;
 
+              let newSettingsSize = isIndexEditingMode ? 0 : settingsSize;
+
               if (percent === 100) {
                 const enableColumnsLength = columns.filter(
                   (column) => !column.defaultSize && column.enable,
@@ -1543,7 +1565,7 @@ class TableHeader extends React.Component<
                 : percent === 0
                   ? `${defaultMinColumnSize}px`
                   : `${
-                      ((containerWidth - defaultSize - settingsSize) *
+                      ((containerWidth - defaultSize - newSettingsSize) *
                         percent) /
                       100
                     }px`;
@@ -1567,6 +1589,14 @@ class TableHeader extends React.Component<
                 newItemWidth = `${defaultMinColumnSize}px`;
               }
 
+              if (isIndexEditingMode && isSettingColumn) {
+                newItemWidth = "75px";
+              }
+
+              if (isIndexEditingMode && isQuickButtonColumn) {
+                newItemWidth = `24px`;
+              }
+
               gridTemplateColumns.push(newItemWidth);
             } else {
               gridTemplateColumns.push(item);
@@ -1729,7 +1759,7 @@ class TableHeader extends React.Component<
     for (const col of columns) {
       if (col.default) {
         str += `${wideColumnSize} `;
-      } else if (col.shortColumn) {
+      } else if (col.isShort) {
         str += `${col.minWidth}px `;
       } else
         str += col.enable

packages/shared/components/table/sub-components/TableHeaderCell.tsx

@@ -55,6 +55,7 @@ const TableHeaderCell = ({
     withTagRef,
     default: isDefault,
     checkbox,
+    isShort,
   } = column;
 
   const isActive = (sortBy && column.sortBy === sortBy) || active;
@@ -82,6 +83,7 @@ const TableHeaderCell = ({
       data-default={isDefault}
       data-enable={enable}
       data-min-width={minWidth}
+      data-short-colum={isShort}
       data-default-size={defaultSize}
       sortingVisible={sortingVisible}
       ref={tagRef}
@@ -120,6 +122,7 @@ const TableHeaderCell = ({
       id={`column_${index}`}
       data-enable={enable}
       data-default={isDefault}
+      data-short-colum={isShort}
       data-min-width={minWidth}
       data-default-size={defaultSize}
       sortingVisible={sortingVisible}