72 lines
1.9 KiB
TypeScript
72 lines
1.9 KiB
TypeScript
import { ScrollArea } from "@/shadcn/components/ui/scroll-area";
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow
|
|
} from "@/shadcn/components/ui/table";
|
|
import { flexRender, Table as ReactTable } from "@tanstack/react-table";
|
|
|
|
interface Props<TData> {
|
|
table: ReactTable<TData>;
|
|
}
|
|
|
|
export default function DashboardTable<T>({ table }: Props<T>) {
|
|
return (
|
|
<div className="w-full max-w-full overflow-x-auto border rounded-lg">
|
|
<Table className="min-w-full divide-y divide-muted-foreground bg-white">
|
|
<TableHeader>
|
|
{table.getHeaderGroups().map((headerGroup) => (
|
|
<TableRow key={headerGroup.id}>
|
|
{headerGroup.headers.map((header) => (
|
|
<TableHead
|
|
key={header.id}
|
|
className={`px-6 py-3 text-left text-sm font-medium text-muted-foreground ${header.column.columnDef.header === 'Status' ? 'text-center' : ''}`}
|
|
style={{
|
|
maxWidth: `${header.column.columnDef.maxSize}px`,
|
|
width: `${header.getSize()}`,
|
|
}}
|
|
>
|
|
{header.isPlaceholder
|
|
? null
|
|
: flexRender(header.column.columnDef.header, header.getContext())}
|
|
</TableHead>
|
|
))}
|
|
</TableRow>
|
|
))}
|
|
</TableHeader>
|
|
|
|
<TableBody>
|
|
{table.getRowModel().rows.length > 0 ? (
|
|
table.getRowModel().rows.map((row) => (
|
|
<TableRow key={row.id}>
|
|
{row.getVisibleCells().map((cell) => (
|
|
<TableCell
|
|
key={cell.id}
|
|
className="px-6 py-4 whitespace-nowrap text-sm text-black"
|
|
style={{
|
|
maxWidth: `${cell.column.columnDef.maxSize}px`,
|
|
whiteSpace: "normal",
|
|
wordWrap: "break-word",
|
|
}}
|
|
>
|
|
{flexRender(cell.column.columnDef.cell, cell.getContext())}
|
|
</TableCell>
|
|
))}
|
|
</TableRow>
|
|
))
|
|
) : (
|
|
<TableRow>
|
|
<TableCell colSpan={table.getAllColumns().length} className="px-6 py-4 text-center text-sm text-gray-500">
|
|
- No Data -
|
|
</TableCell>
|
|
</TableRow>
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
);
|
|
}
|