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 ( 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>
)
} }