frishi/threetwo
1
0
Fork 0
Code Issues 9 Pull Requests 6 Actions Packages Projects Releases 2 Wiki Activity

🧾 Modernizing the table

Browse Source
This commit is contained in:
Rishi Ghan
2025-06-03 22:41:33 -04:00
parent c0b189c9e6
commit c176dab78b
1 changed files with 34 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src/client/components/shared/T2Table.tsx
View File

@@ -81,42 +81,47 @@ export const T2Table = (tableOptions: T2TableProps): ReactElement => {
return ( return (
<div className="container max-w-fit mx-14"> <div className="container max-w-fit mx-14">
<div> <div>
<div className="flex flex-row gap-2 justify-between mt-7"> <div className="flex flex-row gap-2 justify-between mt-6 mb-4">
{/* Search bar */} {/* Search bar */}
{tableOptions.children} {tableOptions.children}
{/* pagination controls */}
<div> {/* Pagination controls */}
Page {pageIndex} of {Math.ceil(totalPages / pageSize)} <div className="text-sm text-gray-800 dark:text-slate-200">
<p>{totalPages} comics in all</p> <div className="mb-1">
{/* Prev/Next buttons */} Page {pageIndex} of {Math.ceil(totalPages / pageSize)}
<div className="inline-flex flex-row mt-4 mb-4"> </div>
<p className="text-xs text-gray-600 dark:text-slate-400">
{totalPages} comics in all
</p>
<div className="inline-flex flex-row mt-3">
<button <button
onClick={() => goToPreviousPage()} onClick={() => goToPreviousPage()}
disabled={pageIndex === 1} disabled={pageIndex === 1}
className="dark:bg-slate-500 bg-slate-400 rounded-l border-slate-600 border-r pt-2 px-2" className="dark:bg-slate-400 bg-gray-300 rounded-l px-2 py-1 border-r border-slate-600"
> >
<i className="icon-[solar--arrow-left-linear] h-6 w-6"></i> <i className="icon-[solar--arrow-left-linear] h-5 w-5"></i>
</button> </button>
<button <button
className="dark:bg-slate-500 bg-slate-400 rounded-r pt-2 px-2" className="dark:bg-slate-400 bg-gray-300 rounded-r px-2 py-1"
onClick={() => goToNextPage()} onClick={() => goToNextPage()}
disabled={pageIndex > Math.floor(totalPages / pageSize)} disabled={pageIndex > Math.floor(totalPages / pageSize)}
> >
<i className="icon-[solar--arrow-right-linear] h-6 w-6"></i> <i className="icon-[solar--arrow-right-linear] h-5 w-5"></i>
</button> </button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<table className="table-auto overflow-auto">
<thead className="sticky top-0 bg-slate-200 dark:bg-slate-500"> <table className="table-auto w-full text-sm text-gray-900 dark:text-slate-100 border-separate border-spacing-0">
{table.getHeaderGroups().map((headerGroup, idx) => ( <thead className="sticky top-0 bg-white dark:bg-slate-900 z-10 border-b border-gray-300 dark:border-slate-700">
{table.getHeaderGroups().map((headerGroup) => (
<tr key={headerGroup.id}> <tr key={headerGroup.id}>
{headerGroup.headers.map((header, idx) => ( {headerGroup.headers.map((header) => (
<th <th
key={header.id} key={header.id}
colSpan={header.colSpan} colSpan={header.colSpan}
className="px-3 py-3" className="px-3 py-2 text-[11px] font-semibold tracking-wide uppercase text-left text-gray-500 dark:text-slate-400"
> >
{header.isPlaceholder {header.isPlaceholder
? null ? null
@@ -131,22 +136,19 @@ export const T2Table = (tableOptions: T2TableProps): ReactElement => {
</thead> </thead>
<tbody> <tbody>
{table.getRowModel().rows.map((row, idx) => { {table.getRowModel().rows.map((row) => (
return ( <tr
<tr key={row.id} onClick={() => rowClickHandler(row)}> key={row.id}
{row.getVisibleCells().map((cell) => { onClick={() => rowClickHandler(row)}
return ( className="border-b border-gray-200 dark:border-slate-700 hover:bg-gray-50 dark:hover:bg-slate-800 transition-colors"
<td key={cell.id} className="align-top"> >
{flexRender( {row.getVisibleCells().map((cell) => (
cell.column.columnDef.cell, <td key={cell.id} className="px-3 py-2 align-top">
cell.getContext(), {flexRender(cell.column.columnDef.cell, cell.getContext())}
)} </td>
</td> ))}
); </tr>
})} ))}
</tr>
);
})}
</tbody> </tbody>
</table> </table>
</div> </div>