feat: add server-side table sorting

src/app/(modules)/plans/components/PlanColumns.tsx

@@ -65,6 +65,7 @@ export function usePlanColumns({
       {
         id: 'limits',
         header: 'Limits',
+        enableSorting: false,
         cell: ({ row }) => (
           <div className="text-xs text-muted-foreground">
             <p>{row.original.max_projects} projects</p>
@@ -96,6 +97,7 @@ export function usePlanColumns({
     columns.push({
       id: 'actions',
       header: () => <div className="text-right">Actions</div>,
+      enableSorting: false,
       cell: ({ row }) => {
         const plan = row.original;
         return (

src/app/(modules)/plans/components/PlanTable.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 { Plan } from '@/types';
@@ -14,8 +14,10 @@ interface PlanTableProps {
   skip: number;
   limit: number;
   total: number;
+  sorting: SortingState;
   onPageChange: (skip: number) => void;
   onLimitChange: (limit: number) => void;
+  onSortingChange: (sorting: SortingState) => void;
 }
 
 export function PlanTable({
@@ -26,8 +28,10 @@ export function PlanTable({
   skip,
   limit,
   total,
+  sorting,
   onPageChange,
   onLimitChange,
+  onSortingChange,
 }: PlanTableProps) {
   return (
     <DataTable
@@ -44,6 +48,8 @@ export function PlanTable({
         onPageChange,
         onLimitChange,
       }}
+      sorting={sorting}
+      onSortingChange={onSortingChange}
     />
   );
 }