feat: data table is a lil reactive
This commit is contained in:
parent
0480be5ded
commit
5e996b27d3
|
@ -54,56 +54,60 @@ export function DataTable<TData, TValue>({
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div >
|
<div className="w-full overflow-x-auto">
|
||||||
<Table >
|
<Table className="min-w-full table-fixed md:table-auto">
|
||||||
<TableHeader className="bg-accent">
|
<TableHeader className="bg-accent flex flex-row md:table-header-group">
|
||||||
{table.getHeaderGroups().map((headerGroup) => (
|
{table.getHeaderGroups().map((headerGroup) => (
|
||||||
<TableRow key={headerGroup.id}>
|
<TableRow key={headerGroup.id} className="flex flex-row flex-wrap md:table-row">
|
||||||
{headerGroup.headers.map((header) => {
|
{headerGroup.headers.map((header) => (
|
||||||
return (
|
<TableHead
|
||||||
<TableHead key={header.id}
|
key={header.id}
|
||||||
className="relative text-foreground"
|
className="relative text-foreground flex-1 min-w-[20px] flex items-center px-4 py-2 md:table-cell"
|
||||||
style={{
|
style={{
|
||||||
width: header.getSize(),
|
width: header.getSize(),
|
||||||
}}
|
}}
|
||||||
>
|
|
||||||
{header.isPlaceholder
|
|
||||||
? null
|
|
||||||
: flexRender(
|
|
||||||
header.column.columnDef.header,
|
|
||||||
header.getContext()
|
|
||||||
)}
|
|
||||||
</TableHead>
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
</TableRow>
|
|
||||||
))}
|
|
||||||
</TableHeader>
|
|
||||||
<TableBody>
|
|
||||||
{table.getRowModel().rows?.length ? (
|
|
||||||
table.getRowModel().rows.map((row) => (
|
|
||||||
<TableRow
|
|
||||||
key={row.id}
|
|
||||||
data-state={row.getIsSelected() && "selected"}
|
|
||||||
>
|
>
|
||||||
{row.getVisibleCells().map((cell) => (
|
{header.isPlaceholder
|
||||||
<TableCell key={cell.id}>
|
? null
|
||||||
{flexRender(cell.column.columnDef.cell, cell.getContext())}
|
: flexRender(
|
||||||
</TableCell>
|
header.column.columnDef.header,
|
||||||
))}
|
header.getContext()
|
||||||
</TableRow>
|
)}
|
||||||
))
|
</TableHead>
|
||||||
) : (
|
))}
|
||||||
<TableRow>
|
</TableRow>
|
||||||
<TableCell colSpan={columns.length} className="h-24 text-center">
|
))}
|
||||||
No results.
|
</TableHeader>
|
||||||
</TableCell>
|
<TableBody className="flex flex-col md:table-row-group">
|
||||||
|
{table.getRowModel().rows?.length ? (
|
||||||
|
table.getRowModel().rows.map((row) => (
|
||||||
|
<TableRow
|
||||||
|
key={row.id}
|
||||||
|
data-state={row.getIsSelected() && "selected"}
|
||||||
|
className="flex flex-row flex-wrap md:table-row"
|
||||||
|
>
|
||||||
|
{row.getVisibleCells().map((cell) => (
|
||||||
|
<TableCell
|
||||||
|
key={cell.id}
|
||||||
|
className="flex-1 min-w-[20px] flex items-center px-4 py-2 md:table-cell"
|
||||||
|
>
|
||||||
|
{flexRender(cell.column.columnDef.cell, cell.getContext())}
|
||||||
|
</TableCell>
|
||||||
|
))}
|
||||||
</TableRow>
|
</TableRow>
|
||||||
)}
|
))
|
||||||
</TableBody>
|
) : (
|
||||||
</Table>
|
<TableRow>
|
||||||
</div>
|
<TableCell colSpan={columns.length} className="h-24 text-center">
|
||||||
)
|
No results.
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
)}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue