네비게이션 상단바 이동, 가로 스크롤 고정.

This commit is contained in:
Lectom C Han
2026-01-09 19:29:06 +09:00
parent 7b93467c6e
commit dde7290ab7
9 changed files with 303 additions and 283 deletions

View File

@@ -7,7 +7,7 @@
@inject IJSRuntime JSRuntime
@rendermode InteractiveServer
<div class="container-fluid">
<div class="container-fluid editor-page">
<div class="d-flex justify-content-between align-items-center mb-3">
<h3 class="mb-0">Standard Schema Editor</h3>
@if (ExcelService.LoadedData.Any())
@@ -147,12 +147,12 @@
<div class="card-header py-1 bg-white fw-bold small text-muted">
RAW PREVIEW
</div>
<div class="card-body p-0" style="overflow: auto; max-height: 600px;">
<div class="card-body p-0 preview-scroll table-scroll">
<table class="table table-bordered table-sm table-hover mb-0 small" style="font-size: 0.8rem;">
<thead class="table-light sticky-top">
<tr>
<th class="text-center">#</th>
@for (int c = 0; c < (rawData.FirstOrDefault()?.Length ?? 0); c++)
<th class="text-center sticky-col-header sticky-col sticky-header">#</th>
@for (int c = 0; c < MaxCols; c++)
{
bool isSearchMatch = SearchMatch(c, -1);
bool isLeftAxis = c >= config.LeftHeaderStartCol && c < config.LeftHeaderStartCol + config.LeftHeaderWidth;
@@ -173,16 +173,17 @@
bool isLimit = (config.DataEndRow.HasValue && r == config.DataEndRow.Value) || (!config.DataEndRow.HasValue && r == rawData.Count - 1);
<tr class="@(isHeaderRow ? "" : "") @(isLimit ? "border-bottom border-3 border-danger" : "")">
<td style="cursor: pointer;" @onclick="() => SetTopRow(r)" class="text-center fw-bold text-muted bg-light position-relative" title="Click to extend Depth">
<td style="cursor: pointer;" @onclick="() => SetTopRow(r)" class="text-center fw-bold text-muted bg-light position-relative sticky-col row-index-cell" title="Click to extend Depth">
@r
@if(isLimit) { <span class="badge bg-danger text-white" style="font-size:0.6em">END</span> }
</td>
@{
int dataStartCol = config.LeftHeaderStartCol + config.LeftHeaderWidth;
bool isDataRowRange = r >= (config.TopHeaderStartRow + config.TopHeaderDepth) && (!config.DataEndRow.HasValue || r <= config.DataEndRow.Value);
}
@for (int c = 0; c < rawData[r].Length; c++)
@for (int c = 0; c < MaxCols; c++)
{
var val = rawData[r][c];
var val = c < rawData[r].Length ? rawData[r][c] : "";
bool isHighlighted = (r == highlightedRow && c == highlightedCol);
bool isLimitCol = (config.DataEndCol.HasValue && c == config.DataEndCol.Value);
bool isLeftAxisCol = c >= config.LeftHeaderStartCol && c < config.LeftHeaderStartCol + config.LeftHeaderWidth;
@@ -209,12 +210,12 @@
@{
// Determine if this is the "End" cell
// Rule: It is the End Row.
// And it is either the explicit End Col OR the last column in the row if End Col is null.
// And it is either the explicit End Col OR the global max column if End Col is null.
bool isVisualEndCol = false;
if (isLimit)
{
if (config.DataEndCol.HasValue) isVisualEndCol = (c == config.DataEndCol.Value);
else isVisualEndCol = (c == rawData[r].Length - 1);
else isVisualEndCol = (c == MaxCols - 1);
}
}
@@ -251,12 +252,12 @@
</div>
</div>
<div class="card-body p-0">
<div style="height: 560px; overflow-y: auto;">
<div class="result-scroll table-scroll">
<table class="table table-striped table-hover mb-0 small">
<thead class="sticky-top bg-light">
<tr>
<th>Key</th>
<th>Value</th>
<th class="sticky-header sticky-col">Key</th>
<th class="sticky-header">Value</th>
</tr>
</thead>
<tbody>
@@ -266,7 +267,7 @@
class="@(highlightedRow == item.Row && highlightedCol == item.Col ? "table-info border border-2 border-info" : "")"
style="cursor: pointer;"
@onclick="() => HighlightCell(item.Row, item.Col)">
<td title="@item.Key">@item.Key</td>
<td class="sticky-col" title="@item.Key">@item.Key</td>
<td>@item.Value</td>
</tr>
}
@@ -340,6 +341,8 @@
private int highlightedRow = -1;
private int highlightedCol = -1;
private int MaxCols => rawData.Count == 0 ? 0 : rawData.Max(r => r.Length);
// Search State
private string searchText = "";