@tanstack/vue-table 9.0.0-alpha.25 → 9.0.0-alpha.30

package/dist/FlexRender.cjs

@@ -1,22 +1,73 @@
 let vue = require("vue");
 
 //#region src/FlexRender.ts
+/**
+* If rendering headers, cells, or footers with custom markup, use flexRender instead of `cell.getValue()` or `cell.renderValue()`.
+* @example flexRender(cell.column.columnDef.cell, cell.getContext())
+*/
+function flexRender(render, props) {
+	if (typeof render === "function") {
+		const rendered = render(props);
+		if ((0, vue.isVNode)(rendered)) return rendered;
+		if (typeof rendered === "function" || typeof rendered === "object") return (0, vue.h)(rendered, props);
+		return rendered;
+	}
+	if (typeof render === "object") return (0, vue.h)(render, props);
+	return render;
+}
+/**
+* Simplified component for rendering headers, cells, or footers.
+*
+* Supports both the new shorthand pattern and the legacy `:render`/`:props` pattern:
+* @example
+* ```vue
+* <!-- New shorthand pattern -->
+* <FlexRender :cell="cell" />
+* <FlexRender :header="header" />
+* <FlexRender :footer="header" />
+*
+* <!-- Legacy pattern (still supported) -->
+* <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
+* ```
+*/
 const FlexRender = (0, vue.defineComponent)({
-	props: ["render", "props"],
+	props: {
+		render: {
+			type: [
+				Function,
+				Object,
+				String
+			],
+			default: void 0
+		},
+		props: {
+			type: Object,
+			default: void 0
+		},
+		cell: {
+			type: Object,
+			default: void 0
+		},
+		header: {
+			type: Object,
+			default: void 0
+		},
+		footer: {
+			type: Object,
+			default: void 0
+		}
+	},
 	setup: (props) => {
 		return () => {
-			if (typeof props.render === "function") {
-				const rendered = props.render(props.props);
-				if ((0, vue.isVNode)(rendered)) return rendered;
-				if (typeof rendered === "function" || typeof rendered === "object") return (0, vue.h)(rendered, props.props);
-				return rendered;
-			}
-			if (typeof props.render === "object") return (0, vue.h)(props.render, props.props);
-			return props.render;
+			if (props.cell) return flexRender(props.cell.column.columnDef.cell, props.cell.getContext());
+			if (props.header) return flexRender(props.header.column.columnDef.header, props.header.getContext());
+			if (props.footer) return flexRender(props.footer.column.columnDef.footer, props.footer.getContext());
+			return flexRender(props.render, props.props);
 		};
 	}
 });
 
 //#endregion
 exports.FlexRender = FlexRender;
+exports.flexRender = flexRender;
 //# sourceMappingURL=FlexRender.cjs.map

