83 lines
2.9 KiB
TypeScript
83 lines
2.9 KiB
TypeScript
import { Table, TableBody, TableCell, TableHeader, TableRow } from "@common/components";
|
|
import { useEffect, useState } from "react";
|
|
import { HeadMakeColSpan } from "./HeadMakeColSpan";
|
|
import UiPageNations from "./uiPageNations";
|
|
|
|
type UiTableProps = {
|
|
headName: React.ReactNode | undefined;
|
|
tableData: { [key: string]:any}[];
|
|
headlist: UiHeadProps[];
|
|
pageSize: number;
|
|
total: number;
|
|
cellClick : ((index:number|undefined, headId:string)=>void )| undefined;
|
|
onPageChange: (page: number) => void;
|
|
className?: string;
|
|
resetPageNo?: boolean;
|
|
children?: React.ReactNode | undefined;
|
|
}
|
|
|
|
type UiHeadProps = {
|
|
id: string;
|
|
title: string;
|
|
align?: string;
|
|
}
|
|
|
|
export function UiTable({ tableData, headlist, pageSize, total, headName, children, cellClick, onPageChange, className = '', resetPageNo = false }: UiTableProps) {
|
|
const [cur, setCur] = useState<number>(1);
|
|
const [idx, setIdx] = useState<number>(-1);
|
|
|
|
useEffect(() => {
|
|
if (resetPageNo) {
|
|
setCur(1);
|
|
onPageChange(1);
|
|
}
|
|
}, [onPageChange, resetPageNo]);
|
|
|
|
const handlePageChange = (page: number) => {
|
|
setCur(page);
|
|
onPageChange(page);
|
|
}
|
|
|
|
const handleCellClick = (index: number,headId:string )=> {
|
|
if (cellClick) {
|
|
cellClick(index,headId);
|
|
setIdx(index);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
{headName ? <div className="card-header">
|
|
<h3 className="text-2xl font-medium text-label">{headName}</h3>
|
|
</div> : <></>}
|
|
<div className={`card !m-[1.2rem] !p-0r ${className}`}>
|
|
<Table variant="secondary">
|
|
<TableHeader className="font-bold">
|
|
{children ? children : <HeadMakeColSpan upHeadList={headlist} />}
|
|
</TableHeader>
|
|
<TableBody className='text-center'>
|
|
{tableData.length > 0 ? tableData?.map((el: { [key: string]: any}, index) => (
|
|
<TableRow key={`row-${index}`}>
|
|
{headlist?.map((head) => (
|
|
head.id && head.id.length > 1 && (
|
|
<TableCell
|
|
className={`${head.align === 'right' ? 'text-right' : head.align === 'center' ? 'text-center' : typeof el[head.id] === 'number' ? 'text-right' : 'text-center'} ${
|
|
cellClick && idx === index ? '!font-[1000] cursor-pointer' :
|
|
cellClick ? 'cursor-pointer' : ''
|
|
}`}
|
|
onClick={() => handleCellClick(index, head.id)}
|
|
key={`cell-${head.id}-${index}`}
|
|
>
|
|
{typeof el[head.id] === 'number' ? String(el[head.id]).replace(/\B(?=(\d{3})+(?!\d))/g, ",") : String(el[head.id] ?? '')}
|
|
</TableCell>
|
|
)
|
|
))}
|
|
</TableRow>
|
|
)) : <></>}
|
|
</TableBody>
|
|
</Table>
|
|
{total <= 0 ? <></> : <UiPageNations total={total} cur={cur} pageSize={pageSize} onPageChange={handlePageChange} />}
|
|
</div>
|
|
</>
|
|
);
|
|
} |