테이블 리스트 간격설정
This commit is contained in:
parent
10c7c9a0b1
commit
f4fd1184cd
|
|
@ -1169,7 +1169,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
|||
</div>
|
||||
)}
|
||||
|
||||
<div className="mt-10" style={{ flex: 1, overflow: "hidden" }}>
|
||||
<div style={{ marginTop: `${tableConfig.filter?.bottomSpacing ?? 40}px`, flex: 1, overflow: "hidden" }}>
|
||||
<SingleTableWithSticky
|
||||
data={data}
|
||||
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
|
||||
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>
|
||||
)}
|
||||
|
||||
{/* 필터 간격 설정 */}
|
||||
{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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -72,6 +72,7 @@ export const TableListDefinition = createComponentDefinition({
|
|||
filter: {
|
||||
enabled: true,
|
||||
filters: [], // 사용자가 설정할 필터 목록
|
||||
bottomSpacing: 40, // 필터와 리스트 사이 간격 (px)
|
||||
},
|
||||
|
||||
// 액션 설정
|
||||
|
|
|
|||
|
|
@ -116,6 +116,8 @@ export interface FilterConfig {
|
|||
referenceColumn?: string;
|
||||
displayColumn?: string;
|
||||
}>;
|
||||
// 필터와 리스트 사이 간격 (px 단위, 기본: 40)
|
||||
bottomSpacing?: number;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
Loading…
Reference in New Issue