package/dist/FlexRender.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FlexRender.cjs","names":[],"sources":["../src/FlexRender.ts"],"sourcesContent":["import { defineComponent, h, isVNode } from 'vue'\n\nexport const FlexRender = defineComponent({\n  props: ['render', 'props'],\n  setup: (props: { render: any; props: any }) => {\n    return () => {\n      if (typeof props.render === 'function') {\n        const rendered = props.render(props.props)\n\n        if (isVNode(rendered)) {\n          return rendered\n        }\n\n        if (typeof rendered === 'function' || typeof rendered === 'object') {\n          return h(rendered, props.props)\n        }\n\n        return rendered\n      }\n\n      if (typeof props.render === 'object') {\n        return h(props.render, props.props)\n      }\n\n      return props.render\n    }\n  },\n})\n"],"mappings":";;;AAEA,MAAa,sCAA6B;CACxC,OAAO,CAAC,UAAU,QAAQ;CAC1B,QAAQ,UAAuC;AAC7C,eAAa;AACX,OAAI,OAAO,MAAM,WAAW,YAAY;IACtC,MAAM,WAAW,MAAM,OAAO,MAAM,MAAM;AAE1C,yBAAY,SAAS,CACnB,QAAO;AAGT,QAAI,OAAO,aAAa,cAAc,OAAO,aAAa,SACxD,mBAAS,UAAU,MAAM,MAAM;AAGjC,WAAO;;AAGT,OAAI,OAAO,MAAM,WAAW,SAC1B,mBAAS,MAAM,QAAQ,MAAM,MAAM;AAGrC,UAAO,MAAM;;;CAGlB,CAAC"}
+{"version":3,"file":"FlexRender.cjs","names":[],"sources":["../src/FlexRender.ts"],"sourcesContent":["import { defineComponent, h, isVNode } from 'vue'\nimport type { PropType } from 'vue'\nimport type {\n  Cell,\n  CellData,\n  Header,\n  RowData,\n  TableFeatures,\n} from '@tanstack/table-core'\n\n/**\n * If rendering headers, cells, or footers with custom markup, use flexRender instead of `cell.getValue()` or `cell.renderValue()`.\n * @example flexRender(cell.column.columnDef.cell, cell.getContext())\n */\nexport function flexRender(render: any, props: any): any {\n  if (typeof render === 'function') {\n    const rendered = render(props)\n\n    if (isVNode(rendered)) {\n      return rendered\n    }\n\n    if (typeof rendered === 'function' || typeof rendered === 'object') {\n      return h(rendered, props)\n    }\n\n    return rendered\n  }\n\n  if (typeof render === 'object') {\n    return h(render, props)\n  }\n\n  return render\n}\n\n/**\n * Simplified component for rendering headers, cells, or footers.\n *\n * Supports both the new shorthand pattern and the legacy `:render`/`:props` pattern:\n * @example\n * ```vue\n * <!-- New shorthand pattern -->\n * <FlexRender :cell=\"cell\" />\n * <FlexRender :header=\"header\" />\n * <FlexRender :footer=\"header\" />\n *\n * <!-- Legacy pattern (still supported) -->\n * <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n * ```\n */\nexport const FlexRender = defineComponent({\n  props: {\n    render: {\n      type: [Function, Object, String] as PropType<any>,\n      default: undefined,\n    },\n    props: {\n      type: Object as PropType<any>,\n      default: undefined,\n    },\n    cell: {\n      type: Object as PropType<Cell<any, any, any>>,\n      default: undefined,\n    },\n    header: {\n      type: Object as PropType<Header<any, any, any>>,\n      default: undefined,\n    },\n    footer: {\n      type: Object as PropType<Header<any, any, any>>,\n      default: undefined,\n    },\n  },\n  setup: (props: {\n    render?: any\n    props?: any\n    cell?: Cell<any, any, any>\n    header?: Header<any, any, any>\n    footer?: Header<any, any, any>\n  }) => {\n    return () => {\n      // New shorthand pattern: extract render and props from cell/header/footer\n      if (props.cell) {\n        return flexRender(\n          props.cell.column.columnDef.cell,\n          props.cell.getContext(),\n        )\n      }\n\n      if (props.header) {\n        return flexRender(\n          props.header.column.columnDef.header,\n          props.header.getContext(),\n        )\n      }\n\n      if (props.footer) {\n        return flexRender(\n          props.footer.column.columnDef.footer,\n          props.footer.getContext(),\n        )\n      }\n\n      // Legacy pattern: use render and props directly\n      return flexRender(props.render, props.props)\n    }\n  },\n})\n"],"mappings":";;;;;;;AAcA,SAAgB,WAAW,QAAa,OAAiB;AACvD,KAAI,OAAO,WAAW,YAAY;EAChC,MAAM,WAAW,OAAO,MAAM;AAE9B,uBAAY,SAAS,CACnB,QAAO;AAGT,MAAI,OAAO,aAAa,cAAc,OAAO,aAAa,SACxD,mBAAS,UAAU,MAAM;AAG3B,SAAO;;AAGT,KAAI,OAAO,WAAW,SACpB,mBAAS,QAAQ,MAAM;AAGzB,QAAO;;;;;;;;;;;;;;;;;AAkBT,MAAa,sCAA6B;CACxC,OAAO;EACL,QAAQ;GACN,MAAM;IAAC;IAAU;IAAQ;IAAO;GAChC,SAAS;GACV;EACD,OAAO;GACL,MAAM;GACN,SAAS;GACV;EACD,MAAM;GACJ,MAAM;GACN,SAAS;GACV;EACD,QAAQ;GACN,MAAM;GACN,SAAS;GACV;EACD,QAAQ;GACN,MAAM;GACN,SAAS;GACV;EACF;CACD,QAAQ,UAMF;AACJ,eAAa;AAEX,OAAI,MAAM,KACR,QAAO,WACL,MAAM,KAAK,OAAO,UAAU,MAC5B,MAAM,KAAK,YAAY,CACxB;AAGH,OAAI,MAAM,OACR,QAAO,WACL,MAAM,OAAO,OAAO,UAAU,QAC9B,MAAM,OAAO,YAAY,CAC1B;AAGH,OAAI,MAAM,OACR,QAAO,WACL,MAAM,OAAO,OAAO,UAAU,QAC9B,MAAM,OAAO,YAAY,CAC1B;AAIH,UAAO,WAAW,MAAM,QAAQ,MAAM,MAAM;;;CAGjD,CAAC"}

