this repo has no description
2
fork

Configure Feed

Select the types of activity you want to include in your feed.

feat: data table is a lil reactive

+53 -49
+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