Wire controlled column filters and clear-filters button

buildTableColumns now attaches antd controlled filter props (via buildColumnFilterProps) to columns marked filterable; filters state is controlled via Table onChange. A 'clear filters' button in the search bar resets all filters and is disabled when none are active. Filters and row lock reset on search/clear. Also renames the component module table-filters.tsx -> table-filter-ui.tsx to avoid a same-base-name resolution collision with the logic module table-filters.ts. Co-Authored-By: Claude <noreply@anthropic.com>
Add per-column filterable flag with persistence and settings toggle
2026-06-18 09:52:51 +08:00 · 2026-06-18 09:47:46 +08:00 · 2026-06-18 09:46:25 +08:00 · 2026-06-18 09:44:52 +08:00 · 2026-06-18 09:42:18 +08:00
8 changed files with 1220 additions and 14 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -28,7 +28,8 @@
        "eslint": "^9",
        "eslint-config-next": "16.2.9",
        "tailwindcss": "^4",
-        "typescript": "^5"
+        "typescript": "^5",
+        "vitest": "^4.1.9"
      }
    },
    "node_modules/@alloc/quick-lru": {
@@ -1690,6 +1691,16 @@
        "node": ">=12.4.0"
      }
    },
+    "node_modules/@oxc-project/types": {
+      "version": "0.133.0",
+      "resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.133.0.tgz",
+      "integrity": "sha512-KzkdCd6Uxqnf6l3HOw1xfatAlUURA0g14cvBYFyJ5SaNOQbOUvBr9PKArcPcrNIeRsBdgcUzOGrhKveVpvOIGA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/Boshen"
+      }
+    },
    "node_modules/@rc-component/async-validator": {
      "version": "5.1.1",
      "resolved": "https://registry.npmmirror.com/@rc-component/async-validator/-/async-validator-5.1.1.tgz",
@@ -2393,6 +2404,304 @@
        "react-dom": ">=18.0.0"
      }
    },
+    "node_modules/@rolldown/binding-android-arm64": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.0.3.tgz",
+      "integrity": "sha512-454rs7jHngixp/NMxd5srYD57OnzSlZ/eFTETjORQHLwJG1lRtmNOJcBerZlfu4GjKqeq8aCCIQrMdHyhI51Hw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-darwin-arm64": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-arm64/-/binding-darwin-arm64-1.0.3.tgz",
+      "integrity": "sha512-PcAhP+ynjURNyy8SKGl5DQP94aGuB/7JrXJb/t7P+hanXvQVMWzUvRRhBAcg/lNRadBhoUPqSoP4xw5tR/KBEA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-darwin-x64": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-x64/-/binding-darwin-x64-1.0.3.tgz",
+      "integrity": "sha512-9YpfeUvSE2RS7wysJ81uOZkXJz7f7Q55H2Gvp3VEw/EsahqDtrphrZ0EwDLK5vvKOzaCrBsjF8JmnMLcUt78Gg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-freebsd-x64": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-freebsd-x64/-/binding-freebsd-x64-1.0.3.tgz",
+      "integrity": "sha512-yB1IlAsSNHncV6SCTL27/MVGR5htvQsoGxIv5KMGXALp+Ll1wYsn+x98M9MW7qa+NdSbvrrY7ANI4wLJ0n1e6g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm-gnueabihf": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.0.3.tgz",
+      "integrity": "sha512-Yi30IVAAfLUCy2MseFjbB1jAMDl1VMCAas5StnYp8da9+CKvMd2H2cbEjWcw5NPaPqzvYkVIaF1nNUG+b7u/sw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm64-gnu": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.0.3.tgz",
+      "integrity": "sha512-jsO7R8To+AdlYgUmN5sHSCZbfhtMBkO0WUx8iORQnPcMMdgr7qM2DQmMwgabs3GhNztdmoKkMKQFHD6DTMCIQw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm64-musl": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.0.3.tgz",
+      "integrity": "sha512-VWkUHwWriDciit80wleYwKILoR/KMvxh/IdwS/paX+ZgpuRpCrKLUdadJbc0NpBEiyhpYawsJ73j9aCvOH+f7Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-ppc64-gnu": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-1.0.3.tgz",
+      "integrity": "sha512-5f1laC0SlIR0yDbFCd8acUhvJIag6N3zC5P7oUPN6wX0aOma+uKJ0wBDH5aq7I1PVI2ttTlhJwzwRIBnLiSGEg==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-s390x-gnu": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-1.0.3.tgz",
+      "integrity": "sha512-Iq4ko0r4XsgbrF/LunNgHtAGLRRVE2kXonAXQ/MV0mC6jQpMOhW1SvtZja2EhC/kd05++bP78dsqBeIQyYJ6Yg==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-x64-gnu": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.0.3.tgz",
+      "integrity": "sha512-B8m6tD5+/N5FeNQFbKlLA/2yVq9ycQP1SeedyEYYKWBNR3ZQbkvIUcNnDNM03lO1l5F2roiiFJGgvoLLyZXtSg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-x64-musl": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-musl/-/binding-linux-x64-musl-1.0.3.tgz",
+      "integrity": "sha512-pSdpdUJHkuCxun9LE7jvgUB9qsRgaiyNNCX7m/AvHTcq67AiT/Yhoxvw5zPfhrM8k/BfP8ce/hMOpthKDpEUow==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-openharmony-arm64": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-openharmony-arm64/-/binding-openharmony-arm64-1.0.3.tgz",
+      "integrity": "sha512-OXXS3RKJgX2uLwM+gYyuH5omcH8fL1LJs96pZGgtetVCahON57+d4SJHzTgZiOjxgGkSnpXpOsWuPDGAKAigEg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-wasm32-wasi": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-wasm32-wasi/-/binding-wasm32-wasi-1.0.3.tgz",
+      "integrity": "sha512-JTtb8BWFynicNSoPrehsCzBtOKjZ6jhMiPFEmOiuXg1Fl8dn2KHQob+GuPSGR0dryQa1PQJbzjF3dqO/whhjLg==",
+      "cpu": [
+        "wasm32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "1.10.0",
+        "@emnapi/runtime": "1.10.0",
+        "@napi-rs/wasm-runtime": "^1.1.4"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-wasm32-wasi/node_modules/@emnapi/core": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.10.0.tgz",
+      "integrity": "sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/wasi-threads": "1.2.1",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@rolldown/binding-wasm32-wasi/node_modules/@emnapi/runtime": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.10.0.tgz",
+      "integrity": "sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@rolldown/binding-wasm32-wasi/node_modules/@emnapi/wasi-threads": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.1.tgz",
+      "integrity": "sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@rolldown/binding-win32-arm64-msvc": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.0.3.tgz",
+      "integrity": "sha512-gEdFFEN70A/jxb2svrWsN3aDL7OUtmvlOy+6fa2jxG8K0wQ1ZbdeLGnidov6Yu5/733dI5ySfzFlQ/cb0bSz1g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-win32-x64-msvc": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.0.3.tgz",
+      "integrity": "sha512-eXB7CHuaQdqmJcc3koCNtNPmT/bj2gc999kUFgBxG8Ac0NdgXc4rkCHhqrgrhN3zddvvvrgzj1e90SuSfmyIXA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/pluginutils": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.1.tgz",
+      "integrity": "sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw==",
+      "dev": true,
+      "license": "MIT"
+    },
    "node_modules/@rtsao/scc": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
@@ -2400,6 +2709,13 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/@standard-schema/spec": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
+      "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
+      "dev": true,
+      "license": "MIT"
+    },
    "node_modules/@swc/helpers": {
      "version": "0.5.15",
      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
@@ -2697,6 +3013,24 @@
        "tslib": "^2.4.0"
      }
    },
+    "node_modules/@types/chai": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/@types/chai/-/chai-5.2.3.tgz",
+      "integrity": "sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/deep-eql": "*",
+        "assertion-error": "^2.0.1"
+      }
+    },
+    "node_modules/@types/deep-eql": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@types/deep-eql/-/deep-eql-4.0.2.tgz",
+      "integrity": "sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==",
+      "dev": true,
+      "license": "MIT"
+    },
    "node_modules/@types/estree": {
      "version": "1.0.9",
      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.9.tgz",
@@ -3426,6 +3760,119 @@
        "win32"
      ]
    },
+    "node_modules/@vitest/expect": {
+      "version": "4.1.9",
+      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-4.1.9.tgz",
+      "integrity": "sha512-vl/rYsUKcBr3SnQn166+XR5ZQcgMx3DQhFWdfli/cWpLnLUmbxZvyrJZotLFUryib+LtArYMSTJ5RbQ57ZqrlA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@standard-schema/spec": "^1.1.0",
+        "@types/chai": "^5.2.2",
+        "@vitest/spy": "4.1.9",
+        "@vitest/utils": "4.1.9",
+        "chai": "^6.2.2",
+        "tinyrainbow": "^3.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/mocker": {
+      "version": "4.1.9",
+      "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-4.1.9.tgz",
+      "integrity": "sha512-EVkXzBjrPGM+cK8/ANWgBrkUCfJfb38/EfTSO8h7pWvKkyPkpWxvR7BkD2MyItMF62C97zAEoqdpUixwR/e+Rw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/spy": "4.1.9",
+        "estree-walker": "^3.0.3",
+        "magic-string": "^0.30.21"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "msw": "^2.4.9",
+        "vite": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "msw": {
+          "optional": true
+        },
+        "vite": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vitest/pretty-format": {
+      "version": "4.1.9",
+      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-4.1.9.tgz",
+      "integrity": "sha512-s0iufns3iIFitdgm+YR7g1whCAaGtXz459VS9/PqyKDEEFgYIhsHOQmXgIgDuYCt7DeQmiZT0Qe2OA2p4ZPu5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tinyrainbow": "^3.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/runner": {
+      "version": "4.1.9",
+      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-4.1.9.tgz",
+      "integrity": "sha512-KXLMDtc7oe70+3mJfGrPUWPesswH+3sTxAMAMl8DG7I8IUQT4XW718dY5ID3vPUcmlu27CcKfY4P3h3I29SLJg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/utils": "4.1.9",
+        "pathe": "^2.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/snapshot": {
+      "version": "4.1.9",
+      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-4.1.9.tgz",
+      "integrity": "sha512-Jc7RKGNBo8Z28WYIm0Niej4xdSPByRf6mU58VpHQkd6Zh05rlnA+twjbK5HyeIGHxrzsc3mJgS43uM0CZKzaIA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/pretty-format": "4.1.9",
+        "@vitest/utils": "4.1.9",
+        "magic-string": "^0.30.21",
+        "pathe": "^2.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/spy": {
+      "version": "4.1.9",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-4.1.9.tgz",
+      "integrity": "sha512-fHpsS6mIi+PiEW+vcRVOMkX1oSaPKne3VOclSFICPcGOmfKgXPU5iAah+wcNcj2xPrCCmfq99IDGf+EojhhvhA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/utils": {
+      "version": "4.1.9",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-4.1.9.tgz",
+      "integrity": "sha512-A51o8ymO5PpqlWNnBP9ZHPXDIpuMtTLlGSjN7la4US+LJzoUMyhwjA5QXlm39JexgwHKW4Xjs8Z2d3dLCXOeuA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/pretty-format": "4.1.9",
+        "convert-source-map": "^2.0.0",
+        "tinyrainbow": "^3.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
    "node_modules/abort-controller": {
      "version": "3.0.0",
      "resolved": "https://registry.npmmirror.com/abort-controller/-/abort-controller-3.0.0.tgz",
@@ -3833,6 +4280,16 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/assertion-error": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz",
+      "integrity": "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      }
+    },
    "node_modules/ast-types-flow": {
      "version": "0.0.8",
      "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.8.tgz",
@@ -4179,6 +4636,16 @@
      ],
      "license": "CC-BY-4.0"
    },
+    "node_modules/chai": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/chai/-/chai-6.2.2.tgz",
+      "integrity": "sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
    "node_modules/chainsaw": {
      "version": "0.1.0",
      "resolved": "https://registry.npmjs.org/chainsaw/-/chainsaw-0.1.0.tgz",
@@ -4780,6 +5247,13 @@
        "node": ">= 0.4"
      }
    },
+    "node_modules/es-module-lexer": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-2.1.0.tgz",
+      "integrity": "sha512-n27zTYMjYu1aj4MjCWzSP7G9r75utsaoc8m61weK+W8JMBGGQybd43GstCXZ3WNmSFtGT9wi59qQTW6mhTR5LQ==",
+      "dev": true,
+      "license": "MIT"
+    },
    "node_modules/es-object-atoms": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.2.tgz",
@@ -5261,6 +5735,16 @@
        "node": ">=4.0"
      }
    },
+    "node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      }
+    },
    "node_modules/esutils": {
      "version": "2.0.3",
      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
@@ -5323,6 +5807,16 @@
        "node": ">= 6"
      }
    },
