add sort in list pages

client/src/hooks/Pagination.ts

@@ -1,13 +1,11 @@
 import { useMemo, useState } from 'react';
 import { stableSort, getComparator } from '../utils/Sort';
 
-export const usePaginationHook = (
-  list: any[],
-  orderBy?: string,
-  order?: 'asc' | 'desc'
-) => {
+export const usePaginationHook = (list: any[]) => {
   const [currentPage, setCurrentPage] = useState(0);
   const [pageSize, setPageSize] = useState(10);
+  const [orderBy, setOrderBy] = useState('');
+  const [order, setOrder] = useState<'asc' | 'desc'>('asc');
 
   const total = list.length;
   const { data, offset } = useMemo(() => {
@@ -30,6 +28,11 @@ export const usePaginationHook = (
   const handlePageSize = (size: number) => {
     setPageSize(size);
   };
+  const handleGridSort = (e: any, property: string) => {
+    const isAsc = orderBy === property && order === 'asc';
+    setOrder(isAsc ? 'desc' : 'asc');
+    setOrderBy(property);
+  };
 
   return {
     offset,
@@ -39,5 +42,8 @@ export const usePaginationHook = (
     handleCurrentPage,
     total,
     data,
+    handleGridSort,
+    orderBy,
+    order,
   };
 };

client/src/pages/collections/Collections.tsx

@@ -66,8 +66,6 @@ const Collections = () => {
   const { handleAction } = useLoadAndReleaseDialogHook({ type: 'collection' });
   const { handleInsertDialog } = useInsertDialogHook();
   const [collections, setCollections] = useState<CollectionView[]>([]);
-  const [orderBy, setOrderBy] = useState('');
-  const [order, setOrder] = useState<'asc' | 'desc'>('asc');
 
   const [searchedCollections, setSearchedCollections] = useState<
     CollectionView[]
@@ -79,7 +77,10 @@ const Collections = () => {
     handleCurrentPage,
     total,
     data: collectionList,
-  } = usePaginationHook(searchedCollections, orderBy, order);
+    handleGridSort,
+    order,
+    orderBy,
+  } = usePaginationHook(searchedCollections);
   const [loading, setLoading] = useState<boolean>(true);
   const [selectedCollections, setSelectedCollections] = useState<
     CollectionView[]
@@ -418,12 +419,6 @@ const Collections = () => {
     setSelectedCollections([]);
   };
 
-  const handleGridSort = (e: any, property: string) => {
-    const isAsc = orderBy === property && order === 'asc';
-    setOrder(isAsc ? 'desc' : 'asc');
-    setOrderBy(property);
-  };
-
   const CollectionIcon = icons.navCollection;
 
   return (

client/src/pages/partitions/Partitions.tsx

@@ -76,6 +76,9 @@ const Partitions: FC<{
     handleCurrentPage,
     total,
     data: partitionList,
+    order,
+    orderBy,
+    handleGridSort,
   } = usePaginationHook(searchedPartitions);
   const [loading, setLoading] = useState<boolean>(true);
   const { setDialog, handleCloseDialog, openSnackBar } =
@@ -396,6 +399,9 @@ const Partitions: FC<{
         rowsPerPage={pageSize}
         setRowsPerPage={handlePageSize}
         isLoading={loading}
+        order={order}
+        orderBy={orderBy}
+        handleSort={handleGridSort}
       />
     </section>
   );

client/src/pages/schema/Schema.tsx

@@ -69,6 +69,9 @@ const Schema: FC<{
     handleCurrentPage,
     total,
     data: schemaList,
+    order,
+    orderBy,
+    handleGridSort,
   } = usePaginationHook(fields);
 
   const fetchSchemaListWithIndex = async (
@@ -220,6 +223,9 @@ const Schema: FC<{
         setRowsPerPage={handlePageSize}
         isLoading={loading}
         openCheckBox={false}
+        order={order}
+        orderBy={orderBy}
+        handleSort={handleGridSort}
       />
     </section>
   );

client/src/pages/seach/VectorSearch.tsx

@@ -58,8 +58,9 @@ const VectorSearch = () => {
   // search params disable state
   const [paramDisabled, setParamDisabled] = useState<boolean>(true);
   // use null as init value before search, empty array means no results
-  const [searchResult, setSearchResult] =
-    useState<SearchResultView[] | null>(null);
+  const [searchResult, setSearchResult] = useState<SearchResultView[] | null>(
+    null
+  );
   // default topK is 100
   const [topK, setTopK] = useState<number>(100);
   const [expression, setExpression] = useState<string>('');
@@ -72,6 +73,9 @@ const VectorSearch = () => {
     handleCurrentPage,
     total,
     data: result,
+    order,
+    orderBy,
+    handleGridSort,
   } = usePaginationHook(searchResult || []);
 
   const collectionOptions: Option[] = useMemo(
@@ -482,6 +486,9 @@ const VectorSearch = () => {
           setRowsPerPage={handlePageSize}
           openCheckBox={false}
           isLoading={tableLoading}
+          orderBy={orderBy}
+          order={order}
+          handleSort={handleGridSort}
         />
       ) : (
         <EmptyCard

server/generate-csv.ts

@@ -18,7 +18,7 @@ const generateVector = (dimension) => {
   return JSON.stringify(vectors);
 };
 
-while (records.length < 100000) {
+while (records.length < 3000) {
   const value = generateVector(4);
   records.push({ vector: value });
 }