automatically adjust table column widths based on their content

This commit is contained in:
MaysWind
2025-12-21 14:10:38 +08:00
parent ece58b60ec
commit c35cbbda15
2 changed files with 20 additions and 17 deletions
+18 -15
View File
@@ -1763,42 +1763,45 @@ init(props);
line-height: 1rem;
}
.transaction-list-datetime-range .transaction-list-datetime-range-text {
color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity)) !important;
}
.v-table.transaction-table > .v-table__wrapper > table {
th:not(:last-child),
td:not(:last-child) {
width: auto !important;
white-space: nowrap;
}
th:last-child,
td:last-child {
width: 100% !important;
}
}
.v-table.transaction-table .transaction-list-row-date > td {
height: 40px !important;
}
.transaction-table .transaction-table-column-time {
width: 110px;
white-space: nowrap;
min-width: 110px;
}
.transaction-table .transaction-table-column-category {
width: 140px;
white-space: nowrap;
min-width: 140px;
}
.transaction-table .transaction-table-column-amount {
width: 120px;
white-space: nowrap;
min-width: 120px;
}
.transaction-table .transaction-table-column-account {
width: 160px;
white-space: nowrap;
min-width: 160px;
}
.transaction-table .transaction-table-column-tags {
width: 90px;
max-width: 300px;
}
.transaction-table-column-description {
max-width: 300px;
min-width: 90px;
}
.transaction-table .transaction-table-column-category .v-btn,
@@ -916,8 +916,8 @@ const importTransactionsTableHeight = computed<number | undefined>(() => {
const importTransactionHeaders = computed<object[]>(() => {
return [
{ value: 'valid', sortable: true, nowrap: true, width: 35 },
{ value: 'time', title: tt('Transaction Time'), sortable: true, nowrap: true, maxWidth: 280 },
{ value: 'type', title: tt('Type'), sortable: true, nowrap: true, maxWidth: 140 },
{ value: 'time', title: tt('Transaction Time'), sortable: true, nowrap: true },
{ value: 'type', title: tt('Type'), sortable: true, nowrap: true },
{ value: 'actualCategoryName', title: tt('Category'), sortable: true, nowrap: true },
{ value: 'sourceAmount', title: tt('Amount'), sortable: true, nowrap: true },
{ value: 'actualSourceAccountName', title: tt('Account'), sortable: true, nowrap: true },