package/dist/FlexRender.d.cts

@@ -1,13 +1,46 @@
 import * as _$vue from "vue";
+import { Cell, Header } from "@tanstack/table-core";
 
 //#region src/FlexRender.d.ts
+/**
+ * If rendering headers, cells, or footers with custom markup, use flexRender instead of `cell.getValue()` or `cell.renderValue()`.
+ * @example flexRender(cell.column.columnDef.cell, cell.getContext())
+ */
+declare function flexRender(render: any, props: any): any;
+/**
+ * Simplified component for rendering headers, cells, or footers.
+ *
+ * Supports both the new shorthand pattern and the legacy `:render`/`:props` pattern:
+ * @example
+ * ```vue
+ * <!-- New shorthand pattern -->
+ * <FlexRender :cell="cell" />
+ * <FlexRender :header="header" />
+ * <FlexRender :footer="header" />
+ *
+ * <!-- Legacy pattern (still supported) -->
+ * <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
+ * ```
+ */
 declare const FlexRender: _$vue.DefineComponent<{
-  render: any;
-  props: any;
+  render?: any;
+  props?: any;
+  cell?: Cell<any, any, any>;
+  header?: Header<any, any, any>;
+  footer?: Header<any, any, any>;
 }, () => any, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<{
-  render: any;
+  render?: any;
+  props?: any;
+  cell?: Cell<any, any, any>;
+  header?: Header<any, any, any>;
+  footer?: Header<any, any, any>;
+}> & Readonly<{}>, {
   props: any;
-}> & Readonly<{}>, {}, {}, {}, {}, string, _$vue.ComponentProvideOptions, true, {}, any>;
+  render: any;
+  cell: any;
+  header: any;
+  footer: any;
+}, {}, {}, {}, string, _$vue.ComponentProvideOptions, true, {}, any>;
 //#endregion
-export { FlexRender };
+export { FlexRender, flexRender };
 //# sourceMappingURL=FlexRender.d.cts.map

package/dist/FlexRender.d.ts

@@ -1,13 +1,46 @@
 import * as _$vue from "vue";
+import { Cell, Header } from "@tanstack/table-core";
 
 //#region src/FlexRender.d.ts
+/**
+ * If rendering headers, cells, or footers with custom markup, use flexRender instead of `cell.getValue()` or `cell.renderValue()`.
+ * @example flexRender(cell.column.columnDef.cell, cell.getContext())
+ */
+declare function flexRender(render: any, props: any): any;
+/**
+ * Simplified component for rendering headers, cells, or footers.
+ *
+ * Supports both the new shorthand pattern and the legacy `:render`/`:props` pattern:
+ * @example
+ * ```vue
+ * <!-- New shorthand pattern -->
+ * <FlexRender :cell="cell" />
+ * <FlexRender :header="header" />
+ * <FlexRender :footer="header" />
+ *
+ * <!-- Legacy pattern (still supported) -->
+ * <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
+ * ```
+ */
 declare const FlexRender: _$vue.DefineComponent<{
-  render: any;
-  props: any;
+  render?: any;
+  props?: any;
+  cell?: Cell<any, any, any>;
+  header?: Header<any, any, any>;
+  footer?: Header<any, any, any>;
 }, () => any, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<{
-  render: any;
+  render?: any;
+  props?: any;
+  cell?: Cell<any, any, any>;
+  header?: Header<any, any, any>;
+  footer?: Header<any, any, any>;
+}> & Readonly<{}>, {
   props: any;
-}> & Readonly<{}>, {}, {}, {}, {}, string, _$vue.ComponentProvideOptions, true, {}, any>;
+  render: any;
+  cell: any;
+  header: any;
+  footer: any;
+}, {}, {}, {}, string, _$vue.ComponentProvideOptions, true, {}, any>;
 //#endregion
-export { FlexRender };
+export { FlexRender, flexRender };
 //# sourceMappingURL=FlexRender.d.ts.map

package/dist/FlexRender.js

@@ -1,22 +1,72 @@
 import { defineComponent, h, isVNode } from "vue";
 
 //#region src/FlexRender.ts
+/**
+* If rendering headers, cells, or footers with custom markup, use flexRender instead of `cell.getValue()` or `cell.renderValue()`.
+* @example flexRender(cell.column.columnDef.cell, cell.getContext())
+*/
+function flexRender(render, props) {
+	if (typeof render === "function") {
+		const rendered = render(props);
+		if (isVNode(rendered)) return rendered;
+		if (typeof rendered === "function" || typeof rendered === "object") return h(rendered, props);
+		return rendered;
+	}
+	if (typeof render === "object") return h(render, props);
+	return render;
+}
+/**
+* Simplified component for rendering headers, cells, or footers.
+*
+* Supports both the new shorthand pattern and the legacy `:render`/`:props` pattern:
+* @example
+* ```vue
+* <!-- New shorthand pattern -->
+* <FlexRender :cell="cell" />
+* <FlexRender :header="header" />
+* <FlexRender :footer="header" />
+*
+* <!-- Legacy pattern (still supported) -->
+* <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
+* ```
+*/
 const FlexRender = defineComponent({
-	props: ["render", "props"],
+	props: {
+		render: {
+			type: [
+				Function,
+				Object,
+				String
+			],
+			default: void 0
+		},
+		props: {
+			type: Object,
+			default: void 0
+		},
+		cell: {
+			type: Object,
+			default: void 0
+		},
+		header: {
+			type: Object,
+			default: void 0
+		},
+		footer: {
+			type: Object,
+			default: void 0
+		}
+	},
 	setup: (props) => {
 		return () => {
-			if (typeof props.render === "function") {
-				const rendered = props.render(props.props);
-				if (isVNode(rendered)) return rendered;
-				if (typeof rendered === "function" || typeof rendered === "object") return h(rendered, props.props);
-				return rendered;
-			}
-			if (typeof props.render === "object") return h(props.render, props.props);
-			return props.render;
+			if (props.cell) return flexRender(props.cell.column.columnDef.cell, props.cell.getContext());
+			if (props.header) return flexRender(props.header.column.columnDef.header, props.header.getContext());
+			if (props.footer) return flexRender(props.footer.column.columnDef.footer, props.footer.getContext());
+			return flexRender(props.render, props.props);
 		};
 	}
 });
 
 //#endregion
-export { FlexRender };
+export { FlexRender, flexRender };
 //# sourceMappingURL=FlexRender.js.map

package/dist/FlexRender.js.map

@@ -1 +1 @@
-{"version":3,"file":"FlexRender.js","names":[],"sources":["../src/FlexRender.ts"],"sourcesContent":["import { defineComponent, h, isVNode } from 'vue'\n\nexport const FlexRender = defineComponent({\n  props: ['render', 'props'],\n  setup: (props: { render: any; props: any }) => {\n    return () => {\n      if (typeof props.render === 'function') {\n        const rendered = props.render(props.props)\n\n        if (isVNode(rendered)) {\n          return rendered\n        }\n\n        if (typeof rendered === 'function' || typeof rendered === 'object') {\n          return h(rendered, props.props)\n        }\n\n        return rendered\n      }\n\n      if (typeof props.render === 'object') {\n        return h(props.render, props.props)\n      }\n\n      return props.render\n    }\n  },\n})\n"],"mappings":";;;AAEA,MAAa,aAAa,gBAAgB;CACxC,OAAO,CAAC,UAAU,QAAQ;CAC1B,QAAQ,UAAuC;AAC7C,eAAa;AACX,OAAI,OAAO,MAAM,WAAW,YAAY;IACtC,MAAM,WAAW,MAAM,OAAO,MAAM,MAAM;AAE1C,QAAI,QAAQ,SAAS,CACnB,QAAO;AAGT,QAAI,OAAO,aAAa,cAAc,OAAO,aAAa,SACxD,QAAO,EAAE,UAAU,MAAM,MAAM;AAGjC,WAAO;;AAGT,OAAI,OAAO,MAAM,WAAW,SAC1B,QAAO,EAAE,MAAM,QAAQ,MAAM,MAAM;AAGrC,UAAO,MAAM;;;CAGlB,CAAC"}
+{"version":3,"file":"FlexRender.js","names":[],"sources":["../src/FlexRender.ts"],"sourcesContent":["import { defineComponent, h, isVNode } from 'vue'\nimport type { PropType } from 'vue'\nimport type {\n  Cell,\n  CellData,\n  Header,\n  RowData,\n  TableFeatures,\n} from '@tanstack/table-core'\n\n/**\n * If rendering headers, cells, or footers with custom markup, use flexRender instead of `cell.getValue()` or `cell.renderValue()`.\n * @example flexRender(cell.column.columnDef.cell, cell.getContext())\n */\nexport function flexRender(render: any, props: any): any {\n  if (typeof render === 'function') {\n    const rendered = render(props)\n\n    if (isVNode(rendered)) {\n      return rendered\n    }\n\n    if (typeof rendered === 'function' || typeof rendered === 'object') {\n      return h(rendered, props)\n    }\n\n    return rendered\n  }\n\n  if (typeof render === 'object') {\n    return h(render, props)\n  }\n\n  return render\n}\n\n/**\n * Simplified component for rendering headers, cells, or footers.\n *\n * Supports both the new shorthand pattern and the legacy `:render`/`:props` pattern:\n * @example\n * ```vue\n * <!-- New shorthand pattern -->\n * <FlexRender :cell=\"cell\" />\n * <FlexRender :header=\"header\" />\n * <FlexRender :footer=\"header\" />\n *\n * <!-- Legacy pattern (still supported) -->\n * <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n * ```\n */\nexport const FlexRender = defineComponent({\n  props: {\n    render: {\n      type: [Function, Object, String] as PropType<any>,\n      default: undefined,\n    },\n    props: {\n      type: Object as PropType<any>,\n      default: undefined,\n    },\n    cell: {\n      type: Object as PropType<Cell<any, any, any>>,\n      default: undefined,\n    },\n    header: {\n      type: Object as PropType<Header<any, any, any>>,\n      default: undefined,\n    },\n    footer: {\n      type: Object as PropType<Header<any, any, any>>,\n      default: undefined,\n    },\n  },\n  setup: (props: {\n    render?: any\n    props?: any\n    cell?: Cell<any, any, any>\n    header?: Header<any, any, any>\n    footer?: Header<any, any, any>\n  }) => {\n    return () => {\n      // New shorthand pattern: extract render and props from cell/header/footer\n      if (props.cell) {\n        return flexRender(\n          props.cell.column.columnDef.cell,\n          props.cell.getContext(),\n        )\n      }\n\n      if (props.header) {\n        return flexRender(\n          props.header.column.columnDef.header,\n          props.header.getContext(),\n        )\n      }\n\n      if (props.footer) {\n        return flexRender(\n          props.footer.column.columnDef.footer,\n          props.footer.getContext(),\n        )\n      }\n\n      // Legacy pattern: use render and props directly\n      return flexRender(props.render, props.props)\n    }\n  },\n})\n"],"mappings":";;;;;;;AAcA,SAAgB,WAAW,QAAa,OAAiB;AACvD,KAAI,OAAO,WAAW,YAAY;EAChC,MAAM,WAAW,OAAO,MAAM;AAE9B,MAAI,QAAQ,SAAS,CACnB,QAAO;AAGT,MAAI,OAAO,aAAa,cAAc,OAAO,aAAa,SACxD,QAAO,EAAE,UAAU,MAAM;AAG3B,SAAO;;AAGT,KAAI,OAAO,WAAW,SACpB,QAAO,EAAE,QAAQ,MAAM;AAGzB,QAAO;;;;;;;;;;;;;;;;;AAkBT,MAAa,aAAa,gBAAgB;CACxC,OAAO;EACL,QAAQ;GACN,MAAM;IAAC;IAAU;IAAQ;IAAO;GAChC,SAAS;GACV;EACD,OAAO;GACL,MAAM;GACN,SAAS;GACV;EACD,MAAM;GACJ,MAAM;GACN,SAAS;GACV;EACD,QAAQ;GACN,MAAM;GACN,SAAS;GACV;EACD,QAAQ;GACN,MAAM;GACN,SAAS;GACV;EACF;CACD,QAAQ,UAMF;AACJ,eAAa;AAEX,OAAI,MAAM,KACR,QAAO,WACL,MAAM,KAAK,OAAO,UAAU,MAC5B,MAAM,KAAK,YAAY,CACxB;AAGH,OAAI,MAAM,OACR,QAAO,WACL,MAAM,OAAO,OAAO,UAAU,QAC9B,MAAM,OAAO,YAAY,CAC1B;AAGH,OAAI,MAAM,OACR,QAAO,WACL,MAAM,OAAO,OAAO,UAAU,QAC9B,MAAM,OAAO,YAAY,CAC1B;AAIH,UAAO,WAAW,MAAM,QAAQ,MAAM,MAAM;;;CAGjD,CAAC"}

