Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix width of date table column #1046

Merged
merged 4 commits into from
Nov 14, 2024
Merged

Fix width of date table column #1046

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6b99ae7
Set min width and width for date table column
wkramer Oct 1, 2024
818ab33
Simplify table header definition
wkramer Nov 7, 2024
6a0b417
Refactor TimeSeriesTable header for improved structure and styling
wkramer Nov 12, 2024
005e39a
Fix linter issue
wkramer Nov 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
105 changes: 58 additions & 47 deletions src/components/table/TimeSeriesTable.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,54 +18,55 @@
>
<template v-slot:headers="{ columns }">
<tr>
<template v-for="(column, index) in columns" :key="column.key">
<template v-for="column in columns" :key="column.key">
<th
:style="{ minWidth: column.minWidth }"
:class="[
(column as unknown as TableHeaders).class,
{
'table-header--editing': isEditingTimeSeries(
column.key as string,
),
},
]"
v-if="column.key === 'date'"
class="table-header table-date sticky-column"
>
<div class="table-header-indicator-text">
<span>{{ column.title }}</span>
<div
v-if="isEditing && nonEquidistantSeries.length > 0"
class="table-header__actions"
>
<v-btn
icon="mdi-table-row-plus-before"
@click="addRowToTimeSeries(selected, 'before')"
color="primary"
variant="text"
density="compact"
:disabled="selected === undefined"
/>
<v-btn
icon="mdi-table-row-plus-after"
@click="addRowToTimeSeries(selected, 'after')"
color="primary"
variant="text"
density="compact"
:disabled="selected === undefined"
/>
<v-tooltip
v-if="selected === undefined"
activator="parent"
text="First select a row"
location="bottom"
/>
</div>
</div>
<div class="table-header-indicator-color"></div>
</th>
<th
v-else
class="table-header"
:class="{
'table-header--editing': isEditingTimeSeries(
column.key as string,
),
}"
>
<div class="table-header-indicator">
<div class="table-header-indicator-text">
<span>{{ column.title }}</span>
<div
v-if="
index === 0 &&
isEditing &&
nonEquidistantSeries.length > 0
"
class="table-header__actions"
>
<div>
<v-btn
icon="mdi-table-row-plus-before"
@click="addRowToTimeSeries(selected, 'before')"
color="primary"
variant="text"
density="compact"
:disabled="selected === undefined"
/>
<v-btn
icon="mdi-table-row-plus-after"
@click="addRowToTimeSeries(selected, 'after')"
color="primary"
variant="text"
density="compact"
:disabled="selected === undefined"
/>
<v-tooltip
v-if="selected === undefined"
activator="parent"
text="First select a row"
location="bottom"
/>
</div>
</div>
<template
v-if="
(column as unknown as TableHeaders).editable &&
Expand Down Expand Up @@ -120,7 +121,7 @@
:class="{ highlighted: selected?.date === item.date }"
@click="(e) => handleRowClick(e, item)"
>
<td class="sticky-column">
<td class="table-date sticky-column">
<v-text-field
v-if="isEditing && item.isNewRow"
:modelValue="toISOString(item.date)"
Expand Down Expand Up @@ -483,17 +484,27 @@ function onUpdateItem(event: TableData) {
width: 100%;
}

th.table-date {
min-width: 24ch;
width: 24ch;
border-right: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
align-items: center;
}

th.sticky-column {
position: sticky;
border-right: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
left: 0;
}

td.table-date {
border-right: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
align-items: center;
}

td.sticky-column {
position: sticky;
left: 0;
background-color: rgb(var(--v-theme-surface));
border-right: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
}

:deep(.v-select .v-select__selection-text) {
Expand Down Expand Up @@ -547,7 +558,7 @@ td.sticky-column {
}

.table-header-indicator-color {
flex: 0 0 10px;
height: 10px;
width: 100%;
margin-bottom: 5px;
}
Expand Down
3 changes: 0 additions & 3 deletions src/lib/table/createTableHeaders.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,6 @@ export function createTableHeaders(
tableHeaders.push({
key: 'date',
title: 'Date',
minWidth: '24ch',
class: 'table-header sticky-column',
editable: false,
})
seriesIds.forEach((seriesId) => {
Expand All @@ -21,7 +19,6 @@ export function createTableHeaders(
key: chartSeries.id,
title: formatHeader(chartSeries),
color: chartSeries.style.stroke?.toString(),
class: 'table-header',
editable: true,
})
}
Expand Down
1 change: 0 additions & 1 deletion src/lib/table/types/TableHeaders.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,5 @@ type ReadonlyDataTableHeader = (typeof VDataTable)['headers']

export interface TableHeaders extends ReadonlyDataTableHeader {
color?: string
class?: string
editable: boolean
}
Loading