[atable] allow resizable columns

[Alchez]

Closes #194

---

Changes:

• Allow table columns to be individually resizable using a new resizable key
  • If a column is marked as resizable, then the appropriate styles are automatically applied to the column's header cell
• Added a resize observer on all header cells that are resizable
• Remove min-width settings from all cells (this isn't exactly compatible with the resize observer since users wouldn't be able to reduce a cell's width after expanding it)
  • @agritheory How should the full-width setting work when columns are resizable? Status quo was to apply the width: auto; style, but since we need to set a default width, I'm not sure if that setting can be used anymore.
• Updated tests to reflect min-width removals

Demo:

Screencast.From.2024-11-27.15-09-17.mp4

[github-actions]

Coverage Report for ./atable

Status	Category	Percentage	Covered / Total
🔴	Lines	65.75% (🎯 70%)	169 / 257
🔴	Statements	66.54% (🎯 70%)	181 / 272
🟢	Functions	77.35% (🎯 70%)	41 / 53
🔴	Branches	44.61% (🎯 70%)	87 / 195

File Coverage

File	Stmts	Branches	Functions	Lines	Uncovered Lines
Changed Files
atable/src/components/ATable.vue	55.55%	32.35%	81.81%	54.71%	106-110, 120-148, 162-163
atable/src/components/ATableHeader.vue	33.33%	44.44%	33.33%	35.71%	41-51
atable/src/stores/table.ts	74.5%	48.64%	84.21%	74.73%	40-41, 54, 85-86, 108-112, 140, 147, 151-162, 189, 197-198, 204
Unchanged Files
atable/src/utils.ts	100%	100%	100%	100%
atable/src/components/ACell.vue	90.38%	62.5%	100%	90.19%	101, 124-127, 157, 165-167
atable/src/components/AExpansionRow.vue	0%	0%	0%	0%	33-3
atable/src/components/ARow.vue	64.28%	56.25%	75%	58.33%	51-65, 17
atable/src/components/ATableModal.vue	46.66%	20%	50%	42.85%	22-45, 49

Generated in workflow #561 for commit 6702d90 by the Vitest Coverage Report Action

[agritheory]

How should the full-width setting work when columns are resizable? Status quo was to apply the width: auto; style, but since we need to set a default width, I'm not sure if that setting can be used anymore.

I think the solution to this is to disallow resizing of the final column when it is configured as full-width.

[agritheory]

We should hide the horizontal scrollbar on resizeable column headers:

[Alchez]

@agritheory I've changed the overflow value from auto -> hidden for resizable columns, so the scrollbar shouldn't appear on the header cells anymore.

[agritheory]

@Alchez I tested this and am still seeing the column creep to left

[Alchez]

@agritheory I unfortunately still can't replicate this one locally, so it's been a hard one to debug 😅

I can't remember: does changing the ch values to px in the stories get rid of the creep in all instances of the table render? Just to verify if this is a ch -> px read/write issue from the resizable observer.