gitea-admin/lti-web-client
1
0
Fork 0
mirror of https://gitlab.com/mbugroup/lti-web-client.git synced 2026-05-23 14:55:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(FE-326,327): Add sortable table headers and styling

Browse Source
This commit is contained in:
rstubryan
2025-12-04 20:14:29 +07:00
parent b095208fae
commit 7d9a88cf3b
2 changed files with 113 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Table.tsx
+64 -12
View File
@@ -46,6 +46,7 @@ export interface CustomHeaderRow {
colSpan?: number;
rowSpan?: number;
className?: string;
field?: string;
}>;
className?: string;
}
@@ -236,18 +237,69 @@ const Table = <TData extends object>({
headerRow.className || className.customHeaderRowClassName
}
>
{headerRow.cells.map((cell) => (
<th
key={cell.id}
colSpan={cell.colSpan}
rowSpan={cell.rowSpan}
className={
cell.className || className.customHeaderCellClassName
}
>
{cell.content}
</th>
))}
{headerRow.cells.map((cell) => {
const column = table
.getAllColumns()
.find((col) => col.id === cell.field);
const canSort = column?.getCanSort();
const sortingState = column?.getIsSorted();
return (
<th
key={cell.id}
colSpan={cell.colSpan}
rowSpan={cell.rowSpan}
onClick={
canSort
? column?.getToggleSortingHandler()
: undefined
}
className={cn(
cell.className || className.customHeaderCellClassName,
canSort ? 'cursor-pointer select-none' : ''
)}
>
<div
className={cn(
'flex items-center gap-1',
cell.className?.includes('text-center')
? 'justify-center'
: ''
)}
>
{cell.content}
{canSort && (
<div className='flex items-center'>
<Icon
icon='lucide:arrow-up'
width={12}
height={12}
className={cn(
'transition-all ease-in-out duration-200',
sortingState === 'asc'
? 'text-black'
: 'text-black/30'
)}
/>
<Icon
icon='lucide:arrow-down'
width={12}
height={12}
className={cn(
'transition-all ease-in-out duration-200',
sortingState === 'desc'
? 'text-black'
: 'text-black/30'
)}
/>
</div>
)}
</div>
</th>
);
})}
</tr>
))}