테이블 리스트 간격설정

This commit is contained in:
kjs 2025-11-04 17:48:22 +09:00
parent 10c7c9a0b1
commit f4fd1184cd
4 changed files with 43 additions and 2 deletions

View File

@ -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]"

View File

@ -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>
); );

View File

@ -72,6 +72,7 @@ export const TableListDefinition = createComponentDefinition({
filter: { filter: {
enabled: true, enabled: true,
filters: [], // 사용자가 설정할 필터 목록 filters: [], // 사용자가 설정할 필터 목록
bottomSpacing: 40, // 필터와 리스트 사이 간격 (px)
}, },
// 액션 설정 // 액션 설정

View File

@ -116,6 +116,8 @@ export interface FilterConfig {
referenceColumn?: string; referenceColumn?: string;
displayColumn?: string; displayColumn?: string;
}>; }>;
// 필터와 리스트 사이 간격 (px 단위, 기본: 40)
bottomSpacing?: number;
} }
/** /**