this repo has no description
feat: data table is a lil reactive
+53
-49
+53
-49
mast-react-vite/src/components/ui/data-table.tsx
+53
-49
mast-react-vite/src/components/ui/data-table.tsx
···
54
54
}
55
55
})
56
56
57
-
return (
58
-
<div >
59
-
<Table >
60
-
<TableHeader className="bg-accent">
61
-
{table.getHeaderGroups().map((headerGroup) => (
62
-
<TableRow key={headerGroup.id}>
63
-
{headerGroup.headers.map((header) => {
64
-
return (
65
-
<TableHead key={header.id}
66
-
className="relative text-foreground"
67
-
style={{
68
-
width: header.getSize(),
69
-
}}
70
-
>
71
-
{header.isPlaceholder
72
-
? null
73
-
: flexRender(
74
-
header.column.columnDef.header,
75
-
header.getContext()
76
-
)}
77
-
</TableHead>
78
-
)
79
-
})}
80
-
</TableRow>
81
-
))}
82
-
</TableHeader>
83
-
<TableBody>
84
-
{table.getRowModel().rows?.length ? (
85
-
table.getRowModel().rows.map((row) => (
86
-
<TableRow
87
-
key={row.id}
88
-
data-state={row.getIsSelected() && "selected"}
57
+
return (
58
+
<div className="w-full overflow-x-auto">
59
+
<Table className="min-w-full table-fixed md:table-auto">
60
+
<TableHeader className="bg-accent flex flex-row md:table-header-group">
61
+
{table.getHeaderGroups().map((headerGroup) => (
62
+
<TableRow key={headerGroup.id} className="flex flex-row flex-wrap md:table-row">
63
+
{headerGroup.headers.map((header) => (
64
+
<TableHead
65
+
key={header.id}
66
+
className="relative text-foreground flex-1 min-w-[20px] flex items-center px-4 py-2 md:table-cell"
67
+
style={{
68
+
width: header.getSize(),
69
+
}}
89
70
>
90
-
{row.getVisibleCells().map((cell) => (
91
-
<TableCell key={cell.id}>
92
-
{flexRender(cell.column.columnDef.cell, cell.getContext())}
93
-
</TableCell>
94
-
))}
95
-
</TableRow>
96
-
))
97
-
) : (
98
-
<TableRow>
99
-
<TableCell colSpan={columns.length} className="h-24 text-center">
100
-
No results.
101
-
</TableCell>
71
+
{header.isPlaceholder
72
+
? null
73
+
: flexRender(
74
+
header.column.columnDef.header,
75
+
header.getContext()
76
+
)}
77
+
</TableHead>
78
+
))}
79
+
</TableRow>
80
+
))}
81
+
</TableHeader>
82
+
<TableBody className="flex flex-col md:table-row-group">
83
+
{table.getRowModel().rows?.length ? (
84
+
table.getRowModel().rows.map((row) => (
85
+
<TableRow
86
+
key={row.id}
87
+
data-state={row.getIsSelected() && "selected"}
88
+
className="flex flex-row flex-wrap md:table-row"
89
+
>
90
+
{row.getVisibleCells().map((cell) => (
91
+
<TableCell
92
+
key={cell.id}
93
+
className="flex-1 min-w-[20px] flex items-center px-4 py-2 md:table-cell"
94
+
>
95
+
{flexRender(cell.column.columnDef.cell, cell.getContext())}
96
+
</TableCell>
97
+
))}
102
98
</TableRow>
103
-
)}
104
-
</TableBody>
105
-
</Table>
106
-
</div>
107
-
)
99
+
))
100
+
) : (
101
+
<TableRow>
102
+
<TableCell colSpan={columns.length} className="h-24 text-center">
103
+
No results.
104
+
</TableCell>
105
+
</TableRow>
106
+
)}
107
+
</TableBody>
108
+
</Table>
109
+
</div>
110
+
)
111
+
108
112
}
109
113