feat: table list sorter

src/pages/cluster-management/clusters.tsx

@@ -4,7 +4,9 @@ import IconFont from '@/components/icon-font';
 import { FilterBar } from '@/components/page-tools';
 import SealTable from '@/components/seal-table';
 import TableContext from '@/components/seal-table/table-context';
+import { TableOrder } from '@/components/seal-table/types';
 import { PageAction } from '@/config';
+import { TABLE_SORT_DIRECTIONS } from '@/config/settings';
 import type { PageActionType } from '@/config/types';
 import useExpandedRowKeys from '@/hooks/use-expanded-row-keys';
 import useTableFetch from '@/hooks/use-table-fetch';
@@ -54,6 +56,7 @@ const Clusters: React.FC = () => {
     rowSelection,
     queryParams,
     modalRef,
+    handleTableChange,
     handleDelete,
     handleDeleteBatch,
     fetchData,
@@ -65,7 +68,10 @@ const Clusters: React.FC = () => {
     deleteAPI: deleteCluster,
     watch: true,
     API: CLUSTERS_API,
-    contentForDelete: 'menu.clusterManagement.clusters'
+    contentForDelete: 'menu.clusterManagement.clusters',
+    defaultQueryParams: {
+      sort_by: '-created_at'
+    }
   });
   const { watchDataList: allWorkerPoolList } = useWatchList(WORKER_POOLS_API);
   const [expandAtom] = useAtom(expandKeysAtom);
@@ -227,6 +233,10 @@ const Clusters: React.FC = () => {
     }
   );
 
+  const handleOnSortChange = (order: TableOrder | Array<TableOrder>) => {
+    handleTableChange({}, {}, order);
+  };
+
   const setDisableExpand = (row: ClusterListItem) => {
     return (
       row.provider !== ProviderValueMap.DigitalOcean ||
@@ -314,10 +324,12 @@ const Clusters: React.FC = () => {
           <SealTable
             rowKey="id"
             loadChildren={getWorkerPoolList}
+            sortDirections={TABLE_SORT_DIRECTIONS}
             expandedRowKeys={expandedRowKeys}
             onExpand={handleExpandChange}
             onExpandAll={handleToggleExpandAll}
             renderChildren={renderChildren}
+            onTableSort={handleOnSortChange}
             dataSource={dataSource.dataList}
             loading={dataSource.loading}
             loadend={dataSource.loadend}

src/pages/cluster-management/credentials.tsx

@@ -58,7 +58,10 @@ const Credentials: React.FC = () => {
   } = useTableFetch<ListItem>({
     fetchAPI: queryCredentialList,
     deleteAPI: deleteCredential,
-    contentForDelete: 'menu.clusterManagement.credentials'
+    contentForDelete: 'menu.clusterManagement.credentials',
+    defaultQueryParams: {
+      sort_by: '-created_at'
+    }
   });
   const [isFromCluster, setIsFromCluster] = useAtom(fromClusterCreationAtom);
   const intl = useIntl();

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

@@ -33,6 +33,9 @@ const useClusterColumns = (
       {
         title: intl.formatMessage({ id: 'common.table.name' }),
         dataIndex: 'name',
+        sorter: {
+          multiple: 1
+        },
         span: 3,
         render: (text: string, record: ClusterListItem) => (
           <AutoTooltip ghost>{text}</AutoTooltip>
@@ -41,6 +44,9 @@ const useClusterColumns = (
       {
         title: intl.formatMessage({ id: 'clusters.table.provider' }),
         dataIndex: 'provider',
+        sorter: {
+          multiple: 2
+        },
         span: 4,
         render: (value: string) => (
           <AutoTooltip ghost minWidth={20}>
@@ -86,6 +92,10 @@ const useClusterColumns = (
       {
         title: intl.formatMessage({ id: 'common.table.createTime' }),
         dataIndex: 'created_at',
+        defaultSortOrder: 'descend',
+        sorter: {
+          multiple: 5
+        },
         span: 4,
         render: (value: string) => (
           <AutoTooltip ghost minWidth={20}>

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

@@ -23,6 +23,9 @@ const useCredentialColumns = (
       {
         title: intl.formatMessage({ id: 'common.table.name' }),
         dataIndex: 'name',
+        sorter: {
+          multiple: 1
+        },
         render: (text: string) => (
           <AutoTooltip ghost minWidth={20}>
             {text}
@@ -32,6 +35,7 @@ const useCredentialColumns = (
       {
         title: intl.formatMessage({ id: 'clusters.table.provider' }),
         dataIndex: 'provider',
+        sorter: false,
         render: (value: string) => <span>{ProviderLabelMap[value]}</span>
       },
       {
@@ -39,11 +43,9 @@ const useCredentialColumns = (
         dataIndex: 'created_at',
         showSorterTooltip: false,
         defaultSortOrder: 'descend',
-        sortOrder:
-          sortOrder.order && sortOrder.columnKey === 'created_at'
-            ? sortOrder.order
-            : null,
-        sorter: false,
+        sorter: {
+          multiple: 3
+        },
         ellipsis: {
           showTitle: false
         },