129 lines
5.1 KiB
TypeScript
129 lines
5.1 KiB
TypeScript
import UiPageNations from "@common/business_components/ui/table/uiPageNations";
|
|
import { Table, TableBody, TableCell, TableRow } from "@common/components";
|
|
import { useEffect, useState } from "react";
|
|
|
|
type UiTableProps = {
|
|
headName: React.ReactNode | undefined;
|
|
tableData: { [key: string]: string | number | boolean | object }[];
|
|
headlist: UiHeadProps[];
|
|
pageSize: number;
|
|
total: number;
|
|
children: Record<string, React.ReactNode> | undefined;
|
|
cellClick: ((index: number | undefined, headId: string) => void) | undefined;
|
|
onPageChange: (page: number) => void;
|
|
className?: string;
|
|
resetPageNo?: boolean;
|
|
isEditable?: boolean;
|
|
};
|
|
|
|
type UiHeadProps = {
|
|
id: string;
|
|
title: string;
|
|
align?: string;
|
|
type?: string;
|
|
options?: string[];
|
|
};
|
|
|
|
export function VerticalTable({
|
|
tableData,
|
|
headlist,
|
|
pageSize,
|
|
total,
|
|
children,
|
|
headName,
|
|
cellClick,
|
|
onPageChange,
|
|
className = "",
|
|
resetPageNo = false,
|
|
isEditable = false,
|
|
}: UiTableProps) {
|
|
const [cur, setCur] = useState<number>(1);
|
|
const [formData, setFormData] = useState<{ [key: string]: string | number | boolean }>({});
|
|
useEffect(() => {
|
|
if (resetPageNo) {
|
|
setCur(1);
|
|
onPageChange(1);
|
|
}
|
|
}, [onPageChange, resetPageNo]);
|
|
|
|
useEffect(() => {
|
|
if (tableData.length > 0 && tableData[0]) {
|
|
setFormData(tableData[0] as { [key: string]: string | number | boolean });
|
|
}
|
|
}, [tableData]);
|
|
|
|
const handleInputChange = (id: string, value: string | number | boolean) => {
|
|
setFormData((prev) => ({
|
|
...prev,
|
|
[id]: value,
|
|
}));
|
|
};
|
|
|
|
const handlePageChange = (page: number) => {
|
|
setCur(page);
|
|
onPageChange(page);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
{headName ? (
|
|
<div className="card-header">
|
|
<h3 className="text-2xl mx-3 font-medium text-label">{headName}</h3>
|
|
</div>
|
|
) : null}
|
|
<div className={`card !m-[1.2rem] !p-0r ${className}`}>
|
|
<Table variant="secondary">
|
|
<TableBody className="text-center">
|
|
{headlist?.map((head) => (
|
|
<TableRow key={head.id}>
|
|
{/* 컬럼 제목 */}
|
|
<TableCell className="font-bold bg-blue-100 text-xs">
|
|
{head.title}
|
|
</TableCell>
|
|
{/* 데이터 값 또는 입력 필드 */}
|
|
<TableCell className="text-xs">
|
|
{children && children[head.id] ? children[head.id] : isEditable ? (
|
|
head.type === "select" ? (
|
|
<select
|
|
id={head.id}
|
|
value={formData[head.id] ?? "-"}
|
|
onChange={(e) => handleInputChange(head.id, e.target.value)}
|
|
className="w-full border border-gray-300 rounded-sm px-2 py-1 text-xl border-radius-0"
|
|
>
|
|
{head.options?.map((option) => (
|
|
<option key={option} value={option}>
|
|
{option}
|
|
</option>
|
|
))}
|
|
</select>
|
|
) : head.type === "input" ? (
|
|
<input
|
|
id={head.id}
|
|
type="text"
|
|
value={formData[head.id] ?? ""}
|
|
onChange={(e) => handleInputChange(head.id, e.target.value)}
|
|
className="w-full text-xl border-radius-0 border border-gray-300 rounded-sm px-2 py-1"
|
|
/>
|
|
) : (
|
|
<span>{formData[head.id] ?? "-"}</span>
|
|
)
|
|
) : (
|
|
<span>{formData[head.id] ?? "-"}</span>
|
|
)}
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
{total > 0 && (
|
|
<UiPageNations
|
|
total={total}
|
|
cur={cur}
|
|
pageSize={pageSize}
|
|
onPageChange={handlePageChange}
|
|
/>
|
|
)}
|
|
</div>
|
|
</>
|
|
);
|
|
} |