Skip to content
This repository was archived by the owner on Jul 28, 2025. It is now read-only.

Commit 732582b

Browse files
committed
fix horizontal scroll
1 parent 0f22eeb commit 732582b

File tree

5 files changed

+32
-13
lines changed

5 files changed

+32
-13
lines changed

src/components/HeaderMenu.tsx

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {
55
StyleVariables,
66
WidthVariables,
77
} from "helpers/Constants";
8-
import { dbTrim } from "helpers/StylesHelper";
8+
import { dbTrim, recalculateColumnWidth } from "helpers/StylesHelper";
99
import ArrowUpIcon from "components/img/ArrowUp";
1010
import ArrowDownIcon from "components/img/ArrowDown";
1111
import ArrowLeftIcon from "components/img/ArrowLeft";
@@ -220,6 +220,7 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
220220
columnId: id,
221221
accessor: keyState,
222222
label: labelState,
223+
columnInfo: adjustWidthOfTheColumn(),
223224
});
224225
setExpanded(false);
225226
setkeyState(dbTrim(labelState));
@@ -248,16 +249,9 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
248249
initialState.columns.length + 1 - initialState.shadowColumns.length;
249250
const columnName = `newColumn${columnNumber}`;
250251
const columnLabel = `New Column ${columnNumber}`;
251-
// Add width of the new column
252-
columnWidthState.widthRecord[columnName] =
253-
(columnLabel.length + WidthVariables.ICON_SPACING) *
254-
WidthVariables.MAGIC_SPACING;
255-
// Add new width to the total width
256-
columnWidthState.totalWidth =
257-
columnWidthState.totalWidth +
258-
(columnLabel.length + WidthVariables.ICON_SPACING) *
259-
WidthVariables.MAGIC_SPACING;
260-
setColumnWidthState(columnWidthState);
252+
setColumnWidthState(
253+
recalculateColumnWidth(columnWidthState, columnName, columnLabel)
254+
);
261255
return { name: columnName, position: columnNumber, label: columnLabel };
262256
}
263257

src/components/Table.tsx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -172,6 +172,7 @@ export function Table(initialState: TableDataType) {
172172
setGlobalFilter,
173173
allColumns,
174174
setColumnOrder,
175+
totalColumnsWidth,
175176
} = useTable(
176177
// Table properties
177178
propsUseTable,
@@ -213,7 +214,12 @@ export function Table(initialState: TableDataType) {
213214
return (
214215
<>
215216
<div
216-
{...getTableProps()}
217+
{...getTableProps({
218+
style: {
219+
...getTableProps().style,
220+
width: totalColumnsWidth,
221+
},
222+
})}
217223
className={`${c("table noselect")}`}
218224
onMouseOver={onMouseOver}
219225
onClick={onClick}

src/helpers/StylesHelper.ts

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { DatabaseCore } from "helpers/Constants";
1+
import { ColumnWidthState } from "cdm/StyleModel";
2+
import { DatabaseCore, WidthVariables } from "helpers/Constants";
23

34
/**
45
* Wrap the classname of css elements
@@ -25,4 +26,16 @@ export function shortId() {
2526
*/
2627
export function dbTrim(str: string) {
2728
return str.trim().replaceAll("\n", "").replaceAll("\t", "").replaceAll(" ", "_");
29+
}
30+
31+
export function recalculateColumnWidth(columnWidthState: ColumnWidthState, columnName: string, columnLabel: string): ColumnWidthState {
32+
columnWidthState.widthRecord[columnName] =
33+
(columnLabel.length + WidthVariables.ICON_SPACING) *
34+
WidthVariables.MAGIC_SPACING;
35+
// Add new width to the total width
36+
columnWidthState.totalWidth =
37+
columnWidthState.totalWidth +
38+
(columnLabel.length + WidthVariables.ICON_SPACING) *
39+
WidthVariables.MAGIC_SPACING;
40+
return columnWidthState;
2841
}

src/helpers/VaultManagement.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,9 @@ export async function updateRowFile(file: TFile, columnId: string, newValue: str
122122
await inlineColumnKey();
123123
return;
124124
}
125+
if (!rowFields.frontmatter.hasOwnProperty(columnId)) {
126+
return;
127+
}
125128
// Check if the column is already in the frontmatter
126129
// assign an empty value to the new key
127130
rowFields.frontmatter[newValue] = rowFields.frontmatter[columnId] ?? "";

styles.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
.database-plugin:before,
88
.database-plugin:after {
99
box-sizing: inherit;
10+
overflow-x: auto;
1011
}
1112

1213
.database-plugin {
@@ -196,11 +197,13 @@
196197
justify-content: center;
197198
padding: 0;
198199
display: flex;
200+
padding: 0.5rem;
199201
flex-direction: column;
200202
}
201203

202204
.database-plugin__td-content {
203205
display: block;
206+
align-items: center;
204207
}
205208

206209
.database-plugin__table {

0 commit comments

Comments
 (0)