fix horizontal scroll

Author: RafaelGB

src/components/HeaderMenu.tsx

@@ -5,7 +5,7 @@ import {
   StyleVariables,
   WidthVariables,
 } from "helpers/Constants";
-import { dbTrim } from "helpers/StylesHelper";
+import { dbTrim, recalculateColumnWidth } from "helpers/StylesHelper";
 import ArrowUpIcon from "components/img/ArrowUp";
 import ArrowDownIcon from "components/img/ArrowDown";
 import ArrowLeftIcon from "components/img/ArrowLeft";
@@ -220,6 +220,7 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
       columnId: id,
       accessor: keyState,
       label: labelState,
+      columnInfo: adjustWidthOfTheColumn(),
     });
     setExpanded(false);
     setkeyState(dbTrim(labelState));
@@ -248,16 +249,9 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
       initialState.columns.length + 1 - initialState.shadowColumns.length;
     const columnName = `newColumn${columnNumber}`;
     const columnLabel = `New Column ${columnNumber}`;
-    // Add width of the new column
-    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);
+    setColumnWidthState(
+      recalculateColumnWidth(columnWidthState, columnName, columnLabel)
+    );
     return { name: columnName, position: columnNumber, label: columnLabel };
   }
 

src/components/Table.tsx

@@ -172,6 +172,7 @@ export function Table(initialState: TableDataType) {
     setGlobalFilter,
     allColumns,
     setColumnOrder,
+    totalColumnsWidth,
   } = useTable(
     // Table properties
     propsUseTable,
@@ -213,7 +214,12 @@ export function Table(initialState: TableDataType) {
   return (
     <>
       <div
-        {...getTableProps()}
+        {...getTableProps({
+          style: {
+            ...getTableProps().style,
+            width: totalColumnsWidth,
+          },
+        })}
         className={`${c("table noselect")}`}
         onMouseOver={onMouseOver}
         onClick={onClick}

src/helpers/StylesHelper.ts

@@ -1,4 +1,5 @@
-import { DatabaseCore } from "helpers/Constants";
+import { ColumnWidthState } from "cdm/StyleModel";
+import { DatabaseCore, WidthVariables } from "helpers/Constants";
 
 /**
  * Wrap the classname of css elements
@@ -25,4 +26,16 @@ export function shortId() {
  */
 export function dbTrim(str: string) {
     return str.trim().replaceAll("\n", "").replaceAll("\t", "").replaceAll(" ", "_");
+}
+
+export function recalculateColumnWidth(columnWidthState: ColumnWidthState, columnName: string, columnLabel: string): ColumnWidthState {
+    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;
 }

src/helpers/VaultManagement.ts

@@ -122,6 +122,9 @@ export async function updateRowFile(file: TFile, columnId: string, newValue: str
       await inlineColumnKey();
       return;
     }
+    if (!rowFields.frontmatter.hasOwnProperty(columnId)) {
+      return;
+    }
     // Check if the column is already in the frontmatter
     // assign an empty value to the new key
     rowFields.frontmatter[newValue] = rowFields.frontmatter[columnId] ?? "";

styles.css

@@ -7,6 +7,7 @@
 .database-plugin:before,
 .database-plugin:after {
   box-sizing: inherit;
+  overflow-x: auto;
 }
 
 .database-plugin {
@@ -196,11 +197,13 @@
   justify-content: center;
   padding: 0;
   display: flex;
+  padding: 0.5rem;
   flex-direction: column;
 }
 
 .database-plugin__td-content {
   display: block;
+  align-items: center;
 }
 
 .database-plugin__table {