86 lines
2.3 KiB
TypeScript
86 lines
2.3 KiB
TypeScript
/**
|
|
* 📄 HeadMakeFloodPre Component
|
|
* 침수예방 테이블 헤더 생성 컴포넌트
|
|
*
|
|
* - 테이블 상단 헤더 생성 및 렌더링
|
|
* - 하위 헤더 목록 기반 동적 헤더 구성
|
|
* - rowspan 및 colspan을 통한 테이블 구조 조정
|
|
* - 가시성 필터링 및 조건부 렌더링 지원
|
|
* - 상위 헤더와 하위 헤더의 계층적 표시
|
|
*/
|
|
import { TableHead, TableRow } from "@common/components/ui";
|
|
|
|
export type TableUpperProps = {
|
|
id: string;
|
|
title: string;
|
|
upName?: string;
|
|
upSequnce?: number;
|
|
edit?: boolean;
|
|
visible?: boolean;
|
|
rowSpan?: number;
|
|
colSpan?: number;
|
|
type?: string;
|
|
selectData?: string; // type 이 seelct 일경우 selectarray 정하기 위해
|
|
row?: number;
|
|
mergeCell?: boolean; // 셀을 합칠경우
|
|
maxLength?: number;
|
|
readonly?: boolean;
|
|
};
|
|
type chHeadType = {
|
|
headNm: string;
|
|
text: string;
|
|
length: number;
|
|
rows?: number;
|
|
};
|
|
|
|
export const HeadMakeFloodPre = (
|
|
upHeadList: TableUpperProps[],
|
|
makeHeadNm: chHeadType[],
|
|
) => {
|
|
return (
|
|
<>
|
|
<TableRow>
|
|
{upHeadList
|
|
.filter((data) => data.visible != false)
|
|
.map((head: TableUpperProps) =>
|
|
!head.upSequnce ? (
|
|
<TableHead
|
|
className="border border-border px-2 py-1"
|
|
rowSpan={2}
|
|
key={head.id}
|
|
>
|
|
{head.title}
|
|
</TableHead>
|
|
) : head.upSequnce === 1 ? (
|
|
<TableHead
|
|
className="border border-border px-2 py-1"
|
|
key={head.id}
|
|
rowSpan={1}
|
|
colSpan={
|
|
makeHeadNm?.find((ch) => ch.headNm === head.upName)?.length
|
|
}
|
|
>
|
|
{makeHeadNm?.find((ch) => ch.headNm === head.upName)?.text}
|
|
</TableHead>
|
|
) : null,
|
|
)}
|
|
</TableRow>
|
|
|
|
<TableRow>
|
|
{upHeadList
|
|
.filter((data) => data.visible != false)
|
|
.map((head: TableUpperProps) =>
|
|
makeHeadNm?.find((ch) => ch.headNm === head.upName) ? (
|
|
<TableHead
|
|
className="border border-border px-2 py-1"
|
|
key={head.id}
|
|
>
|
|
{head.title}
|
|
</TableHead>
|
|
) : null,
|
|
)}
|
|
</TableRow>
|
|
</>
|
|
);
|
|
};
|