68 lines
1.6 KiB
TypeScript
68 lines
1.6 KiB
TypeScript
import { Table, Center, ScrollArea } from "@mantine/core";
|
|
import { Table as ReactTable, flexRender } from "@tanstack/react-table";
|
|
|
|
interface Props<TData> {
|
|
table: ReactTable<TData>;
|
|
}
|
|
|
|
export default function DashboardTable<T>({ table }: Props<T>) {
|
|
return (
|
|
<ScrollArea.Autosize>
|
|
<Table verticalSpacing="xs" horizontalSpacing="xs">
|
|
{/* Thead */}
|
|
<Table.Thead>
|
|
{table.getHeaderGroups().map((headerGroup) => (
|
|
<Table.Tr key={headerGroup.id}>
|
|
{headerGroup.headers.map((header) => (
|
|
<Table.Th
|
|
key={header.id}
|
|
style={{
|
|
maxWidth: `${header.column.columnDef.maxSize}px`,
|
|
width: `${header.getSize()}`,
|
|
}}
|
|
>
|
|
{header.isPlaceholder
|
|
? null
|
|
: flexRender(
|
|
header.column.columnDef.header,
|
|
header.getContext()
|
|
)}
|
|
</Table.Th>
|
|
))}
|
|
</Table.Tr>
|
|
))}
|
|
</Table.Thead>
|
|
|
|
{/* Tbody */}
|
|
<Table.Tbody>
|
|
{table.getRowModel().rows.length > 0 ? (
|
|
table.getRowModel().rows.map((row) => (
|
|
<Table.Tr key={row.id}>
|
|
{row.getVisibleCells().map((cell) => (
|
|
<Table.Td
|
|
key={cell.id}
|
|
style={{
|
|
maxWidth: `${cell.column.columnDef.maxSize}px`,
|
|
}}
|
|
>
|
|
{flexRender(
|
|
cell.column.columnDef.cell,
|
|
cell.getContext()
|
|
)}
|
|
</Table.Td>
|
|
))}
|
|
</Table.Tr>
|
|
))
|
|
) : (
|
|
<Table.Tr>
|
|
<Table.Td colSpan={table.getAllColumns().length}>
|
|
<Center>- No Data -</Center>
|
|
</Table.Td>
|
|
</Table.Tr>
|
|
)}
|
|
</Table.Tbody>
|
|
</Table>
|
|
</ScrollArea.Autosize>
|
|
);
|
|
}
|