Client: added a dynamic change in the width of the column index

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

@@ -55,6 +55,7 @@ class FilesTableHeader extends React.Component {
       showStorageInfo,
       isArchiveFolder,
       isIndexing,
+      indexColumnSize,
     } = this.props;
 
     const defaultColumns = [];
@@ -363,7 +364,7 @@ class FilesTableHeader extends React.Component {
         key: "Index",
         title: "#",
         enable: this.props.indexColumnIsEnabled,
-        minWidth: 70,
+        minWidth: indexColumnSize,
         resizable: false,
         isShort: true,
       });
@@ -438,10 +439,12 @@ class FilesTableHeader extends React.Component {
       isArchiveFolder,
       isIndexEditingMode,
       showStorageInfo,
+      indexColumnSize,
     } = this.props;
 
     if (
       isArchiveFolder !== prevProps.isArchiveFolder ||
+      indexColumnSize !== prevProps.indexColumnSize ||
       isIndexEditingMode !== prevProps.isIndexEditingMode ||
       isRooms !== prevProps.isRooms ||
       isTrashFolder !== prevProps.isTrashFolder ||
@@ -625,6 +628,7 @@ export default inject(
       headerBorder,
       roomsFilter,
       setRoomsFilter,
+      indexColumnSize,
     } = filesStore;
     const { isRecentTab, isArchiveFolder, isTrashFolder } = treeFoldersStore;
     const withContent = canShare;
@@ -727,6 +731,8 @@ export default inject(
       showStorageInfo,
       isArchiveFolder,
       isIndexEditingMode,
+
+      indexColumnSize,
     };
   },
 )(

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

@@ -66,6 +66,7 @@ const FilesTableRow = (props) => {
     isRooms,
     isTrashFolder,
     isIndexEditingMode,
+    isIndexing,
     isHighlight,
     hideColumns,
     onDragOver,
@@ -76,6 +77,7 @@ const FilesTableRow = (props) => {
     onEditIndex,
     isIndexUpdated,
   } = props;
+
   const { acceptBackground, background } = theme.dragAndDrop;
 
   const element = (
@@ -187,6 +189,7 @@ const FilesTableRow = (props) => {
         isThirdPartyFolder={item.isThirdPartyFolder}
         onDoubleClick={isIndexEditingMode ? () => {} : onDoubleClick}
         checked={checkedProps || isIndexUpdated}
+        isIndexing={isIndexing}
         isIndexUpdated={isIndexUpdated}
         showHotkeyBorder={showHotkeyBorder}
         title={

packages/client/src/pages/Home/Section/Body/TableView/sub-components/IndexCell.js

@@ -36,7 +36,7 @@ const IndexCell = ({ t, item, sideColor }) => {
       fontSize="12px"
       fontWeight={600}
       title={order}
-      truncate
+      style={{ marginRight: 0 }}
     >
       {order}
     </StyledText>

packages/shared/components/table/TableHeader.tsx

@@ -1208,6 +1208,9 @@ class TableHeader extends React.Component<
     const defaultSize =
       columns.find((col) => col.defaultSize && col.enable)?.defaultSize || 0;
 
+    const shortSize =
+      columns.find((col) => col.isShort && col.enable)?.minWidth || 0;
+
     // TODO: Fixed columns size if something went wrong
     if (storageSize) {
       const splitStorage = storageSize.split(" ");
@@ -1258,11 +1261,16 @@ class TableHeader extends React.Component<
 
     const containerWidth = +container.clientWidth;
 
+    const indexColumnDifference = shortSize
+      ? Number(tableContainer[0].split("px")[0]) - shortSize
+      : 0;
+
     const oldWidth =
       tableContainer
         .map((column) => getSubstring(column))
         .reduce((x, y) => x + y) -
       defaultSize -
+      indexColumnDifference -
       settingsSize;
 
     let str = "";
@@ -1518,6 +1526,9 @@ class TableHeader extends React.Component<
               +index === tableContainer.length - 1 ||
               (column ? column.dataset.enable === "true" : item !== "0px");
             const defaultColumnSize = column && column.dataset.defaultSize;
+            const shortColumSize =
+              column?.dataset?.shortColum && column.dataset.minWidth;
+
             const isSettingColumn = Number(index) === tableContainer.length - 1;
             const isQuickButtonColumn =
               Number(index) === tableContainer.length - 2;
@@ -1542,6 +1553,8 @@ class TableHeader extends React.Component<
               }px`;
             } else if (isSettingColumn && !isIndexEditingMode) {
               gridTemplateColumns.push(`${settingsSize}px`);
+            } else if (shortColumSize) {
+              gridTemplateColumns.push(`${shortColumSize}px`);
             } else if (item !== `${settingsSize}px` || isIndexEditingMode) {
               const percent = (getSubstring(item) / oldWidth) * 100;