feat: data table is a lil reactive

This commit is contained in:
Anish Lakhwara 2025-02-19 23:17:05 -08:00
parent 0480be5ded
commit 5e996b27d3

View file

@ -54,56 +54,60 @@ export function DataTable<TData, TValue>({
}
})
return (
<div >
<Table >
<TableHeader className="bg-accent">
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id}>
{headerGroup.headers.map((header) => {
return (
<TableHead key={header.id}
className="relative text-foreground"
style={{
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"}
return (
<div className="w-full overflow-x-auto">
<Table className="min-w-full table-fixed md:table-auto">
<TableHeader className="bg-accent flex flex-row md:table-header-group">
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id} className="flex flex-row flex-wrap md:table-row">
{headerGroup.headers.map((header) => (
<TableHead
key={header.id}
className="relative text-foreground flex-1 min-w-[20px] flex items-center px-4 py-2 md:table-cell"
style={{
width: header.getSize(),
}}
>
{row.getVisibleCells().map((cell) => (
<TableCell key={cell.id}>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</TableCell>
))}
</TableRow>
))
) : (
<TableRow>
<TableCell colSpan={columns.length} className="h-24 text-center">
No results.
</TableCell>
{header.isPlaceholder
? null
: flexRender(
header.column.columnDef.header,
header.getContext()
)}
</TableHead>
))}
</TableRow>
))}
</TableHeader>
<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>
)}
</TableBody>
</Table>
</div>
)
))
) : (
<TableRow>
<TableCell colSpan={columns.length} className="h-24 text-center">
No results.
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
</div>
)
}