fix: 🐛 table column resize nan when headers reordered

[punkbit]

Why?

The useLayoutEffect watching headers.length wasn't triggered when headers were reordered (e.g., in sysadmin EntitiesTable with column selection), causing Column widths to be misaligned after reordering, NaN values appearing during resize operations and an incorrect null check that was always true.

How?

• Use Map (string, number) keyed by column label instead of array indexed by position
• Track columnLabel and nextColumnLabel in resize state instead of numeric indices
• Add proper guards for header label type checking
• Watch complete headers array in dependencies instead of just the length
• Add new story with reordering control
• Add new test with reordering

Preview?

demo-table-reorder-resize-fix.mov

[changeset-bot]

🦋 Changeset detected

Latest commit: 0c763f6

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@clickhouse/click-ui	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

Claude finished @punkbit's task in 1m 21s —— View job

---

PR Review

• Gather context
• Read changed files
• Analyze and post review

---

The fix is well-reasoned and correctly solves the root cause. Switching from position-indexed arrays to a label-keyed Map is the right approach — reordering no longer invalidates width lookups. The two-phase reset (headerKey memo → useEffect nulls the map → useLayoutEffect re-measures) is clean and correct. Tests and story added. Nice work overall! 🙌

💡 Suggestions (non-blocking)

• Table.tsx:820 — headerKey separator collision: Joining labels with "," means two header sets can produce identical keys: ["A,B", "C"] → "A,B,C" and ["A", "B,C"] → "A,B,C". A separator that can't appear in column names (e.g. "\0") or using JSON.stringify(labels) would be more robust. Unlikely to matter in practice but easy to tighten. Fix this →

• Table.tsx:814 — headers dep in useLayoutEffect is redundant: columnWidths is already a dep, and the null-reset from the useEffect already triggers re-execution. Adding headers to this effect's deps doesn't add correctness and is slightly confusing alongside the intentional headerKey-based reset mechanism.

• Table.stories.tsx:606 — Story name vs. behavior mismatch: ResizableColumnsWithReordering controls toggle column visibility, not order. Since the PR description mentions the actual use case is column selection (show/hide), consider naming it ResizableColumnsWithColumnSelection for clarity.

• Non-string label fallback is still position-dependent (Table.tsx:805, 909, 978): The __index_N key for non-string label values still uses the current position index. Reordering columns with non-string labels would still produce stale lookups. This is an acceptable edge case — just worth a comment noting the limitation.

[github-actions]

Claude finished @punkbit's task in 1m 29s —— View job

---

PR Review

• Gather context
• Read changed files
• Analyze and post review

---

The fix is well-reasoned and correctly solves the root cause. Switching from position-indexed arrays to a label-keyed Map is the right approach — reordering no longer invalidates width lookups. The two-phase reset (headerKey memo → useEffect nulls the map → useLayoutEffect re-measures) is clean and correct. The follow-up commits cleanly addressed several suggestions from the prior review: redundant headers dep removed, dead guards removed, story renamed, key simplified. Nice work! 🙌

💡 Suggestions (non-blocking)

• Table.tsx:820 — headerKey separator collision: Joining labels with "," means two header sets can produce identical keys: ["A,B", "C"] → "A,B,C" and ["A", "B,C"] → "A,B,C", so a reorder wouldn't be detected. A separator that can't appear in column names (e.g. "\0") or using JSON.stringify(labels) would be more robust. Unlikely to matter in practice but easy to tighten. Fix this →

• Table.tsx:805, 909, 978 — Duplicate string label edge case: If two columns share the same string label, the Map will silently overwrite the first width with the second, causing both columns to share one entry. Since label uniqueness isn't enforced by the type system, worth a code comment noting the assumption (or guarding with a console.warn in dev).

• useInputModality.ts / useInputModality.test.tsx — The function → arrow function refactor is unrelated to the PR goal. Totally fine to include but worth splitting into a separate commit/PR to keep the diff focused.

[workflow-authentication-public]

📚 Storybook Preview Deployed

✅ Preview URL: https://click-ppsrxzk80-clickhouse.vercel.app

Built from commit: e98477c039e101c7bd3e2bf7c11a67dd44ad41f2