package/dist/createTableHook.d.cts

@@ -99,9 +99,9 @@ declare const AppFlexRender: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
     default: undefined;
   };
 }>> & Readonly<{}>, {
-  footer: any;
-  header: any;
   cell: any;
+  header: any;
+  footer: any;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, true, {}, any>;
 declare function createTableHook<TFeatures extends TableFeatures, const TTableComponents extends Record<string, ComponentType<any>>, const TCellComponents extends Record<string, ComponentType<any>>, const THeaderComponents extends Record<string, ComponentType<any>>>({
   tableComponents,

package/dist/createTableHook.d.ts

@@ -99,9 +99,9 @@ declare const AppFlexRender: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
     default: undefined;
   };
 }>> & Readonly<{}>, {
-  footer: any;
-  header: any;
   cell: any;
+  header: any;
+  footer: any;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, true, {}, any>;
 declare function createTableHook<TFeatures extends TableFeatures, const TTableComponents extends Record<string, ComponentType<any>>, const TCellComponents extends Record<string, ComponentType<any>>, const THeaderComponents extends Record<string, ComponentType<any>>>({
   tableComponents,

package/dist/index.cjs

@@ -6,6 +6,7 @@ const require_createTableHook = require('./createTableHook.cjs');
 exports.AppFlexRender = require_createTableHook.AppFlexRender;
 exports.FlexRender = require_FlexRender.FlexRender;
 exports.createTableHook = require_createTableHook.createTableHook;
+exports.flexRender = require_FlexRender.flexRender;
 exports.useTable = require_useTable.useTable;
 var _tanstack_table_core = require("@tanstack/table-core");
 Object.keys(_tanstack_table_core).forEach(function (k) {

package/dist/index.d.cts

@@ -1,5 +1,5 @@
-import { FlexRender } from "./FlexRender.cjs";
+import { FlexRender, flexRender } from "./FlexRender.cjs";
 import { TableOptionsWithReactiveData, VueTable, useTable } from "./useTable.cjs";
 import { AppCellContext, AppCellProps, AppColumnHelper, AppFlexRender, AppHeaderContext, AppHeaderProps, AppTableProps, AppVueTable, CreateTableHookOptions, createTableHook } from "./createTableHook.cjs";
 export * from "@tanstack/table-core";
-export { AppCellContext, AppCellProps, AppColumnHelper, AppFlexRender, AppHeaderContext, AppHeaderProps, AppTableProps, AppVueTable, CreateTableHookOptions, FlexRender, TableOptionsWithReactiveData, VueTable, createTableHook, useTable };
+export { AppCellContext, AppCellProps, AppColumnHelper, AppFlexRender, AppHeaderContext, AppHeaderProps, AppTableProps, AppVueTable, CreateTableHookOptions, FlexRender, TableOptionsWithReactiveData, VueTable, createTableHook, flexRender, useTable };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { FlexRender } from "./FlexRender.js";
+import { FlexRender, flexRender } from "./FlexRender.js";
 import { TableOptionsWithReactiveData, VueTable, useTable } from "./useTable.js";
 import { AppCellContext, AppCellProps, AppColumnHelper, AppFlexRender, AppHeaderContext, AppHeaderProps, AppTableProps, AppVueTable, CreateTableHookOptions, createTableHook } from "./createTableHook.js";
 export * from "@tanstack/table-core";
-export { AppCellContext, AppCellProps, AppColumnHelper, AppFlexRender, AppHeaderContext, AppHeaderProps, AppTableProps, AppVueTable, CreateTableHookOptions, FlexRender, TableOptionsWithReactiveData, VueTable, createTableHook, useTable };
+export { AppCellContext, AppCellProps, AppColumnHelper, AppFlexRender, AppHeaderContext, AppHeaderProps, AppTableProps, AppVueTable, CreateTableHookOptions, FlexRender, TableOptionsWithReactiveData, VueTable, createTableHook, flexRender, useTable };

package/dist/index.js

@@ -1,7 +1,7 @@
-import { FlexRender } from "./FlexRender.js";
+import { FlexRender, flexRender } from "./FlexRender.js";
 import { useTable } from "./useTable.js";
 import { AppFlexRender, createTableHook } from "./createTableHook.js";
 
 export * from "@tanstack/table-core"
 
-export { AppFlexRender, FlexRender, createTableHook, useTable };
+export { AppFlexRender, FlexRender, createTableHook, flexRender, useTable };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/vue-table",
-  "version": "9.0.0-alpha.25",
+  "version": "9.0.0-alpha.30",
   "description": "Headless UI for building powerful tables & datagrids for Vue.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -41,12 +41,12 @@
   ],
   "dependencies": {
     "@tanstack/vue-store": "^0.9.3",
-    "@tanstack/table-core": "9.0.0-alpha.23"
+    "@tanstack/table-core": "9.0.0-alpha.30"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.5",
     "eslint-plugin-vue": "^10.8.0",
-    "vue": "^3.5.31"
+    "vue": "^3.5.32"
   },
   "peerDependencies": {
     "vue": ">=3.2"

package/src/FlexRender.ts

@@ -1,28 +1,109 @@
 import { defineComponent, h, isVNode } from 'vue'
+import type { PropType } from 'vue'
+import type {
+  Cell,
+  CellData,
+  Header,
+  RowData,
+  TableFeatures,
+} from '@tanstack/table-core'
 
-export const FlexRender = defineComponent({
-  props: ['render', 'props'],
-  setup: (props: { render: any; props: any }) => {
-    return () => {
-      if (typeof props.render === 'function') {
-        const rendered = props.render(props.props)
+/**
+ * If rendering headers, cells, or footers with custom markup, use flexRender instead of `cell.getValue()` or `cell.renderValue()`.
+ * @example flexRender(cell.column.columnDef.cell, cell.getContext())
+ */
+export function flexRender(render: any, props: any): any {
+  if (typeof render === 'function') {
+    const rendered = render(props)
+
+    if (isVNode(rendered)) {
+      return rendered
+    }
+
+    if (typeof rendered === 'function' || typeof rendered === 'object') {
+      return h(rendered, props)
+    }
 
-        if (isVNode(rendered)) {
-          return rendered
-        }
+    return rendered
+  }
 
-        if (typeof rendered === 'function' || typeof rendered === 'object') {
-          return h(rendered, props.props)
-        }
+  if (typeof render === 'object') {
+    return h(render, props)
+  }
+
+  return render
+}
+
+/**
+ * Simplified component for rendering headers, cells, or footers.
+ *
+ * Supports both the new shorthand pattern and the legacy `:render`/`:props` pattern:
+ * @example
+ * ```vue
+ * <!-- New shorthand pattern -->
+ * <FlexRender :cell="cell" />
+ * <FlexRender :header="header" />
+ * <FlexRender :footer="header" />
+ *
+ * <!-- Legacy pattern (still supported) -->
+ * <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
+ * ```
+ */
+export const FlexRender = defineComponent({
+  props: {
+    render: {
+      type: [Function, Object, String] as PropType<any>,
+      default: undefined,
+    },
+    props: {
+      type: Object as PropType<any>,
+      default: undefined,
+    },
+    cell: {
+      type: Object as PropType<Cell<any, any, any>>,
+      default: undefined,
+    },
+    header: {
+      type: Object as PropType<Header<any, any, any>>,
+      default: undefined,
+    },
+    footer: {
+      type: Object as PropType<Header<any, any, any>>,
+      default: undefined,
+    },
+  },
+  setup: (props: {
+    render?: any
+    props?: any
+    cell?: Cell<any, any, any>
+    header?: Header<any, any, any>
+    footer?: Header<any, any, any>
+  }) => {
+    return () => {
+      // New shorthand pattern: extract render and props from cell/header/footer
+      if (props.cell) {
+        return flexRender(
+          props.cell.column.columnDef.cell,
+          props.cell.getContext(),
+        )
+      }
 
-        return rendered
+      if (props.header) {
+        return flexRender(
+          props.header.column.columnDef.header,
+          props.header.getContext(),
+        )
       }
 
-      if (typeof props.render === 'object') {
-        return h(props.render, props.props)
+      if (props.footer) {
+        return flexRender(
+          props.footer.column.columnDef.footer,
+          props.footer.getContext(),
+        )
       }
 
-      return props.render
+      // Legacy pattern: use render and props directly
+      return flexRender(props.render, props.props)
     }
   },
 })