remove total width

Author: RafaelGB

src/cdm/StyleModel.ts

@@ -1,6 +1,5 @@
 export type ColumnWidthState = {
-    widthRecord: Record<string, number>,
-    totalWidth: number
+    widthRecord: Record<string, number>
 }
 
 export type HeaderContextType = {

src/components/Header.tsx

@@ -92,11 +92,6 @@ export default function Header(headerProps: DatabaseHeaderProps) {
     columnWidthState.widthRecord[columnName] =
       (columnLabel.length + WidthVariables.ICON_SPACING) *
       WidthVariables.MAGIC_SPACING;
-    // Add new width to the total width
-    columnWidthState.totalWidth =
-      columnWidthState.totalWidth +
-      (columnLabel.length + WidthVariables.ICON_SPACING) *
-        WidthVariables.MAGIC_SPACING;
     setColumnWidthState(columnWidthState);
     return { name: columnName, position: columnNumber, label: columnLabel };
   }

src/components/HeaderMenu.tsx

@@ -144,9 +144,6 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
           key: keyState,
         });
         setExpanded(false);
-        // Adjust the width of the columns
-        columnWidthState.totalWidth =
-          columnWidthState.totalWidth - columnWidthState.widthRecord[id];
         delete columnWidthState.widthRecord[id];
         setColumnWidthState(columnWidthState);
       },

src/components/Table.tsx

@@ -234,7 +234,9 @@ export function Table(initialState: TableDataType) {
           <HeaderNavBar
             csvButtonProps={csvButtonProps}
             globalFilterRows={globalFilterRows}
-            headerGroupProps={headerGroups[0].getHeaderGroupProps()}
+            headerGroupProps={headerGroups[0].getHeaderGroupProps({
+              style: { width: totalColumnsWidth },
+            })}
           />
           {/** Headers */}
           {headerGroups.map((headerGroup, i) => (
@@ -282,7 +284,7 @@ export function Table(initialState: TableDataType) {
                     {...headerGroup.getHeaderGroupProps({
                       style: {
                         ...headerGroup.getHeaderGroupProps().style,
-                        maxWidth: `${columnsWidthState.totalWidth}px`,
+                        maxWidth: `${totalColumnsWidth}px`,
                       },
                     })}
                     ref={droppableProvided.innerRef}
@@ -350,7 +352,7 @@ export function Table(initialState: TableDataType) {
                     ...cell.getCellProps({
                       style: {
                         ...cell.getCellProps().style,
-                        maxWidth: `${columnsWidthState.totalWidth}px`,
+                        maxWidth: `${totalColumnsWidth}px`,
                       },
                     }),
                     className: `${c("td")}`,

src/components/styles/ColumnWidthStyle.ts

@@ -25,12 +25,10 @@ const lengthOfNormalizeCellValue = (row: any, accessor: string): number => {
 
 const getColumnsWidthStyle = (rows: Array<Row<object>>, columns: TableColumn[]): ColumnWidthState => {
   const columnWidthStyle: ColumnWidthState = {
-    widthRecord: {},
-    totalWidth: 0
+    widthRecord: {}
   }
   columns.forEach((column: TableColumn) => {
     columnWidthStyle.widthRecord[column.id] = getColumnWidthStyle(rows, column.key, column.label);
-    columnWidthStyle.totalWidth += columnWidthStyle.widthRecord[column.id];
   })
   return columnWidthStyle
 }

src/helpers/StylesHelper.ts

@@ -32,10 +32,5 @@ export function recalculateColumnWidth(columnWidthState: ColumnWidthState, colum
     columnWidthState.widthRecord[columnName] =
         (columnLabel.length + WidthVariables.ICON_SPACING) *
         WidthVariables.MAGIC_SPACING;
-    // Add new width to the total width
-    columnWidthState.totalWidth =
-        columnWidthState.totalWidth +
-        (columnLabel.length + WidthVariables.ICON_SPACING) *
-        WidthVariables.MAGIC_SPACING;
     return columnWidthState;
 }