chpark/vexplor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance column width configuration and rendering

Browse Source 
- Updated the column width handling in various components to support percentage-based widths, improving layout flexibility.
- Adjusted input fields to enforce minimum and maximum width constraints, ensuring better user experience and preventing layout issues.
- Enhanced the SortableColumnRow and related components to dynamically display width units, allowing for clearer configuration options.

Made-with: Cursor
This commit is contained in:
kmh
2026-03-13 11:29:32 +09:00
parent f28cb5c2f6
commit 4fe023a813
9 changed files with 111 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
frontend/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutConfigPanel.tsx
View File

@@ -174,10 +174,13 @@ function SortableColumnRow({
/>
<Input
value={col.width || ""}
onChange={(e) => onWidthChange(parseInt(e.target.value) || 100)}
placeholder="너비"
onChange={(e) => onWidthChange(parseInt(e.target.value) || 20)}
placeholder="20"
className="h-6 w-14 shrink-0 text-xs"
min={5}
max={100}
/>
<span className="text-muted-foreground shrink-0 text-[10px]">%</span>
{isNumeric && (
<>
<label className="flex shrink-0 cursor-pointer items-center gap-1 text-[10px]" title="천 단위 구분자 (,)">
@@ -888,7 +891,7 @@ const AdditionalTabConfigPanel: React.FC<AdditionalTabConfigPanelProps> = ({
updateTab({
columns: [
...selectedColumns,
{ name: column.columnName, label: column.columnLabel || column.columnName, width: 100 },
{ name: column.columnName, label: column.columnLabel || column.columnName, width: 20 },
],
});
}}
@@ -1058,7 +1061,7 @@ const AdditionalTabConfigPanel: React.FC<AdditionalTabConfigPanelProps> = ({
{
name: matchingJoinColumn.joinAlias,
label: matchingJoinColumn.suggestedLabel || matchingJoinColumn.columnLabel,
width: 100,
width: 20,
isEntityJoin: true,
joinInfo: {
sourceTable: tab.tableName!,
@@ -2396,7 +2399,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
{
name: column.columnName,
label: column.columnLabel || column.columnName,
width: 100,
width: 20,
},
],
});
@@ -2466,7 +2469,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
label:
matchingJoinColumn.suggestedLabel ||
matchingJoinColumn.columnLabel,
width: 100,
width: 20,
isEntityJoin: true,
joinInfo: {
sourceTable: leftTable!,
@@ -3074,7 +3077,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
{
name: column.columnName,
label: column.columnLabel || column.columnName,
width: 100,
width: 20,
},
],
});
@@ -3141,7 +3144,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
name: matchingJoinColumn.joinAlias,
label:
matchingJoinColumn.suggestedLabel || matchingJoinColumn.columnLabel,
width: 100,
width: 20,
isEntityJoin: true,
joinInfo: {
sourceTable: rightTable!,