fix: table sorter

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]
   );
 };