From b38bc8a2079a67adc3c73f61f3eb88869357d15a Mon Sep 17 00:00:00 2001 From: jialin Date: Thu, 11 Dec 2025 13:30:04 +0800 Subject: [PATCH] fix: table sorter --- src/components/seal-table/styles/header.less | 1 + src/hooks/use-table-fetch.ts | 14 ++++++++++---- src/pages/api-keys/hooks/use-keys-columns.tsx | 11 ++++++++--- src/pages/api-keys/index.tsx | 1 + .../hooks/use-credential-columns.tsx | 10 ++++++++-- src/pages/llmodels/components/table-list.tsx | 14 ++++++++++---- src/pages/llmodels/hooks/use-models-columns.tsx | 15 +++++++++++++-- src/pages/resources/components/gpus.tsx | 3 +++ src/pages/resources/components/model-files.tsx | 2 ++ src/pages/resources/components/workers.tsx | 3 +++ src/pages/resources/hooks/use-files-columns.tsx | 12 ++++++++++-- src/pages/resources/hooks/use-gpu-columns.tsx | 13 +++++++++++-- .../resources/hooks/use-worker-columns.tsx | 12 +++++++++++- src/pages/users/hooks/use-users-columns.tsx | 17 ++++++++++++++--- src/pages/users/index.tsx | 1 + 15 files changed, 106 insertions(+), 23 deletions(-) diff --git a/src/components/seal-table/styles/header.less b/src/components/seal-table/styles/header.less index 9d871fc1..94b566ab 100644 --- a/src/components/seal-table/styles/header.less +++ b/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 { diff --git a/src/hooks/use-table-fetch.ts b/src/hooks/use-table-fetch.ts index 519a4bdb..6ab059cf 100644 --- a/src/hooks/use-table-fetch.ts +++ b/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( const chunkRequedtRef = useRef(null); const modalRef = useRef(null); const rowSelection = useTableRowSelection(); - const { sortOrder, setSortOrder } = useTableSort({ - defaultSortOrder: 'descend' + const [sortOrder, setSortOrder] = useState<{ + order?: 'ascend' | 'descend' | null; + columnKey?: string; + }>({ + order: null, + columnKey: undefined }); // for skeleton loading @@ -235,7 +238,10 @@ export default function useTableFetch( }; const handleTableChange = (pagination: any, filters: any, sorter: any) => { - setSortOrder(sorter.order); + setSortOrder({ + order: sorter.order, + columnKey: sorter.columnKey || sorter.field + }); }; const handleSearch = () => { diff --git a/src/pages/api-keys/hooks/use-keys-columns.tsx b/src/pages/api-keys/hooks/use-keys-columns.tsx index f02c1bf1..0c229a95 100644 --- a/src/pages/api-keys/hooks/use-keys-columns.tsx +++ b/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 diff --git a/src/pages/api-keys/index.tsx b/src/pages/api-keys/index.tsx index 194d09ec..e35f67c4 100644 --- a/src/pages/api-keys/index.tsx +++ b/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={{ diff --git a/src/pages/cluster-management/hooks/use-credential-columns.tsx b/src/pages/cluster-management/hooks/use-credential-columns.tsx index 655debec..7e8294bd 100644 --- a/src/pages/cluster-management/hooks/use-credential-columns.tsx +++ b/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 => { 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 diff --git a/src/pages/llmodels/components/table-list.tsx b/src/pages/llmodels/components/table-list.tsx index 982881ff..30381f72 100644 --- a/src/pages/llmodels/components/table-list.tsx +++ b/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 = ({ removeExpandedRowKey, expandedRowKeys } = useExpandedRowKeys(expandAtom); - const { sortOrder, setSortOrder } = useTableSort({ - defaultSortOrder: 'descend' + const [sortOrder, setSortOrder] = useState<{ + columnKey: string; + order: 'ascend' | 'descend' | null; + }>({ + order: null, + columnKey: '' }); const [apiAccessInfo, setAPIAccessInfo] = useState({ @@ -216,7 +219,10 @@ const Models: React.FC = ({ }; const handleOnSort = (dataIndex: string, order: any) => { - setSortOrder(order); + setSortOrder({ + columnKey: dataIndex, + order: order + }); }; const handleOnCell = useMemoizedFn(async (record: any, extra: any) => { diff --git a/src/pages/llmodels/hooks/use-models-columns.tsx b/src/pages/llmodels/hooks/use-models-columns.tsx index 0b42a891..a33b1115 100644 --- a/src/pages/llmodels/hooks/use-models-columns.tsx +++ b/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) => ( @@ -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) => ( diff --git a/src/pages/resources/components/gpus.tsx b/src/pages/resources/components/gpus.tsx index 3a90b2e1..e5ed21eb 100644 --- a/src/pages/resources/components/gpus.tsx +++ b/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 = () => { { dataSource, rowSelection, queryParams, + sortOrder, modalRef, fetchData, handleDelete, @@ -276,6 +277,7 @@ const ModelFiles = () => { const columns = useFilesColumns({ handleSelect, + sortOrder, workersList }); diff --git a/src/pages/resources/components/workers.tsx b/src/pages/resources/components/workers.tsx index ade364ca..bd82382b 100644 --- a/src/pages/resources/components/workers.tsx +++ b/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 = () => {
void; workersList: Global.BaseOption[]; + sortOrder: { + order?: 'ascend' | 'descend' | null; + columnKey?: string; + }; }): ColumnsType => { - 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) => ( {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; diff --git a/src/pages/resources/hooks/use-gpu-columns.tsx b/src/pages/resources/hooks/use-gpu-columns.tsx index cc92c1cd..a331905e 100644 --- a/src/pages/resources/hooks/use-gpu-columns.tsx +++ b/src/pages/resources/hooks/use-gpu-columns.tsx @@ -39,8 +39,12 @@ const useGPUColumns = (props: { loadend: boolean; firstLoad: boolean; clusterList: Global.BaseOption[]; + sortOrder: { + order?: 'ascend' | 'descend' | null; + columnKey?: string; + }; }): ColumnsType => { - 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) => ( {text} @@ -138,7 +147,7 @@ const useGPUColumns = (props: { } } ]; - }, [intl, clusterList, loadend, firstLoad]); + }, [intl, sortOrder, clusterList, loadend, firstLoad]); }; export default useGPUColumns; diff --git a/src/pages/resources/hooks/use-worker-columns.tsx b/src/pages/resources/hooks/use-worker-columns.tsx index 10b59815..fee8f188 100644 --- a/src/pages/resources/hooks/use-worker-columns.tsx +++ b/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 => { 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) => ( {text} @@ -352,7 +362,7 @@ const useWorkerColumns = ({ ) } ], - [intl, clusterData, loadend, firstLoad, handleSelect] + [intl, sortOrder, clusterData, loadend, firstLoad, handleSelect] ); }; diff --git a/src/pages/users/hooks/use-users-columns.tsx b/src/pages/users/hooks/use-users-columns.tsx index c61b6ab3..4c4b74ec 100644 --- a/src/pages/users/hooks/use-users-columns.tsx +++ b/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) => ( {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 diff --git a/src/pages/users/index.tsx b/src/pages/users/index.tsx index 4716c6b9..9df9faab 100644 --- a/src/pages/users/index.tsx +++ b/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={{