+    "node_modules/expect-type": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/expect-type/-/expect-type-1.3.0.tgz",
+      "integrity": "sha512-knvyeauYhqjOYvQ66MznSMs83wmHrCycNEN6Ao+2AeYEfxUIkuiVxdEa1qlGEPK+We3n0THiDciYSsCcgW/DoA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
    "node_modules/fast-csv": {
      "version": "4.3.6",
      "resolved": "https://registry.npmjs.org/fast-csv/-/fast-csv-4.3.6.tgz",
@@ -5489,6 +5983,21 @@
      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
      "license": "ISC"
    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
    "node_modules/fstream": {
      "version": "1.0.12",
      "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.12.tgz",
@@ -7603,6 +8112,20 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/obug": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/obug/-/obug-2.1.3.tgz",
+      "integrity": "sha512-9miFgM2OFba7hB+pRgvtV84pYTBaoTHohvmIgiRt6dRIzbwEOIaNaP+dIlGs2fNFoB0SeISs0Jz5WFVRid6Xyg==",
+      "dev": true,
+      "funding": [
+        "https://github.com/sponsors/sxzz",
+        "https://opencollective.com/debug"
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
    "node_modules/once": {
      "version": "1.4.0",
      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -7753,6 +8276,13 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/pathe": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
+      "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
+      "dev": true,
+      "license": "MIT"
+    },
    "node_modules/picocolors": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -8067,6 +8597,40 @@
        "rimraf": "bin.js"
      }
    },
+    "node_modules/rolldown": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.0.3.tgz",
+      "integrity": "sha512-i00lAJ2ks1BYr7rjNjKC7BcqAS7nVfiT3QX1SI5aY+AFHblCmaUf9OE9dbdzDvW6dJxbi2ZCZiy9v3CcwOiX3g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@oxc-project/types": "=0.133.0",
+        "@rolldown/pluginutils": "^1.0.0"
+      },
+      "bin": {
+        "rolldown": "bin/cli.mjs"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "optionalDependencies": {
+        "@rolldown/binding-android-arm64": "1.0.3",
+        "@rolldown/binding-darwin-arm64": "1.0.3",
+        "@rolldown/binding-darwin-x64": "1.0.3",
+        "@rolldown/binding-freebsd-x64": "1.0.3",
+        "@rolldown/binding-linux-arm-gnueabihf": "1.0.3",
+        "@rolldown/binding-linux-arm64-gnu": "1.0.3",
+        "@rolldown/binding-linux-arm64-musl": "1.0.3",
+        "@rolldown/binding-linux-ppc64-gnu": "1.0.3",
+        "@rolldown/binding-linux-s390x-gnu": "1.0.3",
+        "@rolldown/binding-linux-x64-gnu": "1.0.3",
+        "@rolldown/binding-linux-x64-musl": "1.0.3",
+        "@rolldown/binding-openharmony-arm64": "1.0.3",
+        "@rolldown/binding-wasm32-wasi": "1.0.3",
+        "@rolldown/binding-win32-arm64-msvc": "1.0.3",
+        "@rolldown/binding-win32-x64-msvc": "1.0.3"
+      }
+    },
    "node_modules/run-applescript": {
      "version": "7.1.0",
      "resolved": "https://registry.npmmirror.com/run-applescript/-/run-applescript-7.1.0.tgz",
@@ -8433,6 +8997,13 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/siginfo": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/siginfo/-/siginfo-2.0.0.tgz",
+      "integrity": "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==",
+      "dev": true,
+      "license": "ISC"
+    },
    "node_modules/source-map-js": {
      "version": "1.2.1",
      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -8455,6 +9026,20 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/stackback": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
+      "integrity": "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/std-env": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/std-env/-/std-env-4.1.0.tgz",
+      "integrity": "sha512-Rq7ybcX2RuC55r9oaPVEW7/xu3tj8u4GeBYHBWCychFtzMIr86A7e3PPEBPT37sHStKX3+TiX/Fr/ACmJLVlLQ==",
+      "dev": true,
+      "license": "MIT"
+    },
    "node_modules/stop-iteration-iterator": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.1.0.tgz",
