@tanstack/vue-table/dist/FlexRender.js

Headless UI for building powerful tables & datagrids for Vue.

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 (render === null || render === void 0) return render;
	if (typeof render === "function") {
		const rendered = render(props);
		if (rendered === null || rendered === void 0) return rendered;
		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: {
			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 (props.cell) {
				const cell = props.cell;
				const def = cell.column.columnDef;
				if (cell.getIsAggregated?.()) return flexRender(def.aggregatedCell ?? def.cell, cell.getContext());
				if (cell.getIsPlaceholder?.()) return null;
				return flexRender(def.cell, 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, flexRender };