header span 중복으로 생성되는 문제 해결

This commit is contained in:
YangJinSoo94
2025-04-24 15:05:55 +09:00
parent a4310ff090
commit 30d5d5c9e7
2 changed files with 46 additions and 34 deletions
@@ -12,41 +12,53 @@ interface TableUpperProps {
const HeadMakeColSpan = ({ upHeadList }: { upHeadList: TableUpperProps[] }) => { const HeadMakeColSpan = ({ upHeadList }: { upHeadList: TableUpperProps[] }) => {
const maxRow = upHeadList.reduce((max, head) => Math.max(max, head.row || 0), 0); const maxRow = upHeadList.reduce((max, head) => Math.max(max, head.row || 0), 0);
return (
<> if(maxRow == 0){
{Array.from({ length: maxRow + 1 }, (_, rowIndex) => ( return (
<TableRow key={rowIndex+ " headerRow"} className="bg-gray-50"> <>
<TableRow className="bg-gray-50">
{upHeadList.map((head: TableUpperProps) => { {upHeadList.map((head: TableUpperProps) => {
if (head.row === rowIndex) { return (
return ( <TableHead
<TableHead key={head.id}
key={head.id} colSpan={head.colSpan || 1}
colSpan={head.colSpan || 1} rowSpan={head.rowSpan || 1}
rowSpan={head.rowSpan || 1} style={{ whiteSpace: 'pre-line' }}
style={{ whiteSpace: 'pre-line' }} className="bg-gray-50"
className="bg-gray-50" >
> {head.title}
{head.title} </TableHead>
</TableHead> );
); })}
}else{
return (
<TableHead
key={head.id}
colSpan={head.colSpan || 1}
rowSpan={head.rowSpan || 1}
style={{ whiteSpace: 'pre-line' }}
className="bg-gray-50"
>
{head.title}
</TableHead>
);
}
})}
</TableRow> </TableRow>
))} </>
</> );
); }else{
return (
<>
{Array.from({ length: maxRow + 1 }, (_, rowIndex) => (
<TableRow key={rowIndex+ " headerRow"} className="bg-gray-50">
{upHeadList.map((head: TableUpperProps) => {
if (head.row === rowIndex) {
return (
<TableHead
key={head.id}
colSpan={head.colSpan || 1}
rowSpan={head.rowSpan || 1}
style={{ whiteSpace: 'pre-line' }}
className="bg-gray-50"
>
{head.title}
</TableHead>
);
}
})}
</TableRow>
))}
</>
);
}
} }
export { HeadMakeColSpan }; export { HeadMakeColSpan };
@@ -13,7 +13,7 @@ type UiTableProps = {
onPageChange: (page: number) => void; onPageChange: (page: number) => void;
className?: string; className?: string;
resetPageNo?: boolean; resetPageNo?: boolean;
children: React.ReactNode | undefined; children?: React.ReactNode | undefined;
} }
type UiHeadProps = { type UiHeadProps = {