@@ -8801,6 +9386,23 @@
        "node": ">=12.22"
      }
    },
+    "node_modules/tinybench": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",
+      "integrity": "sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tinyexec": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-1.2.4.tgz",
+      "integrity": "sha512-SHf/r48b7vOrjve9PxJo3MN5v5yuyjHvdUcrQffT3WXMUfnGmHDVbC4k3sHJaJTgZCwpUplIaAo5ANtMyp3YHg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
    "node_modules/tinyglobby": {
      "version": "0.2.17",
      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz",
@@ -8850,6 +9452,16 @@
        "url": "https://github.com/sponsors/jonschlinkert"
      }
    },
+    "node_modules/tinyrainbow": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/tinyrainbow/-/tinyrainbow-3.1.0.tgz",
+      "integrity": "sha512-Bf+ILmBgretUrdJxzXM0SgXLZ3XfiaUuOj/IKQHuTXip+05Xn+uyEYdVg0kYDipTBcLrCVyUzAPz7QmArb0mmw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
    "node_modules/tmp": {
      "version": "0.2.7",
      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.7.tgz",
@@ -9230,6 +9842,200 @@
        "uuid": "dist/bin/uuid"
      }
    },
+    "node_modules/vite": {
+      "version": "8.0.16",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-8.0.16.tgz",
+      "integrity": "sha512-h9bXPmJichP5fLmVQo3PyaGSDE2n3aPuomeAlVRm0JLmt4rY6zmPKd59HYI4LNW8oTK7tlTsuC7l/m7awx9Jcw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "lightningcss": "^1.32.0",
+        "picomatch": "^4.0.4",
+        "postcss": "^8.5.15",
+        "rolldown": "1.0.3",
+        "tinyglobby": "^0.2.17"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^20.19.0 || >=22.12.0",
+        "@vitejs/devtools": "^0.1.18",
+        "esbuild": "^0.27.0 || ^0.28.0",
+        "jiti": ">=1.21.0",
+        "less": "^4.0.0",
+        "sass": "^1.70.0",
+        "sass-embedded": "^1.70.0",
+        "stylus": ">=0.54.8",
+        "sugarss": "^5.0.0",
+        "terser": "^5.16.0",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "@vitejs/devtools": {
+          "optional": true
+        },
+        "esbuild": {
+          "optional": true
+        },
+        "jiti": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vite/node_modules/picomatch": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
+      "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/vitest": {
+      "version": "4.1.9",
+      "resolved": "https://registry.npmjs.org/vitest/-/vitest-4.1.9.tgz",
+      "integrity": "sha512-nE3/LEyc0z87uHYLZebqCUOaJr2hdtuPp7BQ4BosVFnfltxgAvMG08NyrSGlPpOUWvR27c5flSmYFTNr78L9GQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/expect": "4.1.9",
+        "@vitest/mocker": "4.1.9",
+        "@vitest/pretty-format": "4.1.9",
+        "@vitest/runner": "4.1.9",
+        "@vitest/snapshot": "4.1.9",
+        "@vitest/spy": "4.1.9",
+        "@vitest/utils": "4.1.9",
+        "es-module-lexer": "^2.0.0",
+        "expect-type": "^1.3.0",
+        "magic-string": "^0.30.21",
+        "obug": "^2.1.1",
+        "pathe": "^2.0.3",
+        "picomatch": "^4.0.3",
+        "std-env": "^4.0.0-rc.1",
+        "tinybench": "^2.9.0",
+        "tinyexec": "^1.0.2",
+        "tinyglobby": "^0.2.15",
+        "tinyrainbow": "^3.1.0",
+        "vite": "^6.0.0 || ^7.0.0 || ^8.0.0",
+        "why-is-node-running": "^2.3.0"
+      },
+      "bin": {
+        "vitest": "vitest.mjs"
+      },
+      "engines": {
+        "node": "^20.0.0 || ^22.0.0 || >=24.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "@edge-runtime/vm": "*",
+        "@opentelemetry/api": "^1.9.0",
+        "@types/node": "^20.0.0 || ^22.0.0 || >=24.0.0",
+        "@vitest/browser-playwright": "4.1.9",
+        "@vitest/browser-preview": "4.1.9",
+        "@vitest/browser-webdriverio": "4.1.9",
+        "@vitest/coverage-istanbul": "4.1.9",
+        "@vitest/coverage-v8": "4.1.9",
+        "@vitest/ui": "4.1.9",
+        "happy-dom": "*",
+        "jsdom": "*",
+        "vite": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@edge-runtime/vm": {
+          "optional": true
+        },
+        "@opentelemetry/api": {
+          "optional": true
+        },
+        "@types/node": {
+          "optional": true
+        },
+        "@vitest/browser-playwright": {
+          "optional": true
+        },
+        "@vitest/browser-preview": {
+          "optional": true
+        },
+        "@vitest/browser-webdriverio": {
+          "optional": true
+        },
+        "@vitest/coverage-istanbul": {
+          "optional": true
+        },
+        "@vitest/coverage-v8": {
+          "optional": true
+        },
+        "@vitest/ui": {
+          "optional": true
+        },
+        "happy-dom": {
+          "optional": true
+        },
+        "jsdom": {
+          "optional": true
+        },
+        "vite": {
+          "optional": false
+        }
+      }
+    },
+    "node_modules/vitest/node_modules/picomatch": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
+      "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
    "node_modules/which": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -9335,6 +10141,23 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/why-is-node-running": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.3.0.tgz",
