visual bug changing label fixed

Author: RafaelGB

src/cdm/FolderModel.ts

@@ -6,6 +6,7 @@ import { RowSelectOption } from "cdm/RowSelectModel";
 import NoteInfo from "services/NoteInfo";
 import { TFile } from "obsidian";
 import { DatabaseColumn } from "cdm/DatabaseModel";
+import { Column } from "react-table";
 
 export type Group = Parameter | Parameters | FolderModel | Models;
 type Parameter = {
@@ -81,7 +82,8 @@ export interface DatabaseHeaderProps {
     getHooks: any,
     state: any,
     dispatch: any,
-    allColumns: any,
+    allColumns: Column[],
+    setColumnOrder: (cols: string[]) => void,
     rows: any,
     initialRows: any,
     flatRows: any,

src/components/HeaderMenu.tsx

@@ -15,7 +15,7 @@ import MultiIcon from "components/img/Multi";
 import HashIcon from "components/img/Hash";
 import AdjustmentsIcon from "components/img/AdjustmentsIcon";
 import React, { useContext, useEffect, useState } from "react";
-import { ActionType } from "react-table";
+import { ActionType, Column } from "react-table";
 import { usePopper } from "react-popper";
 import { HeaderContext } from "components/contexts/HeaderContext";
 import { FormControlLabel, FormGroup, Switch } from "@material-ui/core";
@@ -49,7 +49,7 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
     isInline,
     setIsInline,
   } = headerMenuProps;
-  const { column, columns, rows, initialState } = headerMenuProps.headerProps;
+  const { column, rows, initialState } = headerMenuProps.headerProps;
   const dispatch = (headerMenuProps.headerProps as any).dataDispatch;
   /** Column values */
   const [keyState, setkeyState] = useState(dbTrim(column.key));
@@ -211,6 +211,9 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
   function persistLabelChange() {
     // trim label will get a valid yaml key
     const newKey = dbTrim(labelState);
+    const futureOrder = headerMenuProps.headerProps.allColumns.map(
+      (o: Column) => (o.id === column.id ? newKey : o.id)
+    );
     dispatch({
       type: ActionTypes.UPDATE_COLUMN_LABEL,
       columnId: column.id,
@@ -225,10 +228,15 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
       newKey,
       labelState
     );
+
+    /*
+      To adjust column settings to the new key, we need to update the order 
+      of the columns with it and calculate the new width
+     */
     delete columnWidthState.widthRecord[column.id];
     setColumnWidthState(columnWidthState);
+    headerMenuProps.headerProps.setColumnOrder(futureOrder);
   }
-
   function handleKeyDown(e: any) {
     if (e.key === "Enter") {
       persistLabelChange();

src/components/Table.tsx

@@ -7,6 +7,7 @@ import {
   useGlobalFilter,
   useColumnOrder,
   useFilters,
+  Column,
 } from "react-table";
 import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
 import { TableDataType, RowDataType, TableColumn } from "cdm/FolderModel";
@@ -243,7 +244,7 @@ export function Table(initialState: TableDataType) {
             <DragDropContext
               key={`DragDropContext-${i}`}
               onDragStart={() => {
-                currentColOrder.current = allColumns.map((o: any) => o.id);
+                currentColOrder.current = allColumns.map((o: Column) => o.id);
               }}
               onDragUpdate={(dragUpdateObj, b) => {
                 if (!isDragUpdate) {

src/components/reducers/DatabaseDispatch.tsx

@@ -15,7 +15,6 @@ import { moveFile, updateRowFile } from "helpers/VaultManagement";
 import { randomColor } from "helpers/Colors";
 import { DatabaseColumn, RowDatabaseFields } from "cdm/DatabaseModel";
 import NoteInfo from "services/NoteInfo";
-import { dbTrim } from "helpers/StylesHelper";
 
 export function databaseReducer(state: TableDataType, action: ActionType) {
   LOGGER.debug(