65 lines
2.5 KiB
TypeScript
65 lines
2.5 KiB
TypeScript
import { PaginationDto } from "~/application/dtos/data/PaginationDto";
|
|
import { RowHeaderDisplayDto } from "~/application/dtos/data/RowHeaderDisplayDto";
|
|
import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "~/components/ui/table";
|
|
import { useTranslation } from "react-i18next";
|
|
import TablePagination from "./TablePagination";
|
|
import { cn } from "~/lib/utils";
|
|
import { translateLabel } from "~/utils/i18n/translateLabel";
|
|
|
|
interface Props<T> {
|
|
headers: RowHeaderDisplayDto<T>[];
|
|
items: T[];
|
|
pagination?: PaginationDto;
|
|
onClickRoute?: (idx: number, item: T) => string | undefined;
|
|
onClick?: (idx: number, item: T) => void;
|
|
onClickHeader?: (header: RowHeaderDisplayDto<T>) => void;
|
|
selectedRows?: T[];
|
|
onSelected?: (item: T[]) => void;
|
|
className?: (idx: number, item: T) => string;
|
|
padding?: string;
|
|
containerClassName?: string;
|
|
}
|
|
|
|
export default function TableNew<T>({ headers, items, pagination, containerClassName }: Props<T>) {
|
|
const { t, i18n } = useTranslation();
|
|
return (
|
|
<div className={cn("border-border-default overflow-hidden rounded-lg border", containerClassName)}>
|
|
<Table className="bg-surface-neutral-primary overflow-visible">
|
|
<TableHeader>
|
|
<TableRow>
|
|
{headers.map((header) => (
|
|
// Inherit Subframe header layout (h-10, px-4, extra-small medium typo,
|
|
// per-cell divider) from the shadcn TableHead primitive — no inline
|
|
// height/typography override here so the Subframe measures apply.
|
|
<TableHead key={header.title}>{translateLabel(t, i18n, header.title)}</TableHead>
|
|
))}
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody className="">
|
|
{items.map((item, idx) => {
|
|
return (
|
|
<TableRow key={idx}>
|
|
{headers.map((header) => (
|
|
<TableCell key={header.title}>{header.value(item, idx)}</TableCell>
|
|
))}
|
|
</TableRow>
|
|
);
|
|
})}
|
|
</TableBody>
|
|
|
|
{items.length === 0 && (
|
|
<TableFooter>
|
|
<TableRow>
|
|
<TableCell colSpan={12} className="text-text-neutral-tertiary bg-surface-neutral-primary p-3 text-center text-sm font-normal">
|
|
{t("shared.noRecords")}
|
|
</TableCell>
|
|
</TableRow>
|
|
</TableFooter>
|
|
)}
|
|
</Table>
|
|
|
|
{pagination && <TablePagination {...pagination} />}
|
|
</div>
|
|
);
|
|
}
|