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,16 +54,16 @@ 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(),
}} }}
@ -75,20 +75,23 @@ export function DataTable<TData, TValue>({
header.getContext() header.getContext()
)} )}
</TableHead> </TableHead>
) ))}
})}
</TableRow> </TableRow>
))} ))}
</TableHeader> </TableHeader>
<TableBody> <TableBody className="flex flex-col md:table-row-group">
{table.getRowModel().rows?.length ? ( {table.getRowModel().rows?.length ? (
table.getRowModel().rows.map((row) => ( table.getRowModel().rows.map((row) => (
<TableRow <TableRow
key={row.id} key={row.id}
data-state={row.getIsSelected() && "selected"} data-state={row.getIsSelected() && "selected"}
className="flex flex-row flex-wrap md:table-row"
> >
{row.getVisibleCells().map((cell) => ( {row.getVisibleCells().map((cell) => (
<TableCell key={cell.id}> <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())} {flexRender(cell.column.columnDef.cell, cell.getContext())}
</TableCell> </TableCell>
))} ))}
@ -104,6 +107,7 @@ export function DataTable<TData, TValue>({
</TableBody> </TableBody>
</Table> </Table>
</div> </div>
) )
} }