fix: table sorter

src/components/seal-table/styles/header.less

@@ -4,6 +4,7 @@
   display: flex;
   align-items: center;
   justify-content: flex-start;
+  height: 50px;
   padding-inline: var(--ant-table-cell-padding-inline);
 
   &::before {

src/hooks/use-table-fetch.ts

@@ -1,6 +1,5 @@
 import useSetChunkRequest from '@/hooks/use-chunk-request';
 import useTableRowSelection from '@/hooks/use-table-row-selection';
-import useTableSort from '@/hooks/use-table-sort';
 import useUpdateChunkedList from '@/hooks/use-update-chunk-list';
 import { handleBatchRequest } from '@/utils';
 import _ from 'lodash';
@@ -52,8 +51,12 @@ export default function useTableFetch<T>(
   const chunkRequedtRef = useRef<any>(null);
   const modalRef = useRef<any>(null);
   const rowSelection = useTableRowSelection();
-  const { sortOrder, setSortOrder } = useTableSort({
+  const [sortOrder, setSortOrder] = useState<{
-    defaultSortOrder: 'descend'
+    order?: 'ascend' | 'descend' | null;
+    columnKey?: string;
+  }>({
+    order: null,
+    columnKey: undefined
   });
 
   // for skeleton loading
@@ -235,7 +238,10 @@ export default function useTableFetch<T>(
   };
 
   const handleTableChange = (pagination: any, filters: any, sorter: any) => {
-    setSortOrder(sorter.order);
+    setSortOrder({
+      order: sorter.order,
+      columnKey: sorter.columnKey || sorter.field
+    });
   };
 
   const handleSearch = () => {

src/pages/api-keys/hooks/use-keys-columns.tsx

@@ -3,7 +3,6 @@ import AutoTooltip from '@/components/auto-tooltip';
 import DropdownButtons from '@/components/drop-down-buttons';
 import icons from '@/components/icon-font/icons';
 import { useIntl } from '@umijs/max';
-import type { SortOrder } from 'antd/es/table/interface';
 import { ColumnsType } from 'antd/lib/table';
 import dayjs from 'dayjs';
 import { useMemo } from 'react';
@@ -11,7 +10,10 @@ import { ListItem } from '../config/types';
 
 interface ColumnsHookProps {
   handleSelect: (val: string, record: ListItem) => void;
-  sortOrder: SortOrder;
+  sortOrder: {
+    order?: 'ascend' | 'descend' | null;
+    columnKey?: string;
+  };
 }
 
 const actionList: Global.ActionItem[] = [
@@ -91,7 +93,10 @@ const useModelsColumns = ({
         dataIndex: 'created_at',
         key: 'created_at',
         defaultSortOrder: 'descend',
-        sortOrder,
+        sortOrder:
+          sortOrder.order && sortOrder.columnKey === 'created_at'
+            ? sortOrder.order
+            : null,
         sorter: false,
         ellipsis: {
           showTitle: false

src/pages/api-keys/index.tsx

@@ -139,6 +139,7 @@ const APIKeys: React.FC = () => {
             dataSource={dataSource.dataList}
             rowSelection={rowSelection}
             loading={dataSource.loading}
+            sortDirections={['ascend', 'descend', 'ascend']}
             rowKey="id"
             onChange={handleTableChange}
             pagination={{

src/pages/cluster-management/hooks/use-credential-columns.tsx

@@ -10,7 +10,10 @@ import { ProviderLabelMap, credentialActionList } from '../config';
 import { CredentialListItem as ListItem } from '../config/types';
 
 const useCredentialColumns = (
-  sortOrder: SortOrder,
+  sortOrder: {
+    order?: SortOrder;
+    columnKey?: string;
+  },
   handleSelect: (val: string, record: ListItem) => void
 ): ColumnsType<ListItem> => {
   const intl = useIntl();
@@ -36,7 +39,10 @@ const useCredentialColumns = (
         dataIndex: 'created_at',
         showSorterTooltip: false,
         defaultSortOrder: 'descend',
-        sortOrder: sortOrder,
+        sortOrder:
+          sortOrder.order && sortOrder.columnKey === 'created_at'
+            ? sortOrder.order
+            : null,
         sorter: false,
         ellipsis: {
           showTitle: false

src/pages/llmodels/components/table-list.tsx

@@ -12,7 +12,6 @@ import { PageActionType } from '@/config/types';
 import useBodyScroll from '@/hooks/use-body-scroll';
 import useExpandedRowKeys from '@/hooks/use-expanded-row-keys';
 import useTableRowSelection from '@/hooks/use-table-row-selection';
-import useTableSort from '@/hooks/use-table-sort';
 import NoResult from '@/pages/_components/no-result';
 import PageBox from '@/pages/_components/page-box';
 import { ListItem as WorkerListItem } from '@/pages/resources/config/types';
@@ -148,8 +147,12 @@ const Models: React.FC<ModelsProps> = ({
     removeExpandedRowKey,
     expandedRowKeys
   } = useExpandedRowKeys(expandAtom);
-  const { sortOrder, setSortOrder } = useTableSort({
+  const [sortOrder, setSortOrder] = useState<{
-    defaultSortOrder: 'descend'
+    columnKey: string;
+    order: 'ascend' | 'descend' | null;
+  }>({
+    order: null,
+    columnKey: ''
   });
 
   const [apiAccessInfo, setAPIAccessInfo] = useState<any>({
@@ -216,7 +219,10 @@ const Models: React.FC<ModelsProps> = ({
   };
 
   const handleOnSort = (dataIndex: string, order: any) => {
-    setSortOrder(order);
+    setSortOrder({
+      columnKey: dataIndex,
+      order: order
+    });
   };
 
   const handleOnCell = useMemoizedFn(async (record: any, extra: any) => {

src/pages/llmodels/hooks/use-models-columns.tsx

@@ -34,7 +34,10 @@ const setModelActionList = (record: any) => {
 
 interface ModelsColumnsHookProps {
   handleSelect: (val: string, record: ListItem) => void;
-  sortOrder: SortOrder;
+  sortOrder: {
+    columnKey: string;
+    order: SortOrder;
+  };
   clusterList: Global.BaseOption<
     number,
     { provider: string; state: string | number }
@@ -54,6 +57,11 @@ const useModelsColumns = ({
         title: intl.formatMessage({ id: 'common.table.name' }),
         dataIndex: 'name',
         key: 'name',
+        sortOrder:
+          sortOrder.order && sortOrder.columnKey === 'name'
+            ? sortOrder.order
+            : null,
+        sorter: false,
         span: 5,
         render: (text: string, record: ListItem) => (
           <span className="flex-center" style={{ maxWidth: '100%' }}>
@@ -122,7 +130,10 @@ const useModelsColumns = ({
         dataIndex: 'created_at',
         key: 'created_at',
         defaultSortOrder: 'descend',
-        sortOrder,
+        sortOrder:
+          sortOrder.order && sortOrder.columnKey === 'created_at'
+            ? sortOrder.order
+            : null,
         sorter: false,
         span: 4,
         render: (text: number) => (

src/pages/resources/components/gpus.tsx

@@ -16,6 +16,7 @@ const GPUList: React.FC = () => {
     dataSource,
     queryParams,
     extraStatus,
+    sortOrder,
     handlePageChange,
     handleTableChange,
     handleQueryChange,
@@ -71,6 +72,7 @@ const GPUList: React.FC = () => {
   const columns = useGPUColumns({
     clusterList,
     loadend: dataSource.loadend,
+    sortOrder,
     firstLoad: extraStatus.firstLoad
   });
 
@@ -100,6 +102,7 @@ const GPUList: React.FC = () => {
           <Table
             columns={columns}
             style={{ width: '100%' }}
+            sortDirections={['ascend', 'descend', 'ascend']}
             tableLayout={dataSource.loadend ? 'auto' : 'fixed'}
             dataSource={dataSource.dataList}
             loading={dataSource.loading}

src/pages/resources/components/model-files.tsx

@@ -52,6 +52,7 @@ const ModelFiles = () => {
     dataSource,
     rowSelection,
     queryParams,
+    sortOrder,
     modalRef,
     fetchData,
     handleDelete,
@@ -276,6 +277,7 @@ const ModelFiles = () => {
 
   const columns = useFilesColumns({
     handleSelect,
+    sortOrder,
     workersList
   });
 

src/pages/resources/components/workers.tsx

@@ -36,6 +36,7 @@ const Workers: React.FC = () => {
     queryParams,
     modalRef,
     extraStatus,
+    sortOrder,
     handleDelete,
     handleDeleteBatch,
     fetchData,
@@ -238,6 +239,7 @@ const Workers: React.FC = () => {
     clusterData,
     loadend: dataSource.loadend,
     firstLoad: extraStatus.firstLoad,
+    sortOrder,
     handleSelect
   });
 
@@ -267,6 +269,7 @@ const Workers: React.FC = () => {
         <ConfigProvider renderEmpty={renderEmpty}>
           <Table
             columns={columns}
+            sortDirections={['ascend', 'descend', 'ascend']}
             tableLayout={dataSource.loadend ? 'auto' : 'fixed'}
             style={{ width: '100%' }}
             dataSource={dataSource.dataList}

src/pages/resources/hooks/use-files-columns.tsx

@@ -255,8 +255,12 @@ const getWorkerName = (
 const useFilesColumns = (props: {
   handleSelect: (action: string, record: ListItem) => void;
   workersList: Global.BaseOption<number>[];
+  sortOrder: {
+    order?: 'ascend' | 'descend' | null;
+    columnKey?: string;
+  };
 }): ColumnsType<ListItem> => {
-  const { workersList, handleSelect } = props;
+  const { workersList, sortOrder, handleSelect } = props;
   const intl = useIntl();
 
   return useMemo(() => {
@@ -337,6 +341,10 @@ const useFilesColumns = (props: {
         ellipsis: {
           showTitle: false
         },
+        sortOrder:
+          sortOrder.order && sortOrder.columnKey === 'created_at'
+            ? sortOrder.order
+            : null,
         render: (text: number) => (
           <AutoTooltip ghost minWidth={20}>
             {dayjs(text).format('YYYY-MM-DD HH:mm:ss')}
@@ -355,7 +363,7 @@ const useFilesColumns = (props: {
         )
       }
     ];
-  }, [intl, workersList, handleSelect]);
+  }, [intl, sortOrder, workersList, handleSelect]);
 };
 
 export default useFilesColumns;

src/pages/resources/hooks/use-gpu-columns.tsx

@@ -39,8 +39,12 @@ const useGPUColumns = (props: {
   loadend: boolean;
   firstLoad: boolean;
   clusterList: Global.BaseOption<number>[];
+  sortOrder: {
+    order?: 'ascend' | 'descend' | null;
+    columnKey?: string;
+  };
 }): ColumnsType<GPUDeviceItem> => {
-  const { clusterList, loadend, firstLoad } = props;
+  const { clusterList, loadend, firstLoad, sortOrder } = props;
   const intl = useIntl();
 
   return useMemo(() => {
@@ -49,6 +53,11 @@ const useGPUColumns = (props: {
         title: intl.formatMessage({ id: 'common.table.name' }),
         dataIndex: 'name',
         width: 240,
+        sorter: false,
+        sortOrder:
+          sortOrder.order && sortOrder.columnKey === 'name'
+            ? sortOrder.order
+            : null,
         render: (text: string, record: GPUDeviceItem) => (
           <AutoTooltip ghost maxWidth={240}>
             {text}
@@ -138,7 +147,7 @@ const useGPUColumns = (props: {
         }
       }
     ];
-  }, [intl, clusterList, loadend, firstLoad]);
+  }, [intl, sortOrder, clusterList, loadend, firstLoad]);
 };
 
 export default useGPUColumns;

src/pages/resources/hooks/use-worker-columns.tsx

@@ -212,6 +212,7 @@ const useWorkerColumns = ({
   clusterData,
   loadend,
   firstLoad,
+  sortOrder,
   handleSelect
 }: {
   clusterData: {
@@ -220,6 +221,10 @@ const useWorkerColumns = ({
   };
   loadend: boolean;
   firstLoad: boolean;
+  sortOrder: {
+    order?: 'ascend' | 'descend' | null;
+    columnKey?: string;
+  };
   handleSelect: (action: string, record: ListItem) => void;
 }): ColumnsType<ListItem> => {
   const intl = useIntl();
@@ -230,6 +235,11 @@ const useWorkerColumns = ({
         title: intl.formatMessage({ id: 'common.table.name' }),
         dataIndex: 'name',
         width: 100,
+        sorter: false,
+        sortOrder:
+          sortOrder.order && sortOrder.columnKey === 'name'
+            ? sortOrder.order
+            : null,
         render: (text: string) => (
           <AutoTooltip ghost maxWidth={240}>
             {text}
@@ -352,7 +362,7 @@ const useWorkerColumns = ({
         )
       }
     ],
-    [intl, clusterData, loadend, firstLoad, handleSelect]
+    [intl, sortOrder, clusterData, loadend, firstLoad, handleSelect]
   );
 };
 

src/pages/users/hooks/use-users-columns.tsx

@@ -6,7 +6,6 @@ import icons from '@/components/icon-font/icons';
 import { useIntl, useModel } from '@umijs/max';
 import { useMemoizedFn } from 'ahooks';
 import { Tag } from 'antd';
-import type { SortOrder } from 'antd/es/table/interface';
 import { ColumnsType } from 'antd/lib/table';
 import dayjs from 'dayjs';
 import { useMemo } from 'react';
@@ -14,7 +13,10 @@ import { ListItem } from '../config/types';
 
 interface ColumnsHookProps {
   handleSelect: (val: string, record: ListItem) => void;
-  sortOrder: SortOrder;
+  sortOrder: {
+    order?: 'ascend' | 'descend' | null;
+    columnKey?: string;
+  };
 }
 
 const actionList: Global.ActionItem[] = [
@@ -69,6 +71,12 @@ const useUsersColumns = ({
         title: intl.formatMessage({ id: 'common.table.name' }),
         dataIndex: 'username',
         key: 'username',
+        defaultSortOrder: 'descend',
+        sortOrder:
+          sortOrder.order && sortOrder.columnKey === 'username'
+            ? sortOrder.order
+            : null,
+        sorter: false,
         render: (text: string, record: ListItem) => (
           <AutoTooltip ghost style={{ maxWidth: 400 }}>
             {text}
@@ -177,7 +185,10 @@ const useUsersColumns = ({
         key: 'created_at',
         defaultSortOrder: 'descend',
         showSorterTooltip: false,
-        sortOrder,
+        sortOrder:
+          sortOrder.order && sortOrder.columnKey === 'created_at'
+            ? sortOrder.order
+            : null,
         sorter: false,
         ellipsis: {
           showTitle: false

src/pages/users/index.tsx

@@ -188,6 +188,7 @@ const Users: React.FC = () => {
             dataSource={dataList}
             rowSelection={rowSelection}
             loading={dataSource.loading}
+            sortDirections={['ascend', 'descend', 'ascend']}
             rowKey="id"
             onChange={handleTableChange}
             pagination={{