테이블 리스트 간격설정
This commit is contained in:
parent
10c7c9a0b1
commit
f4fd1184cd
|
|
@ -1169,7 +1169,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<div className="mt-10" style={{ flex: 1, overflow: "hidden" }}>
|
<div style={{ marginTop: `${tableConfig.filter?.bottomSpacing ?? 40}px`, flex: 1, overflow: "hidden" }}>
|
||||||
<SingleTableWithSticky
|
<SingleTableWithSticky
|
||||||
data={data}
|
data={data}
|
||||||
columns={visibleColumns}
|
columns={visibleColumns}
|
||||||
|
|
@ -1263,7 +1263,10 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* 테이블 컨테이너 */}
|
{/* 테이블 컨테이너 */}
|
||||||
<div className="flex-1 flex flex-col overflow-hidden w-full max-w-full mt-10">
|
<div
|
||||||
|
className="flex-1 flex flex-col overflow-hidden w-full max-w-full"
|
||||||
|
style={{ marginTop: `${tableConfig.filter?.bottomSpacing ?? 40}px` }}
|
||||||
|
>
|
||||||
{/* 스크롤 영역 */}
|
{/* 스크롤 영역 */}
|
||||||
<div
|
<div
|
||||||
className="w-full max-w-full h-[400px] overflow-y-scroll overflow-x-auto bg-background sm:h-[500px]"
|
className="w-full max-w-full h-[400px] overflow-y-scroll overflow-x-auto bg-background sm:h-[500px]"
|
||||||
|
|
|
||||||
|
|
@ -1105,6 +1105,41 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{/* 필터 간격 설정 */}
|
||||||
|
{config.filter?.enabled && (
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div>
|
||||||
|
<h3 className="text-sm font-semibold">필터 간격</h3>
|
||||||
|
</div>
|
||||||
|
<hr className="border-border" />
|
||||||
|
<div className="space-y-1">
|
||||||
|
<Label htmlFor="filterBottomSpacing" className="text-xs">
|
||||||
|
필터와 리스트 사이 간격 (px)
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
id="filterBottomSpacing"
|
||||||
|
type="number"
|
||||||
|
value={config.filter?.bottomSpacing ?? 40}
|
||||||
|
onChange={(e) => {
|
||||||
|
const value = Math.max(0, Math.min(200, parseInt(e.target.value) || 40));
|
||||||
|
handleChange("filter", {
|
||||||
|
...config.filter,
|
||||||
|
bottomSpacing: value,
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
min={0}
|
||||||
|
max={200}
|
||||||
|
step={10}
|
||||||
|
placeholder="40"
|
||||||
|
className="h-8 text-xs"
|
||||||
|
/>
|
||||||
|
<p className="text-[10px] text-muted-foreground">
|
||||||
|
기본값: 40px (0-200px 범위, 10px 단위 권장)
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -72,6 +72,7 @@ export const TableListDefinition = createComponentDefinition({
|
||||||
filter: {
|
filter: {
|
||||||
enabled: true,
|
enabled: true,
|
||||||
filters: [], // 사용자가 설정할 필터 목록
|
filters: [], // 사용자가 설정할 필터 목록
|
||||||
|
bottomSpacing: 40, // 필터와 리스트 사이 간격 (px)
|
||||||
},
|
},
|
||||||
|
|
||||||
// 액션 설정
|
// 액션 설정
|
||||||
|
|
|
||||||
|
|
@ -116,6 +116,8 @@ export interface FilterConfig {
|
||||||
referenceColumn?: string;
|
referenceColumn?: string;
|
||||||
displayColumn?: string;
|
displayColumn?: string;
|
||||||
}>;
|
}>;
|
||||||
|
// 필터와 리스트 사이 간격 (px 단위, 기본: 40)
|
||||||
|
bottomSpacing?: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue