From 3b464a5044e0414f4e7b3af5fcd98d7b0c9bbe1b Mon Sep 17 00:00:00 2001 From: Isaac Hunja Date: Wed, 4 Mar 2026 06:54:37 +0300 Subject: [PATCH 1/2] fix(vue-table): return null for empty string in FlexRender to prevent hydration mismatch When a column value is an empty string, Vue's SSR would render no content while the client would render an empty text node, causing a hydration mismatch error. This adds a check in FlexRender to return null instead of empty or nullish values, ensuring consistent rendering between server and client. Closes #6077 --- packages/vue-table/src/index.ts | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/vue-table/src/index.ts b/packages/vue-table/src/index.ts index 1ea766c261..f698b80a3c 100755 --- a/packages/vue-table/src/index.ts +++ b/packages/vue-table/src/index.ts @@ -37,6 +37,13 @@ export const FlexRender = defineComponent({ return h(props.render, props.props) } + // Return null for empty/nullish values to avoid Vue SSR hydration + // mismatches (e.g. empty string renders a text node on the client + // but nothing on the server) + if (props.render == null || props.render === '') { + return null + } + return props.render } }, From 87d8da9d3c6c2b43fd9f2a8c2dd11b3739c0d7ae Mon Sep 17 00:00:00 2001 From: Isaac Hunja Date: Wed, 4 Mar 2026 07:10:46 +0300 Subject: [PATCH 2/2] chore: add changeset --- .changeset/fix-vue-flexrender-hydration.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/fix-vue-flexrender-hydration.md diff --git a/.changeset/fix-vue-flexrender-hydration.md b/.changeset/fix-vue-flexrender-hydration.md new file mode 100644 index 0000000000..a9aebda50a --- /dev/null +++ b/.changeset/fix-vue-flexrender-hydration.md @@ -0,0 +1,5 @@ +--- +'@tanstack/vue-table': patch +--- + +Return null instead of empty string in FlexRender to prevent Vue SSR hydration mismatch