+      "integrity": "sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "siginfo": "^2.0.0",
+        "stackback": "0.0.2"
+      },
+      "bin": {
+        "why-is-node-running": "cli.js"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/word-wrap": {
      "version": "1.2.5",
      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
--- a/package.json
+++ b/package.json
@@ -6,7 +6,9 @@
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
-    "lint": "eslint"
+    "lint": "eslint",
+    "test": "vitest run",
+    "test:watch": "vitest"
  },
  "dependencies": {
    "@ant-design/icons": "^6.2.5",
@@ -29,6 +31,7 @@
    "eslint": "^9",
    "eslint-config-next": "16.2.9",
    "tailwindcss": "^4",
-    "typescript": "^5"
+    "typescript": "^5",
+    "vitest": "^4.1.9"
  }
 }
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -6,3 +6,8 @@ body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
 }
+
+/* 行高亮：点击锁定的整行（覆盖 antd 单元格背景，含固定列） */
+.ant-table-tbody > tr.row-locked > td {
+  background: #fff7e6 !important;
+}
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -14,7 +14,14 @@ import {
  Checkbox,
  AutoComplete,
 } from "antd";
-import { SearchOutlined, SettingOutlined, HolderOutlined, ClockCircleOutlined, DownloadOutlined } from "@ant-design/icons";
+import {
+  SearchOutlined,
+  SettingOutlined,
+  HolderOutlined,
+  ClockCircleOutlined,
+  DownloadOutlined,
+  FilterOutlined,
+} from "@ant-design/icons";
 import type { ColumnsType } from "antd/es/table";
 import {
  DndContext,
@@ -31,16 +38,15 @@ import {
  arrayMove,
 } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
+import { nextLockedRow, type DataRow } from "./table-filters";
+import { buildColumnFilterProps } from "./table-filter-ui";

 const { Title, Text } = Typography;

-interface DataRow {
-  [key: string]: string | number | null;
-}
-
 interface ColumnConfig {
  key: string;
  visible: boolean;
+  filterable: boolean;
 }

 const COLUMN_DEFS: { key: string; width: number }[] = [
@@ -105,6 +111,7 @@ const COLUMN_DEFS: { key: string; width: number }[] = [
 const DEFAULT_CONFIG: ColumnConfig[] = COLUMN_DEFS.map((d) => ({
  key: d.key,
  visible: true,
+  filterable: false,
 }));

 const STORAGE_KEY = "web-table-column-config";
@@ -113,9 +120,15 @@ function loadConfig(): ColumnConfig[] {
  try {
    const saved = localStorage.getItem(STORAGE_KEY);
    if (saved) {
-      const parsed: ColumnConfig[] = JSON.parse(saved);
+      const parsed = JSON.parse(saved) as Partial<ColumnConfig>[];
      const savedKeys = new Set(parsed.map((c) => c.key));
-      if (COLUMN_DEFS.every((d) => savedKeys.has(d.key))) return parsed;
+      if (COLUMN_DEFS.every((d) => savedKeys.has(d.key))) {
+        return parsed.map((c) => ({
+          key: c.key!,
+          visible: !!c.visible,
+          filterable: !!c.filterable, // 旧配置缺该字段时按 false
+        }));
+      }
    }
  } catch {
    /* ignore */
@@ -129,14 +142,16 @@ function saveConfig(config: ColumnConfig[]) {

 function buildTableColumns(
  config: ColumnConfig[],
-  dataColumns: string[]
+  dataColumns: string[],
+  data: DataRow[],
+  filters: Record<string, React.Key[]>
 ): ColumnsType<DataRow> {
  const available = new Set(dataColumns);
  return config
    .filter((c) => c.visible && available.has(c.key))
    .map((c) => {
      const def = COLUMN_DEFS.find((d) => d.key === c.key);
-      return {
+      const base = {
        title: c.key,
        dataIndex: c.key,
        key: c.key,
@@ -145,6 +160,9 @@ function buildTableColumns(
        render: (val: string | number | null) =>
          val === null || val === undefined ? "" : String(val),
      };
+      return c.filterable
+        ? { ...base, ...buildColumnFilterProps(c.key, data, filters[c.key] ?? null) }
+        : base;
    });
 }

@@ -154,12 +172,16 @@ function SortableRow({
  id,
  label,
  visible,
+  filterable,
  onToggle,
+  onToggleFilter,
 }: {
  id: string;
  label: string;
  visible: boolean;
+  filterable: boolean;
  onToggle: () => void;
+  onToggleFilter: () => void;
 }) {
  const {
    attributes,
@@ -191,6 +213,14 @@ function SortableRow({
        <HolderOutlined />
      </span>
      <Checkbox checked={visible} onChange={onToggle} style={{ flexShrink: 0 }} />
+      <Button
+        size="small"
+        type={filterable ? "primary" : "default"}
+        icon={<FilterOutlined />}
+        onClick={onToggleFilter}
+        title={filterable ? "已设为可筛选，点击取消" : "设为可筛选"}
+        style={{ flexShrink: 0, padding: "0 6px" }}
+      />
      <span style={{ userSelect: "none" }}>{label}</span>
    </div>
  );
@@ -243,6 +273,12 @@ function ColumnSettingsModal({
    );
  };

+  const toggleFilter = (key: string) => {
+    setLocal((prev) =>
+      prev.map((c) => (c.key === key ? { ...c, filterable: !c.filterable } : c))
+    );
+  };
+
  const selectAll = () => setLocal((prev) => prev.map((c) => ({ ...c, visible: true })));
  const deselectAll = () => setLocal((prev) => prev.map((c) => ({ ...c, visible: false })));
  const resetDefault = () => setLocal(DEFAULT_CONFIG.map((c) => ({ ...c })));
@@ -291,7 +327,9 @@ function ColumnSettingsModal({
                id={c.key}
                label={c.key}
                visible={c.visible}
+                filterable={c.filterable}
                onToggle={() => toggle(c.key)}
+                onToggleFilter={() => toggleFilter(c.key)}
              />
            ))}
          </SortableContext>
@@ -335,6 +373,8 @@ function SearchBar({
  onOpenColumnSettings,
  exporting,
  onExport,
+  hasActiveFilters,
+  onClearFilters,
 }: {
  loading: boolean;
  resultCount: number;
@@ -344,6 +384,8 @@ function SearchBar({
  onOpenColumnSettings: () => void;
  exporting: boolean;
  onExport: () => void;
+  hasActiveFilters: boolean;
+  onClearFilters: () => void;
 }) {
  const [inputValue, setInputValue] = useState("");
  const [history, setHistory] = useState<string[]>(() => loadHistory());
@@ -429,6 +471,13 @@ function SearchBar({
        >
          导出全部
        </Button>
+        <Button
+          icon={<FilterOutlined />}
+          onClick={onClearFilters}
+          disabled={!hasActiveFilters}
+        >
+          清除筛选
+        </Button>
      </Space>
      {searched && !loading && (
        <Text type="secondary" style={{ marginLeft: 16 }}>
@@ -450,6 +499,8 @@ export default function Home() {
  const [columnConfig, setColumnConfig] = useState<ColumnConfig[]>(loadConfig);
  const [modalOpen, setModalOpen] = useState(false);
  const [exporting, setExporting] = useState(false);
+  const [lockedRowKey, setLockedRowKey] = useState<string | null>(null);
+  const [filters, setFilters] = useState<Record<string, React.Key[]>>({});

  // Persist config
  useEffect(() => {
@@ -471,6 +522,8 @@ export default function Home() {
      setColumns(json.columns);
      setData(json.data);
      setSearched(true);
+      setLockedRowKey(null);
+      setFilters({});
    } catch {
      setError("网络请求失败");
    } finally {
@@ -483,6 +536,8 @@ export default function Home() {
    setColumns([]);
    setSearched(false);
    setError(null);
+    setLockedRowKey(null);
+    setFilters({});
  }, []);

  const handleExport = useCallback(async () => {
@@ -516,9 +571,14 @@ export default function Home() {
  }, []);

  const tableColumns = useMemo(
-    () => buildTableColumns(columnConfig, columns),
-    [columnConfig, columns]
+    () => buildTableColumns(columnConfig, columns, data, filters),
+    [columnConfig, columns, data, filters]
  );
+  const hasActiveFilters = useMemo(
+    () => Object.values(filters).some((arr) => arr && arr.length > 0),
+    [filters]
+  );
+  const clearFilters = useCallback(() => setFilters({}), []);
  const totalWidth = useMemo(
    () => tableColumns.reduce((sum, col) => sum + (col.width as number), 0),
    [tableColumns]
@@ -539,6 +599,8 @@ export default function Home() {
        onOpenColumnSettings={() => setModalOpen(true)}
        exporting={exporting}
        onExport={handleExport}
+        hasActiveFilters={hasActiveFilters}
+        onClearFilters={clearFilters}
      />

      <div style={{ flex: 1, minHeight: 0 }}>
@@ -582,6 +644,16 @@ export default function Home() {
            columns={tableColumns}
            dataSource={data}
            rowKey="ID"
+            onRow={(record) => ({
+              onClick: () =>
+                setLockedRowKey((prev) => nextLockedRow(prev, String(record.ID))),
+            })}
+            rowClassName={(record) =>
+              String(record.ID) === lockedRowKey ? "row-locked" : ""
+            }
+            onChange={(_pagination, tableFilters) =>
+              setFilters(tableFilters as Record<string, React.Key[]>)
+            }
            bordered
            size="small"
            pagination={false}
--- a/src/app/table-filter-ui.tsx
+++ b/src/app/table-filter-ui.tsx
@@ -0,0 +1,139 @@
+"use client";
+
+import { Button, Input, Checkbox, DatePicker, Space } from "antd";
+import dayjs from "dayjs";
+import type { ColumnType } from "antd/es/table";
+import type { FilterDropdownProps } from "antd/es/table/interface";
+import { inferFilterType, distinctValues, matchesFilter } from "./table-filters";
+import type { DataRow, FilterType } from "./table-filters";
+
+const DATE_FMT = "YYYY-MM-DD";
+
+/** 解析受控 selectedKeys 里的 "start|end" 编码为 RangePicker 值。 */
+function decodeRange(keys: React.Key[]): [dayjs.Dayjs | null, dayjs.Dayjs | null] {
+  const raw = keys[0] != null ? String(keys[0]) : "";
+  const sep = raw.indexOf("|");
+  if (sep < 0) return [null, null];
+  const s = raw.slice(0, sep);
+  const e = raw.slice(sep + 1);
+  return [s ? dayjs(s, DATE_FMT) : null, e ? dayjs(e, DATE_FMT) : null];
+}
+
+export function FilterDropdown({
+  type,
+  distinct,
+  setSelectedKeys,
+  selectedKeys,
+  confirm,
+  clearFilters,
+}: FilterDropdownProps & {
+  type: FilterType;
+  distinct: string[];
+}): React.ReactElement {
+  if (type === "date") {
+    const [start, end] = decodeRange(selectedKeys);
+    return (
+      <div style={{ padding: 8 }}>
+        <DatePicker.RangePicker
+          value={[start, end]}
+          onChange={(dates) => {
+            if (!dates || dates[0] == null || dates[1] == null) {
+              setSelectedKeys([]);
+            } else {
+              const s = dates[0].format(DATE_FMT);
+              const e = dates[1].format(DATE_FMT);
+              setSelectedKeys([`${s}|${e}`]); // 单个编码键，供 onFilter 解码
+            }
+          }}
+        />
+        <Space style={{ marginTop: 8, display: "flex", justifyContent: "flex-end" }}>
+          <Button
+            size="small"
+            onClick={() => {
+              clearFilters?.();
+              confirm();
+            }}
+          >
+            重置
+          </Button>
+          <Button type="primary" size="small" onClick={() => confirm()}>
+            确定
+          </Button>
+        </Space>
+      </div>
+    );
+  }
+
+  if (type === "category") {
+    return (
+      <div style={{ padding: 8, maxWidth: 260 }}>
+        <Checkbox.Group
+          style={{ display: "flex", flexDirection: "column", maxHeight: 240, overflow: "auto" }}
+          value={(selectedKeys as string[]) ?? []}
+          onChange={(vals) => setSelectedKeys(vals as React.Key[])}
+          options={distinct}
+        />
+        <Space style={{ marginTop: 8, display: "flex", justifyContent: "flex-end" }}>
+          <Button
+            size="small"
+            onClick={() => {
+              clearFilters?.();
+              confirm();
+            }}
+          >
+            重置
+          </Button>
+          <Button type="primary" size="small" onClick={() => confirm()}>
+            确定
+          </Button>
+        </Space>
+      </div>
+    );
+  }
+
+  // text
+  const textValue = selectedKeys[0] != null ? String(selectedKeys[0]) : "";
+  return (
+    <div style={{ padding: 8 }}>
+      <Input
+        placeholder="输入关键字"
+        value={textValue}
+        onChange={(e) => setSelectedKeys(e.target.value ? [e.target.value] : [])}
+        onPressEnter={() => confirm()}
+        style={{ marginBottom: 8, display: "block" }}
+        allowClear
+      />
+      <Space style={{ display: "flex", justifyContent: "flex-end" }}>
+        <Button
+          size="small"
+          onClick={() => {
+            clearFilters?.();
+            confirm();
+          }}
+        >
+          重置
+        </Button>
+        <Button type="primary" size="small" onClick={() => confirm()}>
+          确定
+        </Button>
+      </Space>
+    </div>
+  );
+}
+
+/** 为某列构造 antd 受控筛选属性（filterDropdown / onFilter / filteredValue）。 */
+export function buildColumnFilterProps(
+  key: string,
+  data: DataRow[],
+  filteredValue: React.Key[] | null
+): Partial<ColumnType<DataRow>> {
+  const type = inferFilterType(key, data);
+  const distinct = type === "category" ? distinctValues(key, data) : [];
+  return {
+    filterDropdown: (props) => (
+      <FilterDropdown type={type} distinct={distinct} {...props} />
+    ),
+    onFilter: (value, record) => matchesFilter(type, record[key], String(value)),
+    filteredValue: filteredValue ?? null,
+  };
+}
--- a/src/app/table-filters.test.ts
+++ b/src/app/table-filters.test.ts
@@ -0,0 +1,81 @@
+import { describe, it, expect } from "vitest";
+import {
+  CATEGORY_THRESHOLD,
+  distinctValues,
+  inferFilterType,
+  matchesFilter,
+  nextLockedRow,
+} from "./table-filters";
+
+const D = (rows: Record<string, unknown>[]) => rows;
+
+describe("distinctValues", () => {
+  it("returns [] for empty data", () => {
+    expect(distinctValues("x", [])).toEqual([]);
+  });
+  it("skips null/undefined/empty and dedupes", () => {
+    const data = D([{ x: "a" }, { x: "b" }, { x: "a" }, { x: null }, { x: "" }, { x: undefined }]);
+    expect(distinctValues("x", data).sort()).toEqual(["a", "b"]);
+  });
+  it("stringifies numbers", () => {
+    expect(distinctValues("x", D([{ x: 1 }, { x: 2 }, { x: 1 }])).sort()).toEqual(["1", "2"]);
+  });
+});
+
+describe("inferFilterType", () => {
+  it("date when all non-empty values are YYYY-MM-DD", () => {
+    const data = D([{ d: "2024-01-01" }, { d: "2025-12-31" }, { d: null }]);
+    expect(inferFilterType("d", data)).toBe("date");
+  });
+  it("category when distinct count <= threshold", () => {
+    const data = D([{ x: "A" }, { x: "B" }, { x: "C" }]);
+    expect(inferFilterType("x", data)).toBe("category");
+  });
+  it("text when distinct count exceeds threshold", () => {
+    const data = D(Array.from({ length: CATEGORY_THRESHOLD + 1 }, (_, i) => ({ x: String(i) })));
+    expect(inferFilterType("x", data)).toBe("text");
+  });
+  it("text fallback when no data", () => {
+    expect(inferFilterType("x", [])).toBe("text");
+  });
+});
+
+describe("matchesFilter", () => {
+  it("text: case-insensitive substring", () => {
+    expect(matchesFilter("text", "Pressure Gauge", "press")).toBe(true);
+    expect(matchesFilter("text", "Pressure Gauge", "xyz")).toBe(false);
+  });
+  it("text: treats null/undefined as empty", () => {
+    expect(matchesFilter("text", null, "anything")).toBe(false);
+    expect(matchesFilter("text", null, "")).toBe(true);
+  });
+  it("category: exact equality", () => {
+    expect(matchesFilter("category", "A", "A")).toBe(true);
+    expect(matchesFilter("category", "A", "B")).toBe(false);
+  });
+  it("date: within closed range 'start|end'", () => {
+    expect(matchesFilter("date", "2024-06-15", "2024-01-01|2024-12-31")).toBe(true);
+    expect(matchesFilter("date", "2023-06-15", "2024-01-01|2024-12-31")).toBe(false);
+  });
+  it("date: open-ended range (empty side allowed)", () => {
+    expect(matchesFilter("date", "2030-01-01", "|2024-12-31")).toBe(false);
+    expect(matchesFilter("date", "2020-01-01", "2024-01-01|")).toBe(false);
+    expect(matchesFilter("date", "2024-06-15", "2024-01-01|")).toBe(true);
+  });
+  it("date: empty cell never matches a non-empty filter", () => {
+    expect(matchesFilter("date", "", "2024-01-01|2024-12-31")).toBe(false);
+    expect(matchesFilter("date", null, "|")).toBe(false);
+  });
+});
+
+describe("nextLockedRow", () => {
+  it("locks when nothing locked", () => {
+    expect(nextLockedRow(null, "5")).toBe("5");
+  });
+  it("unlocks when clicking the locked row", () => {
+    expect(nextLockedRow("5", "5")).toBe(null);
+  });
+  it("switches when clicking a different row", () => {
+    expect(nextLockedRow("5", "7")).toBe("7");
+  });
+});
--- a/src/app/table-filters.ts
+++ b/src/app/table-filters.ts
@@ -0,0 +1,75 @@
+export interface DataRow {
+  [key: string]: string | number | null;
+}
+
+export type FilterType = "date" | "category" | "text";
+
+export const CATEGORY_THRESHOLD = 50;
+
+const DATE_RE = /^\d{4}-\d{2}-\d{2}$/;
+
+/** Non-empty distinct stringified values of a column. */
+export function distinctValues(
+  key: string,
+  data: Record<string, unknown>[]
+): string[] {
+  const set = new Set<string>();
+  for (const row of data) {
+    const v = row[key];
+    if (v === null || v === undefined) continue;
+    const s = String(v);
+    if (s !== "") set.add(s);
+  }
+  return [...set];
+}
+
+/** Infer filter UI type from the column's actual data. */
+export function inferFilterType(
+  key: string,
+  data: Record<string, unknown>[]
+): FilterType {
+  const vals = distinctValues(key, data);
+  if (vals.length === 0) return "text";
+  if (vals.every((v) => DATE_RE.test(v))) return "date";
+  if (vals.length <= CATEGORY_THRESHOLD) return "category";
+  return "text";
+}
+
+/**
+ * Does a cell match a single filter key?
+ * - text: case-insensitive substring
+ * - category: exact equality
+ * - date: range encoded as "start|end" (either side may be ""), ISO string compare
+ */
+export function matchesFilter(
+  type: FilterType,
+  cellValue: unknown,
+  filterValue: string
+): boolean {
+  const cell =
+    cellValue === null || cellValue === undefined ? "" : String(cellValue);
+
+  if (type === "text") {
+    return cell.toLowerCase().includes(filterValue.toLowerCase());
+  }
+  if (type === "category") {
+    return cell === filterValue;
+  }
+  // date
+  if (cell === "") return false;
+  const sep = filterValue.indexOf("|");
+  if (sep < 0) return cell === filterValue; // defensive: single date exact
+  const start = filterValue.slice(0, sep);
+  const end = filterValue.slice(sep + 1);
+  if (start && cell < start) return false;
+  if (end && cell > end) return false;
+  return true;
+}
+
+/** Toggle row-lock: click locked row -> unlock; click other -> switch. */
+export function nextLockedRow(
+  prev: string | null,
+  clickedKey: string
+): string | null {
+  return prev === clickedKey ? null : clickedKey;
+}
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -0,0 +1,8 @@
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  test: {
+    environment: "node",
+    include: ["src/**/*.test.ts"],
+  },
+});
Author	SHA1	Message	Date
Misaka_Company	2f3cd9fa06	Wire controlled column filters and clear-filters button buildTableColumns now attaches antd controlled filter props (via buildColumnFilterProps) to columns marked filterable; filters state is controlled via Table onChange. A 'clear filters' button in the search bar resets all filters and is disabled when none are active. Filters and row lock reset on search/clear. Also renames the component module table-filters.tsx -> table-filter-ui.tsx to avoid a same-base-name resolution collision with the logic module table-filters.ts. Co-Authored-By: Claude <noreply@anthropic.com>	2026-06-18 09:52:51 +08:00
Misaka_Company	f8914fb287	Add per-column filterable flag with persistence and settings toggle ColumnConfig gains filterable (default false), persisted to localStorage with backward-compat for configs saved before this field existed. The column-settings modal now shows a funnel toggle per row alongside the visibility checkbox. Co-Authored-By: Claude <noreply@anthropic.com>	2026-06-18 09:47:46 +08:00
Misaka_Company	f78918c3b0	Add click-to-lock row highlighting Clicking a row locks an orange highlight (#fff7e6) across the whole row including fixed columns; clicking the same row unlocks, clicking another switches. Lock resets on search/clear. Highlight survives horizontal scroll since rowClassName applies to all row fragments. Co-Authored-By: Claude <noreply@anthropic.com>	2026-06-18 09:46:25 +08:00
Misaka_Company	b893fd558a	Add FilterDropdown component and column filter props factory src/app/table-filters.tsx renders type-specific filter UIs (text search, category checkbox list, date range) and exposes buildColumnFilterProps to attach antd controlled filter props (filterDropdown/onFilter/filteredValue) to a column. Verified against antd v6.4.3 type defs. Co-Authored-By: Claude <noreply@anthropic.com>	2026-06-18 09:44:52 +08:00
Misaka_Company	4faa960591	Add pure filter/lock logic with Vitest tests Adds src/app/table-filters.ts (DataRow type, FilterType, distinctValues, inferFilterType, matchesFilter, nextLockedRow) with 16 Vitest tests covering type inference thresholds, date-range encoding, and row-lock toggling. Co-Authored-By: Claude <noreply@anthropic.com>	2026-06-18 09:42:18 +08:00