feat: add server-side table sorting

src/app/(modules)/users/components/UserColumns.tsx

@@ -58,6 +58,7 @@ export function useUserColumns({
       {
         accessorKey: 'roles',
         header: 'Roles',
+        enableSorting: false,
         cell: ({ row }) => (
           <div className="flex flex-wrap gap-1">
             {row.original.roles?.length ? (
@@ -93,6 +94,7 @@ export function useUserColumns({
     columns.push({
       id: 'actions',
       header: () => <div className="text-right">Actions</div>,
+      enableSorting: false,
       cell: ({ row }) => {
         const user = row.original;
         return (

src/app/(modules)/users/components/UserTable.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import type { ReactNode } from 'react';
-import type { ColumnDef } from '@tanstack/react-table';
+import type { ColumnDef, SortingState } from '@tanstack/react-table';
 
 import { DataTable } from '@/components/data-table';
 import type { AdministrationUser } from '@/types';
@@ -14,8 +14,10 @@ interface UserTableProps {
   skip: number;
   limit: number;
   total: number;
+  sorting: SortingState;
   onPageChange: (skip: number) => void;
   onLimitChange: (limit: number) => void;
+  onSortingChange: (sorting: SortingState) => void;
 }
 
 export function UserTable({
@@ -26,8 +28,10 @@ export function UserTable({
   skip,
   limit,
   total,
+  sorting,
   onPageChange,
   onLimitChange,
+  onSortingChange,
 }: UserTableProps) {
   return (
     <DataTable
@@ -44,6 +48,8 @@ export function UserTable({
         onPageChange,
         onLimitChange,
       }}
+      sorting={sorting}
+      onSortingChange={onSortingChange}
     />
   );
 }