File size: 3,071 Bytes
e3278e4 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 |
import { Fragment } from "react";
import {
ColumnDef,
flexRender,
getCoreRowModel,
getExpandedRowModel,
Row,
useReactTable,
} from "@tanstack/react-table";
import {
Table,
TableHead,
TableHeaderCell,
TableBody,
TableRow,
TableCell,
} from "@tremor/react";
interface DataTableProps<TData, TValue> {
data: TData[];
columns: ColumnDef<TData, TValue>[];
renderSubComponent: (props: { row: Row<TData> }) => React.ReactElement;
getRowCanExpand: (row: Row<TData>) => boolean;
isLoading?: boolean;
}
export function DataTable<TData, TValue>({
data = [],
columns,
getRowCanExpand,
renderSubComponent,
isLoading = false,
}: DataTableProps<TData, TValue>) {
const table = useReactTable({
data,
columns,
getRowCanExpand,
getCoreRowModel: getCoreRowModel(),
getExpandedRowModel: getExpandedRowModel(),
});
return (
<div className="rounded-lg custom-border table-wrapper">
<Table>
<TableHead>
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id}>
{headerGroup.headers.map((header) => {
return (
<TableHeaderCell key={header.id}>
{header.isPlaceholder ? null : (
flexRender(
header.column.columnDef.header,
header.getContext()
)
)}
</TableHeaderCell>
);
})}
</TableRow>
))}
</TableHead>
<TableBody>
{isLoading ?
<TableRow>
<TableCell colSpan={columns.length} className="h-24 text-center">
<div className="p-8 text-center text-gray-500">
<p>🚅 Loading logs...</p>
</div>
</TableCell>
</TableRow>
: table.getRowModel().rows.length > 0 ?
table.getRowModel().rows.map((row) => (
<Fragment key={row.id}>
<TableRow>
{row.getVisibleCells().map((cell) => (
<TableCell key={cell.id}>
{flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
</TableCell>
))}
</TableRow>
{row.getIsExpanded() && (
<TableRow>
<TableCell colSpan={row.getVisibleCells().length}>
{renderSubComponent({ row })}
</TableCell>
</TableRow>
)}
</Fragment>
))
: <TableRow>
<TableCell colSpan={columns.length} className="h-24 text-center">
<div className="p-8 text-center text-gray-500">
<p>No logs found</p>
</div>
</TableCell>
</TableRow>
}
</TableBody>
</Table>
</div>
);
}
|