Feature: use react-table v8

package.json

@@ -27,7 +27,7 @@
     "devDependencies": {
         "@types/lodash-es": "^4.17.6",
         "@types/node": "^17.0.23",
-        "@types/react": "^17.0.42",
+        "@types/react": "^17.0.43",
         "@types/react-dom": "^17.0.14",
         "@types/react-router-dom": "^5.3.3",
         "@types/react-table": "^7.7.10",
@@ -47,7 +47,7 @@
         "eslint-plugin-react-hooks": "^4.3.0",
         "sass": "^1.49.9",
         "type-fest": "^2.12.1",
-        "typescript": "^4.6.2",
+        "typescript": "^4.6.3",
         "vite": "^2.8.6",
         "vite-plugin-pwa": "^0.11.13",
         "vite-plugin-windicss": "^1.8.3",
@@ -55,6 +55,7 @@
         "windicss": "^3.5.1"
     },
     "dependencies": {
+        "@tanstack/react-table": "^8.0.0-alpha.8",
         "axios": "^0.26.1",
         "classnames": "^2.3.1",
         "dayjs": "^1.11.0",
@@ -66,7 +67,6 @@
         "react": "^18.0.0-rc.3",
         "react-dom": "^18.0.0-rc.3",
         "react-router-dom": "^6.2.2",
-        "react-table": "^7.7.0",
         "react-use": "^17.3.2",
         "react-virtualized-auto-sizer": "^1.0.6",
         "react-window": "^1.8.6",

pnpm-lock.yaml

@@ -1,9 +1,10 @@
 lockfileVersion: 5.3
 
 specifiers:
+  '@tanstack/react-table': ^8.0.0-alpha.8
   '@types/lodash-es': ^4.17.6
   '@types/node': ^17.0.23
-  '@types/react': ^17.0.42
+  '@types/react': ^17.0.43
   '@types/react-dom': ^17.0.14
   '@types/react-router-dom': ^5.3.3
   '@types/react-table': ^7.7.10
@@ -32,14 +33,13 @@ specifiers:
   react: ^18.0.0-rc.3
   react-dom: ^18.0.0-rc.3
   react-router-dom: ^6.2.2
-  react-table: ^7.7.0
   react-use: ^17.3.2
   react-virtualized-auto-sizer: ^1.0.6
   react-window: ^1.8.6
   sass: ^1.49.9
   swr: ^1.2.2
   type-fest: ^2.12.1
-  typescript: ^4.6.2
+  typescript: ^4.6.3
   use-immer: ^0.6.0
   vite: ^2.8.6
   vite-plugin-pwa: ^0.11.13
@@ -48,6 +48,7 @@ specifiers:
   windicss: ^3.5.1
 
 dependencies:
+  '@tanstack/react-table': 8.0.0-alpha.8_581fa33d3647c30d8078674dcd1b240a
   axios: 0.26.1
   classnames: 2.3.1
   dayjs: 1.11.0
@@ -59,7 +60,6 @@ dependencies:
   react: 18.0.0-rc.3
   react-dom: 18.0.0-rc.3_react@18.0.0-rc.3
   react-router-dom: 6.2.2_581fa33d3647c30d8078674dcd1b240a
-  react-table: 7.7.0_react@18.0.0-rc.3
   react-use: 17.3.2_581fa33d3647c30d8078674dcd1b240a
   react-virtualized-auto-sizer: 1.0.6_581fa33d3647c30d8078674dcd1b240a
   react-window: 1.8.6_581fa33d3647c30d8078674dcd1b240a
@@ -69,19 +69,19 @@ dependencies:
 devDependencies:
   '@types/lodash-es': 4.17.6
   '@types/node': 17.0.23
-  '@types/react': 17.0.42
+  '@types/react': 17.0.43
   '@types/react-dom': 17.0.14
   '@types/react-router-dom': 5.3.3
   '@types/react-table': 7.7.10
   '@types/react-virtualized-auto-sizer': 1.0.1
   '@types/react-window': 1.8.5
-  '@typescript-eslint/eslint-plugin': 5.16.0_3fed250b11519414a4c7d52468dd6bf5
-  '@typescript-eslint/parser': 5.16.0_eslint@8.11.0+typescript@4.6.2
+  '@typescript-eslint/eslint-plugin': 5.16.0_bc68a9cd5bf604202498b1a9faaf9387
+  '@typescript-eslint/parser': 5.16.0_eslint@8.11.0+typescript@4.6.3
   '@vitejs/plugin-react': 1.2.0
   eslint: 8.11.0
   eslint-config-airbnb: 19.0.4_21dd17da442cb057dd6c2041daee4072
   eslint-config-airbnb-typescript: 16.1.4_199a3777d25e90e3898667ddb95142b1
-  eslint-config-standard-with-typescript: 21.0.1_315c78f51e15e2bcdd46c27787a90888
+  eslint-config-standard-with-typescript: 21.0.1_9af640a1891a7e55dd23a89beb2108f1
   eslint-import-resolver-typescript: 2.7.0_fe22d862ffeecaee86c93a006d59e41e
   eslint-plugin-import: 2.25.4_eslint@8.11.0
   eslint-plugin-node: 11.1.0_eslint@8.11.0
@@ -89,7 +89,7 @@ devDependencies:
   eslint-plugin-react-hooks: 4.3.0_eslint@8.11.0
   sass: 1.49.9
   type-fest: 2.12.1
-  typescript: 4.6.2
+  typescript: 4.6.3
   vite: 2.8.6_sass@1.49.9
   vite-plugin-pwa: 0.11.13_vite@2.8.6
   vite-plugin-windicss: 1.8.3_vite@2.8.6
@@ -1443,6 +1443,18 @@ packages:
       string.prototype.matchall: 4.0.7
     dev: true
 
+  /@tanstack/react-table/8.0.0-alpha.8_581fa33d3647c30d8078674dcd1b240a:
+    resolution: {integrity: sha512-Byp6ScoGxVRLXAWJQm24LbFS5VfYSDJgo7mN4+DuuhBJY88VaWLPcbDcj60OHfxWA+ttUemLJqHEqjlH1ELa9w==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      react: '>=16'
+      react-dom: '>=16'
+    dependencies:
+      react: 18.0.0-rc.3
+      react-dom: 18.0.0-rc.3_react@18.0.0-rc.3
+      use-sync-external-store: 1.0.0-rc.0_react@18.0.0-rc.3
+    dev: false
+
   /@types/estree/0.0.39:
     resolution: {integrity: sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==}
     dev: true
@@ -1484,14 +1496,14 @@ packages:
   /@types/react-dom/17.0.14:
     resolution: {integrity: sha512-H03xwEP1oXmSfl3iobtmQ/2dHF5aBHr8aUMwyGZya6OW45G+xtdzmq6HkncefiBt5JU8DVyaWl/nWZbjZCnzAQ==}
     dependencies:
-      '@types/react': 17.0.42
+      '@types/react': 17.0.43
     dev: true
 
   /@types/react-router-dom/5.3.3:
     resolution: {integrity: sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==}
     dependencies:
       '@types/history': 4.7.11
-      '@types/react': 17.0.42
+      '@types/react': 17.0.43
       '@types/react-router': 5.1.18
     dev: true
 
@@ -1499,29 +1511,29 @@ packages:
     resolution: {integrity: sha512-YYknwy0D0iOwKQgz9v8nOzt2J6l4gouBmDnWqUUznltOTaon+r8US8ky8HvN0tXvc38U9m6z/t2RsVsnd1zM0g==}
     dependencies:
       '@types/history': 4.7.11
-      '@types/react': 17.0.42
+      '@types/react': 17.0.43
     dev: true
 
   /@types/react-table/7.7.10:
     resolution: {integrity: sha512-yt7FHv/2cFsucStSWLBOB3OmsRZF08DvVHzz8Zg41B4tzRL6pQ+5VYvmhaR1dKS//tDG4UOJ1RQJPEINHYoRtg==}
     dependencies:
-      '@types/react': 17.0.42
+      '@types/react': 17.0.43
     dev: true
 
   /@types/react-virtualized-auto-sizer/1.0.1:
     resolution: {integrity: sha512-GH8sAnBEM5GV9LTeiz56r4ZhMOUSrP43tAQNSRVxNexDjcNKLCEtnxusAItg1owFUFE6k0NslV26gqVClVvong==}
     dependencies:
-      '@types/react': 17.0.42
+      '@types/react': 17.0.43
     dev: true
 
   /@types/react-window/1.8.5:
     resolution: {integrity: sha512-V9q3CvhC9Jk9bWBOysPGaWy/Z0lxYcTXLtLipkt2cnRj1JOSFNF7wqGpkScSXMgBwC+fnVRg/7shwgddBG5ICw==}
     dependencies:
-      '@types/react': 17.0.42
+      '@types/react': 17.0.43
     dev: true
 
-  /@types/react/17.0.42:
-    resolution: {integrity: sha512-nuab3x3CpJ7VFeNA+3HTUuEkvClYHXqWtWd7Ud6AZYW7Z3NH9WKtgU+tFB0ZLcHq+niB/HnzLcaZPqMJ95+k5Q==}
+  /@types/react/17.0.43:
+    resolution: {integrity: sha512-8Q+LNpdxf057brvPu1lMtC5Vn7J119xrP1aq4qiaefNioQUYANF/CYeK4NsKorSZyUGJ66g0IM+4bbjwx45o2A==}
     dependencies:
       '@types/prop-types': 15.7.4
       '@types/scheduler': 0.16.2
@@ -1542,7 +1554,7 @@ packages:
     resolution: {integrity: sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==}
     dev: true
 
-  /@typescript-eslint/eslint-plugin/5.16.0_3fed250b11519414a4c7d52468dd6bf5:
+  /@typescript-eslint/eslint-plugin/5.16.0_bc68a9cd5bf604202498b1a9faaf9387:
     resolution: {integrity: sha512-SJoba1edXvQRMmNI505Uo4XmGbxCK9ARQpkvOd00anxzri9RNQk0DDCxD+LIl+jYhkzOJiOMMKYEHnHEODjdCw==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -1553,23 +1565,23 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/parser': 5.16.0_eslint@8.11.0+typescript@4.6.2
+      '@typescript-eslint/parser': 5.16.0_eslint@8.11.0+typescript@4.6.3
       '@typescript-eslint/scope-manager': 5.16.0
-      '@typescript-eslint/type-utils': 5.16.0_eslint@8.11.0+typescript@4.6.2
-      '@typescript-eslint/utils': 5.16.0_eslint@8.11.0+typescript@4.6.2
+      '@typescript-eslint/type-utils': 5.16.0_eslint@8.11.0+typescript@4.6.3
+      '@typescript-eslint/utils': 5.16.0_eslint@8.11.0+typescript@4.6.3
       debug: 4.3.4
       eslint: 8.11.0
       functional-red-black-tree: 1.0.1
       ignore: 5.2.0
       regexpp: 3.2.0
       semver: 7.3.5
-      tsutils: 3.21.0_typescript@4.6.2
-      typescript: 4.6.2
+      tsutils: 3.21.0_typescript@4.6.3
+      typescript: 4.6.3
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@typescript-eslint/parser/4.33.0_eslint@8.11.0+typescript@4.6.2:
+  /@typescript-eslint/parser/4.33.0_eslint@8.11.0+typescript@4.6.3:
     resolution: {integrity: sha512-ZohdsbXadjGBSK0/r+d87X0SBmKzOq4/S5nzK6SBgJspFo9/CUDJ7hjayuze+JK7CZQLDMroqytp7pOcFKTxZA==}
     engines: {node: ^10.12.0 || >=12.0.0}
     peerDependencies:
@@ -1581,15 +1593,15 @@ packages:
     dependencies:
       '@typescript-eslint/scope-manager': 4.33.0
       '@typescript-eslint/types': 4.33.0
-      '@typescript-eslint/typescript-estree': 4.33.0_typescript@4.6.2
+      '@typescript-eslint/typescript-estree': 4.33.0_typescript@4.6.3
       debug: 4.3.4
       eslint: 8.11.0
-      typescript: 4.6.2
+      typescript: 4.6.3
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@typescript-eslint/parser/5.16.0_eslint@8.11.0+typescript@4.6.2:
+  /@typescript-eslint/parser/5.16.0_eslint@8.11.0+typescript@4.6.3:
     resolution: {integrity: sha512-fkDq86F0zl8FicnJtdXakFs4lnuebH6ZADDw6CYQv0UZeIjHvmEw87m9/29nk2Dv5Lmdp0zQ3zDQhiMWQf/GbA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -1601,10 +1613,10 @@ packages:
     dependencies:
       '@typescript-eslint/scope-manager': 5.16.0
       '@typescript-eslint/types': 5.16.0
-      '@typescript-eslint/typescript-estree': 5.16.0_typescript@4.6.2
+      '@typescript-eslint/typescript-estree': 5.16.0_typescript@4.6.3
       debug: 4.3.4
       eslint: 8.11.0
-      typescript: 4.6.2
+      typescript: 4.6.3
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -1625,7 +1637,7 @@ packages:
       '@typescript-eslint/visitor-keys': 5.16.0
     dev: true
 
-  /@typescript-eslint/type-utils/5.16.0_eslint@8.11.0+typescript@4.6.2:
+  /@typescript-eslint/type-utils/5.16.0_eslint@8.11.0+typescript@4.6.3:
     resolution: {integrity: sha512-SKygICv54CCRl1Vq5ewwQUJV/8padIWvPgCxlWPGO/OgQLCijY9G7lDu6H+mqfQtbzDNlVjzVWQmeqbLMBLEwQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -1635,11 +1647,11 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/utils': 5.16.0_eslint@8.11.0+typescript@4.6.2
+      '@typescript-eslint/utils': 5.16.0_eslint@8.11.0+typescript@4.6.3
       debug: 4.3.4
       eslint: 8.11.0
-      tsutils: 3.21.0_typescript@4.6.2
-      typescript: 4.6.2
+      tsutils: 3.21.0_typescript@4.6.3
+      typescript: 4.6.3
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -1654,7 +1666,7 @@ packages:
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: true
 
-  /@typescript-eslint/typescript-estree/4.33.0_typescript@4.6.2:
+  /@typescript-eslint/typescript-estree/4.33.0_typescript@4.6.3:
     resolution: {integrity: sha512-rkWRY1MPFzjwnEVHsxGemDzqqddw2QbTJlICPD9p9I9LfsO8fdmfQPOX3uKfUaGRDFJbfrtm/sXhVXN4E+bzCA==}
     engines: {node: ^10.12.0 || >=12.0.0}
     peerDependencies:
@@ -1669,13 +1681,13 @@ packages:
       globby: 11.1.0
       is-glob: 4.0.3
       semver: 7.3.5
-      tsutils: 3.21.0_typescript@4.6.2
-      typescript: 4.6.2
+      tsutils: 3.21.0_typescript@4.6.3
+      typescript: 4.6.3
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@typescript-eslint/typescript-estree/5.16.0_typescript@4.6.2:
+  /@typescript-eslint/typescript-estree/5.16.0_typescript@4.6.3:
     resolution: {integrity: sha512-SE4VfbLWUZl9MR+ngLSARptUv2E8brY0luCdgmUevU6arZRY/KxYoLI/3V/yxaURR8tLRN7bmZtJdgmzLHI6pQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -1690,13 +1702,13 @@ packages:
       globby: 11.1.0
       is-glob: 4.0.3
       semver: 7.3.5
-      tsutils: 3.21.0_typescript@4.6.2
-      typescript: 4.6.2
+      tsutils: 3.21.0_typescript@4.6.3
+      typescript: 4.6.3
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@typescript-eslint/utils/5.16.0_eslint@8.11.0+typescript@4.6.2:
+  /@typescript-eslint/utils/5.16.0_eslint@8.11.0+typescript@4.6.3:
     resolution: {integrity: sha512-iYej2ER6AwmejLWMWzJIHy3nPJeGDuCqf8Jnb+jAQVoPpmWzwQOfa9hWVB8GIQE5gsCv/rfN4T+AYb/V06WseQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -1705,7 +1717,7 @@ packages:
       '@types/json-schema': 7.0.10
       '@typescript-eslint/scope-manager': 5.16.0
       '@typescript-eslint/types': 5.16.0
-      '@typescript-eslint/typescript-estree': 5.16.0_typescript@4.6.2
+      '@typescript-eslint/typescript-estree': 5.16.0_typescript@4.6.3
       eslint: 8.11.0
       eslint-scope: 5.1.1
       eslint-utils: 3.0.0_eslint@8.11.0
@@ -1764,7 +1776,7 @@ packages:
       debug: 4.3.4
       fast-glob: 3.2.11
       magic-string: 0.25.9
-      micromatch: 4.0.4
+      micromatch: 4.0.5
       windicss: 3.5.1
     transitivePeerDependencies:
       - supports-color
@@ -1949,8 +1961,8 @@ packages:
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
     dependencies:
-      caniuse-lite: 1.0.30001319
-      electron-to-chromium: 1.4.91
+      caniuse-lite: 1.0.30001320
+      electron-to-chromium: 1.4.93
       escalade: 3.1.1
       node-releases: 2.0.2
       picocolors: 1.0.0
@@ -1977,8 +1989,8 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
-  /caniuse-lite/1.0.30001319:
-    resolution: {integrity: sha512-xjlIAFHucBRSMUo1kb5D4LYgcN1M45qdKP++lhqowDpwJwGkpIRTt5qQqnhxjj1vHcI7nrJxWhCC1ATrCEBTcw==}
+  /caniuse-lite/1.0.30001320:
+    resolution: {integrity: sha512-MWPzG54AGdo3nWx7zHZTefseM5Y1ccM7hlQKHRqJkPozUaw3hNbBTMmLn16GG2FUzjR13Cr3NPfhIieX5PzXDA==}
     dev: true
 
   /chalk/2.4.2:
@@ -2179,8 +2191,8 @@ packages:
       jake: 10.8.4
     dev: true
 
-  /electron-to-chromium/1.4.91:
-    resolution: {integrity: sha512-Z7Jkc4+ouEg8F6RrrgLOs0kkJjI0cnyFQmnGVpln8pPifuKBNbUr37GMgJsCTSwy6Z9TK7oTwW33Oe+3aERYew==}
+  /electron-to-chromium/1.4.93:
+    resolution: {integrity: sha512-ywq9Pc5Gwwpv7NG767CtoU8xF3aAUQJjH9//Wy3MBCg4w5JSLbJUq2L8IsCdzPMjvSgxuue9WcVaTOyyxCL0aQ==}
     dev: true
 
   /error-stack-parser/2.0.7:
@@ -2470,8 +2482,8 @@ packages:
       eslint: ^7.32.0 || ^8.2.0
       eslint-plugin-import: ^2.25.3
     dependencies:
-      '@typescript-eslint/eslint-plugin': 5.16.0_3fed250b11519414a4c7d52468dd6bf5
-      '@typescript-eslint/parser': 5.16.0_eslint@8.11.0+typescript@4.6.2
+      '@typescript-eslint/eslint-plugin': 5.16.0_bc68a9cd5bf604202498b1a9faaf9387
+      '@typescript-eslint/parser': 5.16.0_eslint@8.11.0+typescript@4.6.3
       eslint: 8.11.0
       eslint-config-airbnb-base: 15.0.0_fe22d862ffeecaee86c93a006d59e41e
       eslint-plugin-import: 2.25.4_eslint@8.11.0
@@ -2495,7 +2507,7 @@ packages:
       object.entries: 1.1.5
     dev: true
 
-  /eslint-config-standard-with-typescript/21.0.1_315c78f51e15e2bcdd46c27787a90888:
+  /eslint-config-standard-with-typescript/21.0.1_9af640a1891a7e55dd23a89beb2108f1:
     resolution: {integrity: sha512-FeiMHljEJ346Y0I/HpAymNKdrgKEpHpcg/D93FvPHWfCzbT4QyUJba/0FwntZeGLXfUiWDSeKmdJD597d9wwiw==}
     peerDependencies:
       '@typescript-eslint/eslint-plugin': ^4.0.1
@@ -2505,14 +2517,14 @@ packages:
       eslint-plugin-promise: ^4.2.1 || ^5.0.0
       typescript: ^3.9 || ^4.0.0
     dependencies:
-      '@typescript-eslint/eslint-plugin': 5.16.0_3fed250b11519414a4c7d52468dd6bf5
-      '@typescript-eslint/parser': 4.33.0_eslint@8.11.0+typescript@4.6.2
+      '@typescript-eslint/eslint-plugin': 5.16.0_bc68a9cd5bf604202498b1a9faaf9387
+      '@typescript-eslint/parser': 4.33.0_eslint@8.11.0+typescript@4.6.3
       eslint: 8.11.0
       eslint-config-standard: 16.0.3_7dc77a0be22b3241d34262bf15f20ff9
       eslint-plugin-import: 2.25.4_eslint@8.11.0
       eslint-plugin-node: 11.1.0_eslint@8.11.0
       eslint-plugin-promise: 6.0.0_eslint@8.11.0
-      typescript: 4.6.2
+      typescript: 4.6.3
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -2783,7 +2795,7 @@ packages:
       '@nodelib/fs.walk': 1.2.8
       glob-parent: 5.1.2
       merge2: 1.4.1
-      micromatch: 4.0.4
+      micromatch: 4.0.5
     dev: true
 
   /fast-json-stable-stringify/2.1.0:
@@ -3412,8 +3424,8 @@ packages:
     engines: {node: '>= 8'}
     dev: true
 
-  /micromatch/4.0.4:
-    resolution: {integrity: sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==}
+  /micromatch/4.0.5:
+    resolution: {integrity: sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==}
     engines: {node: '>=8.6'}
     dependencies:
       braces: 3.0.2
@@ -3667,14 +3679,6 @@ packages:
       react: 18.0.0-rc.3
     dev: false
 
-  /react-table/7.7.0_react@18.0.0-rc.3:
-    resolution: {integrity: sha512-jBlj70iBwOTvvImsU9t01LjFjy4sXEtclBovl3mTiqjz23Reu0DKnRza4zlLtOPACx6j2/7MrQIthIK1Wi+LIA==}
-    peerDependencies:
-      react: ^16.8.3 || ^17.0.0-0
-    dependencies:
-      react: 18.0.0-rc.3
-    dev: false
-
   /react-universal-interface/0.6.2_react@18.0.0-rc.3+tslib@2.3.1:
     resolution: {integrity: sha512-dg8yXdcQmvgR13RIlZbTRQOoUrDciFVoSBZILwjE2LFISxZZ8loVJKAkuzswl5js8BHda79bIb2b84ehU8IjXw==}
     peerDependencies:
@@ -4195,14 +4199,14 @@ packages:
     resolution: {integrity: sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==}
     dev: false
 
-  /tsutils/3.21.0_typescript@4.6.2:
+  /tsutils/3.21.0_typescript@4.6.3:
     resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==}
     engines: {node: '>= 6'}
     peerDependencies:
       typescript: '>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta'
     dependencies:
       tslib: 1.14.1
-      typescript: 4.6.2
+      typescript: 4.6.3
     dev: true
 
   /type-check/0.4.0:
@@ -4227,8 +4231,8 @@ packages:
     engines: {node: '>=12.20'}
     dev: true
 
-  /typescript/4.6.2:
-    resolution: {integrity: sha512-HM/hFigTBHZhLXshn9sN37H085+hQGeJHJ/X7LpBWLID/fbc2acUMfU+lGD98X81sKP+pFa9f0DZmCwB9GnbAg==}
+  /typescript/4.6.3:
+    resolution: {integrity: sha512-yNIatDa5iaofVozS/uQJEl3JRWLKKGJKh6Yaiv0GLGSuhpFJe7P3SbHZ8/yjAHRQwKRoA6YZqlfjXWmVzoVSMw==}
     engines: {node: '>=4.2.0'}
     hasBin: true
     dev: true
@@ -4298,6 +4302,14 @@ packages:
       react: 18.0.0-rc.3
     dev: false
 
+  /use-sync-external-store/1.0.0-rc.0_react@18.0.0-rc.3:
+    resolution: {integrity: sha512-0U9Xlc2QDFzSGMB0DvcJQL0+DIdxDPJC7mnZlYFbl7wrSrPMcs89X5TVkNB6Dzg618m8lZop+U+J6ow3vq9RAQ==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0-rc
+    dependencies:
+      react: 18.0.0-rc.3
+    dev: false
+
   /v8-compile-cache/2.3.0:
     resolution: {integrity: sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==}
     dev: true
@@ -4312,8 +4324,8 @@ packages:
       pretty-bytes: 5.6.0
       rollup: 2.70.1
       vite: 2.8.6_sass@1.49.9
-      workbox-build: 6.5.1
-      workbox-window: 6.5.1
+      workbox-build: 6.5.2
+      workbox-window: 6.5.2
     transitivePeerDependencies:
       - '@types/babel__core'
       - supports-color
@@ -4413,21 +4425,21 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
-  /workbox-background-sync/6.5.1:
-    resolution: {integrity: sha512-T5a35fagLXQvV8Dr4+bDU+XYsP90jJ3eBLjZMKuCNELMQZNj+VekCODz1QK44jgoBeQk+vp94pkZV6G+e41pgg==}
+  /workbox-background-sync/6.5.2:
+    resolution: {integrity: sha512-EjG37LSMDJ1TFlFg56wx6YXbH4/NkG09B9OHvyxx+cGl2gP5OuOzsCY3rOPJSpbcz6jpuA40VIC3HzSD4OvE1g==}
     dependencies:
       idb: 6.1.5
-      workbox-core: 6.5.1
+      workbox-core: 6.5.2
     dev: true
 
-  /workbox-broadcast-update/6.5.1:
-    resolution: {integrity: sha512-mb/oyblyEpDbw167cCTyHnC3RqCnCQHtFYuYZd+QTpuExxM60qZuBH1AuQCgvLtDcztBKdEYK2VFD9SZYgRbaQ==}
+  /workbox-broadcast-update/6.5.2:
+    resolution: {integrity: sha512-DjJYraYnprTZE/AQNoeogaxI1dPuYmbw+ZJeeP8uXBSbg9SNv5wLYofQgywXeRepv4yr/vglMo9yaHUmBMc+4Q==}
     dependencies:
-      workbox-core: 6.5.1
+      workbox-core: 6.5.2
     dev: true
 
-  /workbox-build/6.5.1:
-    resolution: {integrity: sha512-coDUDzHvFZ1ADOl3wKCsCSyOBvkPKlPgcQDb6LMMShN1zgF31Mev/1HzN3+9T2cjjWAgFwZKkuRyExqc1v21Zw==}
+  /workbox-build/6.5.2:
+    resolution: {integrity: sha512-TVi4Otf6fgwikBeMpXF9n0awHfZTMNu/nwlMIT9W+c13yvxkmDFMPb7vHYK6RUmbcxwPnz4I/R+uL76+JxG4JQ==}
     engines: {node: '>=10.0.0'}
     dependencies:
       '@apideck/better-ajv-errors': 0.3.3_ajv@8.11.0
@@ -4452,111 +4464,111 @@ packages:
       strip-comments: 2.0.1
       tempy: 0.6.0
       upath: 1.2.0
-      workbox-background-sync: 6.5.1
-      workbox-broadcast-update: 6.5.1
-      workbox-cacheable-response: 6.5.1
-      workbox-core: 6.5.1
-      workbox-expiration: 6.5.1
-      workbox-google-analytics: 6.5.1
-      workbox-navigation-preload: 6.5.1
-      workbox-precaching: 6.5.1
-      workbox-range-requests: 6.5.1
-      workbox-recipes: 6.5.1
-      workbox-routing: 6.5.1
-      workbox-strategies: 6.5.1
-      workbox-streams: 6.5.1
-      workbox-sw: 6.5.1
-      workbox-window: 6.5.1
+      workbox-background-sync: 6.5.2
+      workbox-broadcast-update: 6.5.2
+      workbox-cacheable-response: 6.5.2
+      workbox-core: 6.5.2
+      workbox-expiration: 6.5.2
+      workbox-google-analytics: 6.5.2
+      workbox-navigation-preload: 6.5.2
+      workbox-precaching: 6.5.2
+      workbox-range-requests: 6.5.2
+      workbox-recipes: 6.5.2
+      workbox-routing: 6.5.2
+      workbox-strategies: 6.5.2
+      workbox-streams: 6.5.2
+      workbox-sw: 6.5.2
+      workbox-window: 6.5.2
     transitivePeerDependencies:
       - '@types/babel__core'
       - supports-color
     dev: true
 
-  /workbox-cacheable-response/6.5.1:
-    resolution: {integrity: sha512-3TdtH/luDiytmM+Cn72HCBLZXmbeRNJqZx2yaVOfUZhj0IVwZqQXhNarlGE9/k6U5Jelb+TtpH2mLVhnzfiSMg==}
+  /workbox-cacheable-response/6.5.2:
+    resolution: {integrity: sha512-UnHGih6xqloV808T7ve1iNKZMbpML0jGLqkkmyXkJbZc5j16+HRSV61Qrh+tiq3E3yLvFMGJ3AUBODOPNLWpTg==}
     dependencies:
-      workbox-core: 6.5.1
+      workbox-core: 6.5.2
     dev: true
 
-  /workbox-core/6.5.1:
-    resolution: {integrity: sha512-qObXZ39aFJ2N8X7IUbGrJHKWguliCuU1jOXM/I4MTT84u9BiKD2rHMkIzgeRP1Ixu9+cXU4/XHJq3Cy0Qqc5hw==}
+  /workbox-core/6.5.2:
+    resolution: {integrity: sha512-IlxLGQf+wJHCR+NM0UWqDh4xe/Gu6sg2i4tfZk6WIij34IVk9BdOQgi6WvqSHd879jbQIUgL2fBdJUJyAP5ypQ==}
     dev: true
 
-  /workbox-expiration/6.5.1:
-    resolution: {integrity: sha512-iY/cTADAQATMmPkUBRmQdacqq0TJd2wMHimBQz+tRnPGHSMH+/BoLPABPnu7O7rT/g/s59CUYYRGxe3mEgoJCA==}
+  /workbox-expiration/6.5.2:
+    resolution: {integrity: sha512-5Hfp0uxTZJrgTiy9W7AjIIec+9uTOtnxY/tRBm4DbqcWKaWbVTa+izrKzzOT4MXRJJIJUmvRhWw4oo8tpmMouw==}
     dependencies:
       idb: 6.1.5
-      workbox-core: 6.5.1
+      workbox-core: 6.5.2
     dev: true
 
-  /workbox-google-analytics/6.5.1:
-    resolution: {integrity: sha512-qZU46/h4dbionYT6Yk6iBkUwpiEzAfnO1W7KkI+AMmY7G9/gA03dQQ7rpTw8F4vWrG7ahTUGWDFv6fERtaw1BQ==}
+  /workbox-google-analytics/6.5.2:
+    resolution: {integrity: sha512-8SMar+N0xIreP5/2we3dwtN1FUmTMScoopL86aKdXBpio8vXc8Oqb5fCJG32ialjN8BAOzDqx/FnGeCtkIlyvw==}
     dependencies:
-      workbox-background-sync: 6.5.1
-      workbox-core: 6.5.1
-      workbox-routing: 6.5.1
-      workbox-strategies: 6.5.1
+      workbox-background-sync: 6.5.2
+      workbox-core: 6.5.2
+      workbox-routing: 6.5.2
+      workbox-strategies: 6.5.2
     dev: true
 
-  /workbox-navigation-preload/6.5.1:
-    resolution: {integrity: sha512-aKrgAbn2IMgzTowTi/ZyKdQUcES2m++9aGtpxqsX7Gn9ovCY8zcssaMEAMMwrIeveij5HiWNBrmj6MWDHi+0rg==}
+  /workbox-navigation-preload/6.5.2:
+    resolution: {integrity: sha512-iqDNWWMswjCsZuvGFDpcX1Z8InBVAlVBELJ28xShsWWntALzbtr0PXMnm2WHkXCc56JimmGldZi1N5yDPiTPOg==}
     dependencies:
-      workbox-core: 6.5.1
+      workbox-core: 6.5.2
     dev: true
 
-  /workbox-precaching/6.5.1:
-    resolution: {integrity: sha512-EzlPBxvmjGfE56YZzsT/vpVkpLG1XJhoplgXa5RPyVWLUL1LbwEAxhkrENElSS/R9tgiTw80IFwysidfUqLihg==}
+  /workbox-precaching/6.5.2:
+    resolution: {integrity: sha512-OZAlQ8AAT20KugGKKuJMHdQ8X1IyNQaLv+mPTHj+8Dmv8peBq5uWNzs4g/1OSFmXsbXZ6a1CBC6YtQWVPhJQ9w==}
     dependencies:
-      workbox-core: 6.5.1
-      workbox-routing: 6.5.1
-      workbox-strategies: 6.5.1
+      workbox-core: 6.5.2
+      workbox-routing: 6.5.2
+      workbox-strategies: 6.5.2
     dev: true
 
-  /workbox-range-requests/6.5.1:
-    resolution: {integrity: sha512-57Da/qRbd9v33YlHX0rlSUVFmE4THCjKqwkmfhY3tNLnSKN2L5YBS3qhWeDO0IrMNgUj+rGve2moKYXeUqQt4A==}
+  /workbox-range-requests/6.5.2:
+    resolution: {integrity: sha512-zi5VqF1mWqfCyJLTMXn1EuH/E6nisqWDK1VmOJ+TnjxGttaQrseOhMn+BMvULFHeF8AvrQ0ogfQ6bSv0rcfAlg==}
     dependencies:
-      workbox-core: 6.5.1
+      workbox-core: 6.5.2
     dev: true
 
-  /workbox-recipes/6.5.1:
-    resolution: {integrity: sha512-DGsyKygHggcGPQpWafC/Nmbm1Ny3sB2vE9r//3UbeidXiQ+pLF14KEG1/0NNGRaY+lfOXOagq6d1H7SC8KA+rA==}
+  /workbox-recipes/6.5.2:
+    resolution: {integrity: sha512-2lcUKMYDiJKvuvRotOxLjH2z9K7jhj8GNUaHxHNkJYbTCUN3LsX1cWrsgeJFDZ/LgI565t3fntpbG9J415ZBXA==}
     dependencies:
-      workbox-cacheable-response: 6.5.1
-      workbox-core: 6.5.1
-      workbox-expiration: 6.5.1
-      workbox-precaching: 6.5.1
-      workbox-routing: 6.5.1
-      workbox-strategies: 6.5.1
+      workbox-cacheable-response: 6.5.2
+      workbox-core: 6.5.2
+      workbox-expiration: 6.5.2
+      workbox-precaching: 6.5.2
+      workbox-routing: 6.5.2
+      workbox-strategies: 6.5.2
     dev: true
 
-  /workbox-routing/6.5.1:
-    resolution: {integrity: sha512-yAAncdTwanvlR8KPjubyvFKeAok8ZcIws6UKxvIAg0I+wsf7UYi93DXNuZr6RBSQrByrN6HkCyjuhmk8P63+PA==}
+  /workbox-routing/6.5.2:
+    resolution: {integrity: sha512-nR1w5PjF6IVwo0SX3oE88LhmGFmTnqqU7zpGJQQPZiKJfEKgDENQIM9mh3L1ksdFd9Y3CZVkusopHfxQvit/BA==}
     dependencies:
-      workbox-core: 6.5.1
+      workbox-core: 6.5.2
     dev: true
 
-  /workbox-strategies/6.5.1:
-    resolution: {integrity: sha512-JNaTXPy8wXzKkr+6za7/eJX9opoZk7UgY261I2kPxl80XQD8lMjz0vo9EOcBwvD72v3ZhGJbW84ZaDwFEhFvWA==}
+  /workbox-strategies/6.5.2:
+    resolution: {integrity: sha512-fgbwaUMxbG39BHjJIs2y2X21C0bmf1Oq3vMQxJ1hr6y5JMJIm8rvKCcf1EIdAr+PjKdSk4ddmgyBQ4oO8be4Uw==}
     dependencies:
-      workbox-core: 6.5.1
+      workbox-core: 6.5.2
     dev: true
 
-  /workbox-streams/6.5.1:
-    resolution: {integrity: sha512-7jaTWm6HRGJ/ewECnhb+UgjTT50R42E0/uNCC4eTKQwnLO/NzNGjoXTdQgFjo4zteR+L/K6AtFAiYKH3ZJbAYw==}
+  /workbox-streams/6.5.2:
+    resolution: {integrity: sha512-ovD0P4UrgPtZ2Lfc/8E8teb1RqNOSZr+1ZPqLR6sGRZnKZviqKbQC3zVvvkhmOIwhWbpL7bQlWveLVONHjxd5w==}
     dependencies:
-      workbox-core: 6.5.1
-      workbox-routing: 6.5.1
+      workbox-core: 6.5.2
+      workbox-routing: 6.5.2
     dev: true
 
-  /workbox-sw/6.5.1:
-    resolution: {integrity: sha512-hVrQa19yo9wzN1fQQ/h2JlkzFpkuH2qzYT2/rk7CLaWt6tLnTJVFCNHlGRRPhytZSf++LoIy7zThT714sowT/Q==}
+  /workbox-sw/6.5.2:
+    resolution: {integrity: sha512-2KhlYqtkoqlnPdllj2ujXUKRuEFsRDIp6rdE4l1PsxiFHRAFaRTisRQpGvRem5yxgXEr+fcEKiuZUW2r70KZaw==}
     dev: true
 
-  /workbox-window/6.5.1:
-    resolution: {integrity: sha512-oRlun9u7b7YEjo2fIDBqJkU2hXtrEljXcOytRhfeQRbqXxjUOpFgXSGRSAkmDx1MlKUNOSbr+zfi8h5n7In3yA==}
+  /workbox-window/6.5.2:
+    resolution: {integrity: sha512-2kZH37r9Wx8swjEOL4B8uGM53lakMxsKkQ7mOKzGA/QAn/DQTEZGrdHWtypk2tbhKY5S0jvPS+sYDnb2Z3378A==}
     dependencies:
       '@types/trusted-types': 2.0.2
-      workbox-core: 6.5.1
+      workbox-core: 6.5.2
     dev: true
 
   /wrappy/1.0.2:

src/containers/Connections/index.tsx

@@ -1,7 +1,9 @@
+import { columnFilterRowsFn, createTable, sortRowsFn } from '@tanstack/react-table'
+import { type ColumnSort } from '@tanstack/react-table/build/types/features/Sorting'
 import classnames from 'classnames'
+import produce from 'immer'
 import { groupBy } from 'lodash-es'
-import { useMemo, useLayoutEffect, useCallback, useRef, useState, useEffect } from 'react'
-import { Cell, Column, ColumnInstance, TableInstance, TableOptions, useBlockLayout, useFilters, UseFiltersColumnOptions, UseFiltersInstanceProps, UseFiltersOptions, useResizeColumns, UseResizeColumnsColumnProps, UseResizeColumnsOptions, useSortBy, UseSortByColumnOptions, UseSortByColumnProps, UseSortByOptions, useTable } from 'react-table'
+import { useMemo, useLayoutEffect, useRef, useState, useEffect } from 'react'
 import { useLatest, useScroll } from 'react-use'
 
 import { Header, Checkbox, Modal, Icon, Drawer, Card, Button } from '@components'
@@ -9,7 +11,7 @@ import { fromNow } from '@lib/date'
 import { formatTraffic } from '@lib/helper'
 import { useObject, useVisible } from '@lib/hook'
 import * as API from '@lib/request'
-import { RuleType } from '@models'
+import { BaseComponentProps, RuleType } from '@models'
 import { useClient, useConnectionStreamReader, useI18n } from '@stores'
 
 import { Devices } from './Devices'
@@ -32,26 +34,6 @@ enum Columns {
 
 const shouldCenter = new Set<string>([Columns.Network, Columns.Type, Columns.Rule, Columns.Speed, Columns.Upload, Columns.Download, Columns.SourceIP, Columns.Time])
 
-interface TableColumn<D extends object> extends
-    ColumnInstance<D>,
-    UseSortByColumnProps<D>,
-    UseResizeColumnsColumnProps<D> {}
-
-type TableColumnOption<D extends object> =
-    Column<D> &
-    UseResizeColumnsOptions<D> &
-    UseFiltersColumnOptions<D> &
-    UseSortByColumnOptions<D>
-
-interface ITableOptions<D extends object> extends
-    TableOptions<D>,
-    UseSortByOptions<D>,
-    UseFiltersOptions<D> {}
-
-interface ITableInstance<D extends object> extends
-    TableInstance<D>,
-    UseFiltersInstanceProps<D> {}
-
 function formatSpeed (upload: number, download: number) {
     switch (true) {
         case upload === 0 && download === 0:
@@ -65,6 +47,8 @@ function formatSpeed (upload: number, download: number) {
     }
 }
 
+const table = createTable().RowType<FormatConnection>()
+
 export default function Connections () {
     const { translation, lang } = useI18n()
     const t = useMemo(() => translation('Connections').t, [translation])
@@ -113,34 +97,47 @@ export default function Connections () {
     // table
     const tableRef = useRef<HTMLDivElement>(null)
     const { x: scrollX } = useScroll(tableRef)
-    const columns: Array<TableColumnOption<FormatConnection>> = useMemo(() => [
-        { Header: t(`columns.${Columns.Host}`), accessor: Columns.Host, minWidth: 260, width: 260 },
-        { Header: t(`columns.${Columns.Network}`), accessor: Columns.Network, minWidth: 80, width: 80 },
-        { Header: t(`columns.${Columns.Type}`), accessor: Columns.Type, minWidth: 120, width: 120 },
-        { Header: t(`columns.${Columns.Chains}`), accessor: Columns.Chains, minWidth: 200, width: 200 },
-        { Header: t(`columns.${Columns.Rule}`), accessor: Columns.Rule, minWidth: 140, width: 140 },
-        {
-            id: Columns.Speed,
-            Header: t(`columns.${Columns.Speed}`),
-            accessor (originalRow: FormatConnection) {
-                return [originalRow.speed.upload, originalRow.speed.download]
-            },
-            sortType (rowA, rowB) {
-                const speedA = rowA.original.speed
-                const speedB = rowB.original.speed
-                return speedA.download === speedB.download
-                    ? speedA.upload - speedB.upload
-                    : speedA.download - speedB.download
-            },
-            minWidth: 200,
-            width: 200,
-            sortDescFirst: true,
-        },
-        { Header: t(`columns.${Columns.Upload}`), accessor: Columns.Upload, minWidth: 100, width: 100, sortDescFirst: true },
-        { Header: t(`columns.${Columns.Download}`), accessor: Columns.Download, minWidth: 100, width: 100, sortDescFirst: true },
-        { Header: t(`columns.${Columns.SourceIP}`), accessor: Columns.SourceIP, minWidth: 140, width: 140, filter: 'equals' },
-        { Header: t(`columns.${Columns.Time}`), accessor: Columns.Time, minWidth: 120, width: 120, sortType (rowA, rowB) { return rowB.original.time - rowA.original.time } },
-    ] as Array<TableColumnOption<FormatConnection>>, [t])
+    const columns = useMemo(
+        () => table.createColumns([
+            table.createDataColumn(Columns.Host, { minWidth: 260, width: 260, header: t(`columns.${Columns.Host}`) }),
+            table.createDataColumn(Columns.Network, { minWidth: 80, width: 80, header: t(`columns.${Columns.Network}`) }),
+            table.createDataColumn(Columns.Type, { minWidth: 120, width: 120, header: t(`columns.${Columns.Type}`) }),
+            table.createDataColumn(Columns.Chains, { minWidth: 200, width: 200, header: t(`columns.${Columns.Chains}`) }),
+            table.createDataColumn(Columns.Rule, { minWidth: 140, width: 140, header: t(`columns.${Columns.Rule}`) }),
+            table.createDataColumn(
+                row => [row.speed.upload, row.speed.download],
+                {
+                    id: Columns.Speed,
+                    header: t(`columns.${Columns.Speed}`),
+                    minWidth: 200,
+                    width: 200,
+                    sortDescFirst: true,
+                    sortType (rowA, rowB) {
+                        const speedA = rowA.original.speed
+                        const speedB = rowB.original.speed
+                        return speedA.download === speedB.download
+                            ? speedA.upload - speedB.upload
+                            : speedA.download - speedB.download
+                    },
+                    cell: cell => formatSpeed(cell.value[0], cell.value[1]),
+                },
+            ),
+            table.createDataColumn(Columns.Upload, { minWidth: 100, width: 100, header: t(`columns.${Columns.Upload}`), cell: cell => formatTraffic(cell.value) }),
+            table.createDataColumn(Columns.Download, { minWidth: 100, width: 100, header: t(`columns.${Columns.Download}`), cell: cell => formatTraffic(cell.value) }),
+            table.createDataColumn(Columns.SourceIP, { minWidth: 140, width: 140, header: t(`columns.${Columns.SourceIP}`), filterType: 'equals' }),
+            table.createDataColumn(
+                Columns.Time,
+                {
+                    minWidth:
+                    120,
+                    width: 120,
+                    header: t(`columns.${Columns.Time}`),
+                    cell: cell => fromNow(new Date(cell.value), lang),
+                    sortType: (rowA, rowB) => rowB.original.time - rowA.original.time,
+                }),
+        ]),
+        [lang, t],
+    )
 
     useLayoutEffect(() => {
         function handleConnection (snapshots: API.Snapshot[]) {
@@ -161,46 +158,27 @@ export default function Connections () {
         }
     }, [connStreamReader, feed, setTraffic])
 
-    const {
-        getTableProps,
-        getTableBodyProps,
-        headerGroups,
-        rows,
-        prepareRow,
-        setFilter,
-    } = useTable(
-        {
-            columns,
-            data,
-            autoResetSortBy: false,
-            autoResetFilters: false,
-            initialState: { sortBy: [{ id: Columns.Time, desc: false }] },
-        } as ITableOptions<FormatConnection>,
-        useResizeColumns,
-        useBlockLayout,
-        useFilters,
-        useSortBy,
-    ) as ITableInstance<FormatConnection>
-    const headerGroup = useMemo(() => headerGroups[0], [headerGroups])
-    const renderCell = useCallback(function (cell: Cell<FormatConnection>) {
-        switch (cell.column.id) {
-            case Columns.Speed:
-                return formatSpeed(cell.value[0], cell.value[1])
-            case Columns.Upload:
-            case Columns.Download:
-                return formatTraffic(cell.value)
-            case Columns.Time:
-                return fromNow(new Date(cell.value), lang)
-            default:
-                return cell.value
-        }
-    }, [lang])
+    const instance = table.useTable({
+        data,
+        columns,
+        sortRowsFn,
+        columnFilterRowsFn,
+        initialState: {
+            sorting: [{ id: Columns.Time, desc: true }],
+        },
+        columnResizeMode: 'onChange',
+        enableColumnResizing: true,
+        autoResetSorting: false,
+        autoResetColumnFilters: false,
+    })
+
+    const headerGroup = instance.getHeaderGroups()[0]
 
     // filter
     const [device, setDevice] = useState('')
     function handleDeviceSelected (label: string) {
         setDevice(label)
-        setFilter?.(Columns.SourceIP, label || undefined)
+        instance.setColumnFilterValue(Columns.SourceIP, label || undefined)
     }
 
     // click item
@@ -229,67 +207,76 @@ export default function Connections () {
     }, [data, drawerState.selectedID, latestConntion, setDrawerState])
 
     const scrolled = useMemo(() => scrollX > 0, [scrollX])
-    const headers = useMemo(() => headerGroup.headers.map((column, idx) => {
-        const realColumn = column as unknown as TableColumn<FormatConnection>
-        const id = realColumn.id
+    const headers = headerGroup.headers.map((header, idx) => {
+        const column = header.column // as unknown as TableColumn<FormatConnection>
+        const id = column.id
         return (
-            <div
-                {...realColumn.getHeaderProps()}
-                className={classnames('connections-th', {
-                    resizing: realColumn.isResizing,
-                    fixed: realColumn.id === Columns.Host,
-                    shadow: scrolled && realColumn.id === Columns.Host,
-                })}
+            <th
+                {...header.getHeaderProps(
+                    (props: BaseComponentProps) => produce(props, props => {
+                        props.className = classnames('connections-th', {
+                            resizing: column.getIsResizing(),
+                            fixed: column.id === Columns.Host,
+                            shadow: scrolled && column.id === Columns.Host,
+                        })
+                        !props.style && (props.style = {})
+                        props.style.width = header.getWidth()
+                    }),
+                )}
                 key={id}>
-                <div {...realColumn.getSortByToggleProps()}>
-                    {column.render('Header')}
+                <div {...column.getToggleSortingProps()}>
+                    {header.renderHeader()}
                     {
-                        realColumn.isSorted
-                            ? realColumn.isSortedDesc ? ' ↓' : ' ↑'
+                        column.getIsSorted() !== false
+                            ? column.getIsSorted() === 'desc' ? ' ↓' : ' ↑'
                             : null
                     }
                 </div>
                 { idx !== headerGroup.headers.length - 1 &&
-                    <div {...realColumn.getResizerProps()} className="connections-resizer" />
+                    <div {...column.getResizerProps()} className="connections-resizer" />
                 }
-            </div>
+            </th>
         )
-    }), [headerGroup.headers, scrolled])
+    })
 
-    const content = useMemo(
-        () => rows.map(row => {
-            prepareRow(row)
-            return (
-                <div
-                    {...row.getRowProps()}
-                    className="cursor-default connections-item select-none"
-                    key={row.original.id}
-                    onClick={() => setDrawerState({ visible: true, selectedID: row.original.id })}>
-                    {
-                        row.cells.map(cell => {
-                            const classname = classnames(
-                                'connections-block',
-                                { 'text-center': shouldCenter.has(cell.column.id), completed: row.original.completed },
-                                {
-                                    fixed: cell.column.id === Columns.Host,
-                                    shadow: scrollX > 0 && cell.column.id === Columns.Host,
-                                },
-                            )
-                            return (
-                                <div {...cell.getCellProps()} className={classname} key={cell.column.id}>
-                                    { renderCell(cell)}
-                                </div>
-                            )
-                        })
-                    }
-                </div>
-            )
-        }),
-        [prepareRow, renderCell, rows, scrollX, setDrawerState],
-    )
+    const content = instance.getRows().map(row => {
+        return (
+            <tr
+                {...row.getRowProps()}
+                className="cursor-default select-none"
+                key={row.original?.id}
+                onClick={() => setDrawerState({ visible: true, selectedID: row.original?.id })}>
+                {
+                    row.getAllCells().map(cell => {
+                        const classname = classnames(
+                            'connections-block',
+                            { 'text-center': shouldCenter.has(cell.column.id), completed: row.original?.completed },
+                            {
+                                fixed: cell.column.id === Columns.Host,
+                                shadow: scrollX > 0 && cell.column.id === Columns.Host,
+                            },
+                        )
+                        return (
+                            <td
+                                {...cell.getCellProps(
+                                    (props: BaseComponentProps) => produce(props, props => {
+                                        !props.style && (props.style = {})
+                                        props.className = classname
+                                        props.style.width = cell.column.getWidth()
+                                    }),
+                                )}
+                                key={cell.column.id}>
+                                { cell.renderCell() }
+                            </td>
+                        )
+                    })
+                }
+            </tr>
+        )
+    })
 
     return (
-        <div className="page">
+        <div className="page !h-100vh">
             <Header title={t('title')}>
                 <span className="cursor-default flex-1 connections-filter">
                     {`(${t('total.text')}: ${t('total.upload')} ${formatTraffic(traffic.uploadTotal)} ${t('total.download')} ${formatTraffic(traffic.downloadTotal)})`}
@@ -299,14 +286,18 @@ export default function Connections () {
             </Header>
             { devices.length > 1 && <Devices devices={devices} selected={device} onChange={handleDeviceSelected} /> }
             <Card ref={cardRef} className="connections-card relative">
-                <div {...getTableProps()} className="flex flex-col flex-1 w-full overflow-auto" style={{ flexBasis: 0 }} ref={tableRef}>
-                    <div {...headerGroup.getHeaderGroupProps()} className="connections-header">
-                        { headers }
-                    </div>
+                <div className="overflow-auto min-h-full" ref={tableRef}>
+                    <table {...instance.getTableProps()} className="flex-1">
+                        <thead>
+                            <tr {...headerGroup.getHeaderGroupProps()} className="connections-header">
+                                { headers }
+                            </tr>
+                        </thead>
 
-                    <div {...getTableBodyProps()} className="flex-1">
-                        { content }
-                    </div>
+                        <tbody {...instance.getTableBodyProps()}>
+                            { content }
+                        </tbody>
+                    </table>
                 </div>
             </Card>
             <Modal title={t('closeAll.title')} show={visible} onClose={hide} onOk={handleCloseConnections}>{t('closeAll.content')}</Modal>

src/containers/Connections/style.scss

@@ -1,6 +1,5 @@
 .connections-card {
     display: flex;
-    flex-direction: column;
     flex: 1;
     margin-top: 10px;
     padding: 0;
@@ -9,6 +8,7 @@
     .connections-th {
         $height: 30px;
 
+        display: inline-block;
         position: relative;
         text-align: center;
         color: $color-gray-darken;
@@ -19,9 +19,11 @@
         font-size: 14px;
         cursor: pointer;
         user-select: none;
+        -webkit-user-select: none;
 
         &.resizing .connections-resizer {
             opacity: 1;
+            cursor: col-resize;
         }
 
         &.fixed {
@@ -49,6 +51,7 @@
         font-size: 14px;
         font-weight: 300;
         touch-action: none;
+        cursor: col-resize;
 
         &::before {
             content: '';
@@ -74,8 +77,7 @@
     }
 
     .connections-block {
-        display: flex;
-        align-items: center;
+        display: inline-block;
         font-size: 14px;
         line-height: 36px;
         padding: 0 10px;