diff --git a/src/pages/usage/hooks/use-apikeys-columns.tsx b/src/pages/usage/hooks/use-apikeys-columns.tsx
index 27234c5d..92fc58a0 100644
--- a/src/pages/usage/hooks/use-apikeys-columns.tsx
+++ b/src/pages/usage/hooks/use-apikeys-columns.tsx
@@ -1,6 +1,5 @@
 // columns.ts
 import AutoTooltip from '@/components/auto-tooltip';
-import { tableSorter } from '@/config/settings';
 import { useIntl } from '@umijs/max';
 import { useMemo } from 'react';
 import { BreakdownItem as ListItem } from '../config/types';
@@ -18,7 +17,6 @@ const useModelsColumns = (): Array<{
         title: intl.formatMessage({ id: 'common.table.name' }),
         dataIndex: ['api_key', 'identity', 'value', 'api_key_name'],
         key: 'api_key_name',
-        sorter: tableSorter(1),
         render: (text: string, record: ListItem) => (
           <span className="flex items-center">
             <AutoTooltip ghost style={{ maxWidth: 400 }}>
@@ -41,7 +39,7 @@ const useModelsColumns = (): Array<{
         title: intl.formatMessage({ id: 'usage.filter.modelsUsed' }),
         dataIndex: 'models_called',
         key: 'models_called',
-        sorter: tableSorter(2),
+        sorter: true,
         render: (text: string, record: ListItem) => (
           <AutoTooltip ghost>{text || '-'}</AutoTooltip>
         )
@@ -50,6 +48,7 @@ const useModelsColumns = (): Array<{
         title: intl.formatMessage({ id: 'usage.filter.inputTokens' }),
         dataIndex: 'input_tokens',
         key: 'input_tokens',
+        sorter: true,
         render: (text: string[], record: ListItem) => (
           <AutoTooltip ghost>{text}</AutoTooltip>
         )
@@ -66,7 +65,7 @@ const useModelsColumns = (): Array<{
         title: intl.formatMessage({ id: 'usage.filter.totalTokens' }),
         dataIndex: 'total_tokens',
         key: 'total_tokens',
-        sorter: tableSorter(3),
+        sorter: true,
         ellipsis: {
           showTitle: false
         },
@@ -76,7 +75,7 @@ const useModelsColumns = (): Array<{
         title: intl.formatMessage({ id: 'usage.filter.apiRequests' }),
         dataIndex: 'api_requests',
         key: 'api_requests',
-        sorter: tableSorter(3),
+        sorter: true,
         ellipsis: {
           showTitle: false
         },
@@ -86,7 +85,6 @@ const useModelsColumns = (): Array<{
         title: intl.formatMessage({ id: 'usage.table.lastActive' }),
         dataIndex: 'last_active',
         key: 'last_active',
-        sorter: tableSorter(3),
         ellipsis: {
           showTitle: false
         },
diff --git a/src/pages/usage/hooks/use-models-columns.tsx b/src/pages/usage/hooks/use-models-columns.tsx
index 00a9ec24..bda9849d 100644
--- a/src/pages/usage/hooks/use-models-columns.tsx
+++ b/src/pages/usage/hooks/use-models-columns.tsx
@@ -1,6 +1,5 @@
 // columns.ts
 import AutoTooltip from '@/components/auto-tooltip';
-import { tableSorter } from '@/config/settings';
 import ProviderLogo from '@/pages/maas-provider/components/provider-logo';
 import { useIntl } from '@umijs/max';
 import { useMemo } from 'react';
@@ -23,7 +22,6 @@ const useModelsColumns = (): Array<{
         title: intl.formatMessage({ id: 'common.table.name' }),
         dataIndex: ['model', 'identity', 'value', 'model_name'],
         key: 'model_name',
-        sorter: tableSorter(1),
         render: (text: string, record: ListItem) => (
           <span className="flex items-center">
             <AutoTooltip ghost style={{ maxWidth: 400 }}>
@@ -36,7 +34,6 @@ const useModelsColumns = (): Array<{
         title: intl.formatMessage({ id: 'usage.table.cluster' }),
         dataIndex: ['model', 'identity', 'value', 'cluster_name'],
         key: 'cluster_name',
-        sorter: tableSorter(2),
         render: (text: string, record: ListItem) => (
           <AutoTooltip ghost>{text || '-'}</AutoTooltip>
         )
@@ -60,6 +57,7 @@ const useModelsColumns = (): Array<{
         title: intl.formatMessage({ id: 'usage.filter.inputTokens' }),
         dataIndex: 'input_tokens',
         key: 'input_tokens',
+        sorter: true,
         render: (text: string[], record: ListItem) => (
           <AutoTooltip ghost>{text}</AutoTooltip>
         )
@@ -68,6 +66,7 @@ const useModelsColumns = (): Array<{
         title: intl.formatMessage({ id: 'usage.filter.outputTokens' }),
         dataIndex: 'output_tokens',
         key: 'output_tokens',
+        sorter: true,
         render: (text: string[], record: ListItem) => (
           <AutoTooltip ghost>{text}</AutoTooltip>
         )
@@ -76,7 +75,7 @@ const useModelsColumns = (): Array<{
         title: intl.formatMessage({ id: 'usage.filter.totalTokens' }),
         dataIndex: 'total_tokens',
         key: 'total_tokens',
-        sorter: tableSorter(3),
+        sorter: true,
         ellipsis: {
           showTitle: false
         },
@@ -86,7 +85,7 @@ const useModelsColumns = (): Array<{
         title: intl.formatMessage({ id: 'usage.filter.apiRequests' }),
         dataIndex: 'api_requests',
         key: 'api_requests',
-        sorter: tableSorter(3),
+        sorter: true,
         ellipsis: {
           showTitle: false
         },
@@ -96,7 +95,6 @@ const useModelsColumns = (): Array<{
         title: intl.formatMessage({ id: 'usage.table.lastActive' }),
         dataIndex: 'last_active',
         key: 'last_active',
-        sorter: tableSorter(3),
         ellipsis: {
           showTitle: false
         },
diff --git a/src/pages/usage/hooks/use-users-columns.tsx b/src/pages/usage/hooks/use-users-columns.tsx
index 61b54d94..3790ffee 100644
--- a/src/pages/usage/hooks/use-users-columns.tsx
+++ b/src/pages/usage/hooks/use-users-columns.tsx
@@ -1,6 +1,5 @@
 // columns.ts
 import AutoTooltip from '@/components/auto-tooltip';
-import { tableSorter } from '@/config/settings';
 import { useIntl } from '@umijs/max';
 import { useMemo } from 'react';
 import { BreakdownItem as ListItem } from '../config/types';
@@ -22,7 +21,6 @@ const useModelsColumns = (): Array<{
         title: intl.formatMessage({ id: 'common.table.name' }),
         dataIndex: ['user', 'identity', 'value', 'user_name'],
         key: 'user_name',
-        sorter: tableSorter(1),
         render: (text: string, record: ListItem) => (
           <span className="flex items-center">
             <AutoTooltip ghost style={{ maxWidth: 400 }}>
@@ -35,6 +33,7 @@ const useModelsColumns = (): Array<{
         title: intl.formatMessage({ id: 'usage.filter.modelsUsed' }),
         dataIndex: 'models_called',
         key: 'models_called',
+        sorter: true,
         render: (text: string, record: ListItem) => (
           <AutoTooltip ghost style={{ maxWidth: 400 }}>
             {text || '-'}
@@ -45,7 +44,7 @@ const useModelsColumns = (): Array<{
         title: intl.formatMessage({ id: 'usage.table.user.apiKeysUsed' }),
         dataIndex: 'api_keys_used',
         key: 'api_keys_used',
-        sorter: tableSorter(2),
+        sorter: true,
         render: (text: string, record: ListItem) => (
           <AutoTooltip ghost>{text || '-'}</AutoTooltip>
         )
@@ -54,6 +53,7 @@ const useModelsColumns = (): Array<{
         title: intl.formatMessage({ id: 'usage.filter.inputTokens' }),
         dataIndex: 'input_tokens',
         key: 'input_tokens',
+        sorter: true,
         render: (text: string[], record: ListItem) => (
           <AutoTooltip ghost>{text}</AutoTooltip>
         )
@@ -62,6 +62,7 @@ const useModelsColumns = (): Array<{
         title: intl.formatMessage({ id: 'usage.filter.outputTokens' }),
         dataIndex: 'output_tokens',
         key: 'output_tokens',
+        sorter: true,
         render: (text: string[], record: ListItem) => (
           <AutoTooltip ghost>{text}</AutoTooltip>
         )
@@ -70,7 +71,7 @@ const useModelsColumns = (): Array<{
         title: intl.formatMessage({ id: 'usage.filter.totalTokens' }),
         dataIndex: 'total_tokens',
         key: 'total_tokens',
-        sorter: tableSorter(3),
+        sorter: true,
         ellipsis: {
           showTitle: false
         },
@@ -80,7 +81,7 @@ const useModelsColumns = (): Array<{
         title: intl.formatMessage({ id: 'usage.filter.apiRequests' }),
         dataIndex: 'api_requests',
         key: 'api_requests',
-        sorter: tableSorter(3),
+        sorter: true,
         ellipsis: {
           showTitle: false
         },
@@ -90,7 +91,6 @@ const useModelsColumns = (): Array<{
         title: intl.formatMessage({ id: 'usage.table.lastActive' }),
         dataIndex: 'last_active',
         key: 'last_active',
-        sorter: tableSorter(3),
         ellipsis: {
           showTitle: false
         },
diff --git a/src/pages/usage/tables/apikeys-table.tsx b/src/pages/usage/tables/apikeys-table.tsx
index 94144ed2..4b2ca6d6 100644
--- a/src/pages/usage/tables/apikeys-table.tsx
+++ b/src/pages/usage/tables/apikeys-table.tsx
@@ -32,10 +32,22 @@ const APIKeys: React.FC<{
     sort_by: ''
   });
 
-  const handleTableChange = (pagination: any, filters: any, sorter: any) => {};
-
-  const handlePageChange = (page: number, pageSize: number) => {};
+  const handleTableChange = (pagination: any, filters: any, sorter: any) => {
+    let sort_by =
+      sorter.order === 'descend' ? `-${sorter.field}` : sorter.field;
+    setQueryParams((prev) => ({
+      ...prev,
+      sort_by
+    }));
+  };
 
+  const handlePageChange = (page: number, pageSize: number) => {
+    setQueryParams((prev) => ({
+      ...prev,
+      page,
+      perPage: pageSize
+    }));
+  };
   const columns = useAPIKeys();
 
   const renderEmpty = (type?: string) => {
diff --git a/src/pages/usage/tables/models-table.tsx b/src/pages/usage/tables/models-table.tsx
index 9040342e..48fa1395 100644
--- a/src/pages/usage/tables/models-table.tsx
+++ b/src/pages/usage/tables/models-table.tsx
@@ -32,9 +32,23 @@ const Models: React.FC<{
     sort_by: ''
   });
 
-  const handleTableChange = (pagination: any, filters: any, sorter: any) => {};
+  const handleTableChange = (pagination: any, filters: any, sorter: any) => {
+    console.log('pagination, filters, sorter: ', pagination, filters, sorter);
+    let sort_by =
+      sorter.order === 'descend' ? `-${sorter.field}` : sorter.field;
+    setQueryParams((prev) => ({
+      ...prev,
+      sort_by
+    }));
+  };
 
-  const handlePageChange = (page: number, pageSize: number) => {};
+  const handlePageChange = (page: number, pageSize: number) => {
+    setQueryParams((prev) => ({
+      ...prev,
+      page,
+      perPage: pageSize
+    }));
+  };
 
   const columns = useUsersColumns();
 
diff --git a/src/pages/usage/tables/users-table.tsx b/src/pages/usage/tables/users-table.tsx
index 965286dd..e3055701 100644
--- a/src/pages/usage/tables/users-table.tsx
+++ b/src/pages/usage/tables/users-table.tsx
@@ -32,9 +32,22 @@ const Users: React.FC<{
     sort_by: ''
   });
 
-  const handleTableChange = (pagination: any, filters: any, sorter: any) => {};
+  const handleTableChange = (pagination: any, filters: any, sorter: any) => {
+    let sort_by =
+      sorter.order === 'descend' ? `-${sorter.field}` : sorter.field;
+    setQueryParams((prev) => ({
+      ...prev,
+      sort_by
+    }));
+  };
 
-  const handlePageChange = (page: number, pageSize: number) => {};
+  const handlePageChange = (page: number, pageSize: number) => {
+    setQueryParams((prev) => ({
+      ...prev,
+      page,
+      perPage: pageSize
+    }));
+  };
 
   const columns = useUsersColumns();