feat(kubepanel): update page and filter.

frontend/providers/kubepanel/src/components/common/panel-table/search-filter.tsx

@@ -5,11 +5,10 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 
 interface SearchFilterPanelProps {
   onSearched: (value: string) => void;
-  onReset: () => void;
   visible: boolean;
 }
 
-function SearchFilterPanel({ onSearched, onReset, visible }: SearchFilterPanelProps) {
+function SearchFilterPanel({ onSearched, visible }: SearchFilterPanelProps) {
   const searchInput = useRef<InputRef>(null);
   const [searchText, setSearchText] = useState('');
 
@@ -66,21 +65,21 @@ function HighlightName({ name, highlight, enable = true }: HighlightNameProps) {
   );
 }
 
-type onFilter<DataType> = Required<ColumnType<DataType>>['onFilter'];
-
 export function useSearchNameFilterProps<DataType>(
   getName: (value: any, data: DataType) => string
-): ColumnType<DataType> {
+): ColumnType<DataType> & { searchText: string; filterFn: (record: DataType) => boolean } {
   const [searchText, setSearchText] = useState('');
   const [searched, setSearched] = useState(false);
   const [visible, setVisible] = useState(false);
 
-  const onFilter = useCallback<onFilter<DataType>>(
-    (value, record) =>
-      getName(null, record)
+  const filterFn = useCallback(
+    (record: DataType) => {
+      if (!searchText) return true;
+      return getName(null, record)
         .toLocaleLowerCase()
-        .includes((value as String).toLocaleLowerCase()),
-    [getName]
+        .includes(searchText.toLocaleLowerCase());
+    },
+    [searchText, getName]
   );
 
   return {
@@ -93,20 +92,15 @@ export function useSearchNameFilterProps<DataType>(
             setSearched(true);
             confirm({ closeDropdown: false });
           }}
-          onReset={() => {
-            setSelectedKeys([]);
-            setSearchText('');
-            setSearched(false);
-            confirm({ closeDropdown: false });
-          }}
           visible={visible}
         />
       );
     },
-    onFilter,
     onFilterDropdownOpenChange: (visible) => setVisible(visible),
     render: (value, data) => (
       <HighlightName name={getName(value, data)} highlight={searchText} enable={searched} />
-    )
+    ),
+    searchText,
+    filterFn
   };
 }

frontend/providers/kubepanel/src/components/common/panel-table/table.tsx

@@ -4,7 +4,7 @@ import { useWatcher } from '@/hooks/useWatcher';
 import { KubeObject } from '@/k8slens/kube-object';
 import { KubeStoreAction } from '@/types/state';
 import { Table, TableProps } from 'antd';
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { PanelPagination } from './pagination';
 import { useSearchNameFilterProps } from './search-filter';
 
@@ -40,36 +40,48 @@ export const PanelTable = <RecordType extends DefaultRecordType, Item extends Ku
   const [selectedItem, setSelectedItem] = useState<Item | null>(null);
   const [openDetail, setOpenDetail] = useState(false);
   const [currentPage, setCurrentPage] = useState(1);
-  const [pageSize, setPageSize] = useState(10);
+  const PAGE_SIZE = 15;
 
   const cxtHolder = useWatcher({ initializers });
   const searchNameFilterProps = useSearchNameFilterProps<RecordType>((_, record) =>
     getDetailItem(record).getName()
   );
 
   const dataSource = useMemo(() => tableProps.dataSource || [], [tableProps.dataSource]);
-  const total = dataSource.length;
 
-  // Calculate current page data
+  // Apply filter based on searchText
+  const filteredData = useMemo(() => {
+    return dataSource.filter(searchNameFilterProps.filterFn);
+  }, [dataSource, searchNameFilterProps.filterFn]);
+
+  const total = filteredData.length;
+
+  // Reset to page 1 when search text changes
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [searchNameFilterProps.searchText]);
+
+  // Calculate current page data after filtering
   const currentData = useMemo(() => {
-    const start = (currentPage - 1) * pageSize;
-    const end = start + pageSize;
-    return dataSource.slice(start, end);
-  }, [dataSource, currentPage, pageSize]);
+    const start = (currentPage - 1) * PAGE_SIZE;
+    const end = start + PAGE_SIZE;
+    return filteredData.slice(start, end);
+  }, [filteredData, currentPage]);
 
-  const modifiedCols = useMemo(
-    () => [
+  const modifiedCols = useMemo(() => {
+    const { searchText, filterFn, ...filterProps } = searchNameFilterProps;
+    return [
       {
         title: 'Name',
         key: 'name',
         className: 'min-w-[150px]',
         ellipsis: true,
-        ...searchNameFilterProps
+        filteredValue: searchText ? [searchText] : [],
+        ...filterProps
       },
       ...columns
-    ],
-    [columns, searchNameFilterProps]
-  );
+    ];
+  }, [columns, searchNameFilterProps]);
 
   return (
     <Section>
@@ -96,7 +108,7 @@ export const PanelTable = <RecordType extends DefaultRecordType, Item extends Ku
         <PanelPagination
           total={total}
           current={currentPage}
-          pageSize={pageSize}
+          pageSize={PAGE_SIZE}
           onChange={(page) => setCurrentPage(page)}
         />
       )}