[gdevenyi]

Summary

 store.ts            updateStyle()
-  style[`--header-${header.id}-size`]
-  style[`--col-${header.column.id}-size`]
+  style[getSizeVariableName('header', header.id)]
+  style[getSizeVariableName('col', header.column.id)]
 DataTableHead.tsx / DataTableBody.tsx
-  width: calc(var(--col-${id}-size) * 1px)
+  width: calc(var(${getSizeVariableName('col', id)}) * 1px)
+utils.tsx           getSizeVariableName(kind, id)

getSizeVariableName(kind, id)
  for each character of id
    ASCII letter, digit or hyphen -> keep
    other                         -> "_<code point in hex>_"
  return "--<kind>-<encoded id>-size"

"First Name" -> --col-First_20_Name-size
"a_b"        -> --col-a_5f_b-size      (no collision with "a b")
"email"      -> --col-email-size       (no change)

Evidence

• Before: the new test in DataTable.spec.tsx fails on main:

  × should set valid CSS variables for a column whose ID contains spaces
  AssertionError: expected '--header-Email Address (work)-size' to match /^--[a-zA-Z0-9_-]+$/
  

  After: pnpm test: 43 files, 250 tests pass. pnpm lint passes.

The width in a browser was not examined. happy-dom removes calc(var(…)) widths, so the tests check the variable names only.

Merge Danger

Door: two-way

Blast Radius: DataTable

The variable names change only for IDs that contain a character other than a letter, a digit or a hyphen. A consumer stylesheet that reads --col-<id>-size for an ID with an underscore must use the new name.

Closes #80

🤖 Generated with Claude Code

https://claude.ai/code/session_01W53iUP9ECVtoteopM7QtC7

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has insufficient remaining quota. Try requesting a review at a lower effort level.

An organization owner can choose the repository organization as the billing source for reviews requested by members with a paid Copilot license. Learn about Copilot code review billing.