feat: store sort state

MetaCubeX · Jun 23, 2024 · d0ca56c · d0ca56c
1 parent b541d18
commit d0ca56c
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 8 deletions.
diff --git a/src/components/ConnectionTable.tsx b/src/components/ConnectionTable.tsx
@@ -23,13 +23,15 @@ const sortById = { id: 'id', desc: true };
 function Table({ data, columns, hiddenColumns, apiConfig }) {
   const [operationId, setOperationId] = useState('');
   const [showModalDisconnect, setShowModalDisconnect] = useState(false);
+
+  // 从本地存储加载排序状态
+  const savedSortBy = JSON.parse(localStorage.getItem('tableSortBy')) || [sortById];
+
   const tableState = {
-    sortBy: [
-      // maintain a more stable order
-      sortById,
-    ],
+    sortBy: savedSortBy,
     hiddenColumns,
   };
+
   const table = useTable(
     {
       columns,
@@ -41,10 +43,12 @@ function Table({ data, columns, hiddenColumns, apiConfig }) {
   );
 
   const { getTableProps, setHiddenColumns, headerGroups, rows, prepareRow } = table;
+  const state = table.state;
 
   useEffect(() => {
     setHiddenColumns(hiddenColumns);
   }, [setHiddenColumns, hiddenColumns]);
+
   const { t, i18n } = useTranslation();
 
   let locale: Locale;
@@ -67,10 +71,7 @@ function Table({ data, columns, hiddenColumns, apiConfig }) {
     setShowModalDisconnect(true);
   };
 
-  const renderCell = (
-    cell: { column: { id: string }; row: { original: { id: string } }; value: number },
-    locale: Locale
-  ) => {
+  const renderCell = (cell, locale) => {
     switch (cell.column.id) {
       case 'ctrl':
         return (
@@ -92,6 +93,11 @@ function Table({ data, columns, hiddenColumns, apiConfig }) {
     }
   };
 
+  // 当排序状态改变时，将新状态保存到本地存储
+  useEffect(() => {
+    localStorage.setItem('tableSortBy', JSON.stringify(state.sortBy));
+  }, [state.sortBy]);
+
   return (
     <div style={{ marginTop: '5px' }}>
       <table {...getTableProps()} className={cx(s.table, 'connections-table')}>

diff --git a/src/custom.d.ts b/src/custom.d.ts
@@ -60,6 +60,7 @@ declare module 'react-table' {
     options: TableOptions,
     useSortBy: useSortBy
   ): {
+    state: any;
     headerGroups: HeaderGroup[];
     getTableProps(): { role?: string };
     setHiddenColumns: (columns: string[]) => void;