Skip to content

S
sweepstake
Commit ff4a7580 by Arjun Jhukal
Options

updated the menu link

parent 45ff0edc
Showing with 62 additions and 54 deletions
src/components/organism/Table/index.tsx
...@@ -60,7 +60,10 @@ export default function CustomTable<TData>({ table, loading = false, ...@@ -60,7 +60,10 @@ export default function CustomTable<TData>({ table, loading = false,
</tr> </tr>
) : ( ) : (
table.getRowModel().rows.map((row) => ( table.getRowModel().rows.map((row) => (
<tr key={row.id} className=""> <tr key={row.id} className={`${row.getIsSelected()
? "bg-[#F3F8FF] hover:bg-[#E7F0FF]"
: "hover:bg-gray-50"
}`}>
{row.getVisibleCells().map((cell) => ( {row.getVisibleCells().map((cell) => (
<td key={cell.id} className="px-4 py-4 text-[12px] text-title "> <td key={cell.id} className="px-4 py-4 text-[12px] text-title ">
{flexRender( {flexRender(
...@@ -81,61 +84,63 @@ export default function CustomTable<TData>({ table, loading = false, ...@@ -81,61 +84,63 @@ export default function CustomTable<TData>({ table, loading = false,
} }
return ( return (
<table className="min-w-full text-left border-separate border-spacing-y-1 user_table"> <div className="max-w-full overflow-x-auto">
<thead> <table className="min-w-full text-left border-separate border-spacing-y-1 user_table">
{table.getHeaderGroups().map((headerGroup) => ( <thead>
<tr key={headerGroup.id}> {table.getHeaderGroups().map((headerGroup) => (
{headerGroup.headers.map((header) => ( <tr key={headerGroup.id}>
<th {headerGroup.headers.map((header) => (
key={header.id} <th
className="text-[12px] font-[600] text-white p-2 lg:p-4" key={header.id}
> className="text-[12px] font-[600] text-white p-2 lg:p-4"
{flexRender( >
header.column.columnDef.header,
header.getContext()
)}
</th>
))}
</tr>
))}
</thead>
<tbody>
{loading ? (
Array.from({ length: skeletonRows }).map((_, rowIndex) => (
<tr key={`skeleton-${rowIndex}`} className="animate-pulse">
{Array.from({ length: columnCount }).map((_, colIndex) => (
<td key={`skeleton-cell-${rowIndex}-${colIndex}`} className="text-[14px] p-2 lg:p-4 " >
<div className="h-4 w-full rounded-xl bg-[rgba(255, 255, 255, 0.10)]" style={{ background: "rgba(255, 255, 255, 0.10)" }} />
</td>
))}
</tr>
))
) : rowCount === 0 ? (
<tr>
<td
colSpan={columnCount}
className="text-center px-4 py-4 text-gray-500"
>
{emptyMessage}
</td>
</tr>
) : (
table.getRowModel().rows.map((row) => (
<tr key={row.id} className="rounded-[24px] mb-1" >
{row.getVisibleCells().map((cell) => (
<td key={cell.id}
className="text-[14px] px-4 py-4"
style={{ background: "rgba(255, 255, 255, 0.10)" }}>
{flexRender( {flexRender(
cell.column.columnDef.cell, header.column.columnDef.header,
cell.getContext() header.getContext()
)} )}
</td> </th>
))} ))}
</tr> </tr>
)) ))}
)} </thead>
</tbody> <tbody>
</table> {loading ? (
Array.from({ length: skeletonRows }).map((_, rowIndex) => (
<tr key={`skeleton-${rowIndex}`} className="animate-pulse">
{Array.from({ length: columnCount }).map((_, colIndex) => (
<td key={`skeleton-cell-${rowIndex}-${colIndex}`} className="text-[14px] p-2 lg:p-4 " >
<div className="h-4 w-full rounded-xl bg-[rgba(255, 255, 255, 0.10)]" style={{ background: "rgba(255, 255, 255, 0.10)" }} />
</td>
))}
</tr>
))
) : rowCount === 0 ? (
<tr>
<td
colSpan={columnCount}
className="text-center px-4 py-4 text-gray-500"
>
{emptyMessage}
</td>
</tr>
) : (
table.getRowModel().rows.map((row) => (
<tr key={row.id} className="rounded-[24px] mb-1" >
{row.getVisibleCells().map((cell) => (
<td key={cell.id}
className="text-[14px] px-4 py-4"
style={{ background: "rgba(255, 255, 255, 0.10)" }}>
{flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
</td>
))}
</tr>
))
)}
</tbody>
</table>
</div>
) )
} }
src/components/pages/dashboard/adminDashboard/transaction/TransactionTable.tsx
...@@ -21,7 +21,7 @@ export default function TransactionTable({ user_id, game_id, search, setSearch } ...@@ -21,7 +21,7 @@ export default function TransactionTable({ user_id, game_id, search, setSearch }
const [sorting, setSorting] = useState<{ id: string; desc: boolean }[]>([]); const [sorting, setSorting] = useState<{ id: string; desc: boolean }[]>([]);
const [page, setPage] = useState(1); const [page, setPage] = useState(1);
const [pageSize, setPageSize] = useState(10); const [pageSize, setPageSize] = useState(10);
const [rowSelection, setRowSelection] = useState({});
const queryArgs = useMemo( const queryArgs = useMemo(
() => ({ () => ({
page, page,
...@@ -135,12 +135,15 @@ export default function TransactionTable({ user_id, game_id, search, setSearch } ...@@ -135,12 +135,15 @@ export default function TransactionTable({ user_id, game_id, search, setSearch }
data: tableData, data: tableData,
columns, columns,
state: { sorting }, state: { sorting },
// enableRowSelection: true,
onSortingChange: setSorting, onSortingChange: setSorting,
getCoreRowModel: getCoreRowModel(), getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(), getPaginationRowModel: getPaginationRowModel(),
getSortedRowModel: getSortedRowModel(), getSortedRowModel: getSortedRowModel(),
// onRowSelectionChange: setRowSelection,
}); });
return ( return (
<div className="border-gray border-solid border-[1px] rounded-[8px] lg:rounded-[16px]"> <div className="border-gray border-solid border-[1px] rounded-[8px] lg:rounded-[16px]">
<TableHeader search={search} setSearch={setSearch && setSearch} onDownloadCSV={() => { }} /> <TableHeader search={search} setSearch={setSearch && setSearch} onDownloadCSV={() => { }} />
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment