feat: add full-width column resizing example

[govindarajug]

Summary

Adds a new React example (column-resizing-full-width) that demonstrates how to make a TanStack Table fill its container width, with the last column automatically stretching to fill remaining space while keeping all columns individually resizable.

This is a commonly requested pattern — several open issues describe the challenge of making tables fill their container width with proper resize behavior:

• implement full width resize handler #4825 — implement full width resize handler
• columnSizing state gets out of sync with actual column sizes when used with a full width table #4880 — columnSizing state gets out of sync with full-width tables
• Fixed width is not applying for fix width column along with Full width table, Column Resizing and Column visibility. #5120 — fixed width not applying with full-width table + column resizing
• Column resizing doesn't respect clientWidth, bad experience with limited width tables #5870 — column resizing doesn't respect clientWidth

How it works

1. ResizeObserver tracks the container width reactively
2. getColumnWidth() computes each column's width — if total columns width < container width, the last column stretches to fill the gap
3. CSS variables (--col-{id}-size) are used for performant resize rendering (same pattern as column-resizing-performant example)
4. Table width is set to Math.max(totalColumnsWidth, containerWidth) so it always fills the container

Key features

• Table always fills container width
• Last column stretches to fill remaining space
• Individual columns remain resizable with min/max constraints
• Responsive to window/container resize
• Double-click column border to reset size
• Debug state panel shows live sizing info

Test plan

• Columns fill the container width on initial render
• Resizing a column causes the last column to adjust
• When total column width exceeds container, horizontal scroll appears
• Double-click a column resizer resets that column's size
• Resizing the browser window causes the table to adapt
• Works with columnResizeMode: 'onChange'

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 61433ad6-5d88-4d94-a154-5b5f244c6d5a

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}