fix(vue-table): return null for empty string in FlexRender to prevent hydration mismatch

[isaackaara]

Problem

When using @tanstack/vue-table with SSR (e.g., Nuxt), a hydration error occurs inside <td> elements when a column value is an empty string "".

As reported in #6077, Vue's server-side renderer produces no content for an empty string, while the client-side renderer creates an empty text node, causing a hydration mismatch.

Root Cause

In the FlexRender component, when props.render is an empty string:

1. It's not a function or object, so the h() branch is skipped
2. It falls through to return props.render which returns ""
3. Vue SSR renders nothing for empty strings, but the client creates a text node
4. This inconsistency triggers a hydration mismatch error

Fix

Added an explicit check for nullish and empty string values before the fallthrough return, returning null instead. This ensures consistent rendering between server and client:

// Return null for empty/nullish values to avoid Vue SSR hydration
// mismatches
if (props.render == null || props.render === '') {
  return null
}

Reproduction

See the StackBlitz reproduction from the original issue.

Closes #6077

[changeset-bot]

🦋 Changeset detected

Latest commit: 87d8da9

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

This PR includes changesets to release 1 package

Name	Type
@tanstack/vue-table	Patch

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

[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: dec5a4e7-c690-4bcf-b098-30715e0e6a09

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
• Post copyable unit tests in a comment

---

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.}