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

Headless UI for building powerful tables & datagrids for Solid.

import { Match, Show, Switch, createComponent } from "solid-js";
import { createComponent as createComponent$1, memo } from "solid-js/web";

//#region src/FlexRender.tsx
/**
* Renders a Solid table template value with the provided context props.
*
* Use this for custom header, cell, or footer renderers when you need the
* lower-level function form. Most Solid UIs can use the `FlexRender` component
* instead.
*
* @example
* ```tsx
* flexRender(cell.column.columnDef.cell, cell.getContext())
* ```
*/
function flexRender(Comp, props) {
	if (Comp === null || Comp === void 0) return null;
	if (typeof Comp === "function") return createComponent(Comp, props);
	return Comp;
}
/**
* Simplified component wrapper of `flexRender`. Use this utility component to render headers, cells, or footers with custom markup.
* Only one prop (`cell`, `header`, or `footer`) may be passed.
* @example
* ```tsx
* <FlexRender cell={cell} />
* <FlexRender header={header} />
* <FlexRender footer={footer} />
* ```
*
* This replaces calling `flexRender` directly like this:
* ```tsx
* flexRender(cell.column.columnDef.cell, cell.getContext())
* flexRender(header.column.columnDef.header, header.getContext())
* flexRender(footer.column.columnDef.footer, footer.getContext())
* ```
*/
function FlexRender(props) {
	return createComponent$1(Switch, { get children() {
		return [
			createComponent$1(Match, {
				keyed: true,
				get when() {
					return memo(() => "cell" in props)() && props.cell;
				},
				children: (c) => {
					const def = c.column.columnDef;
					const groupingCell = c;
					const groupingDef = def;
					return createComponent$1(Show, {
						get when() {
							return groupingCell.getIsAggregated?.();
						},
						get fallback() {
							return createComponent$1(Show, {
								get when() {
									return !groupingCell.getIsPlaceholder?.();
								},
								fallback: null,
								get children() {
									return flexRender(def.cell, c.getContext());
								}
							});
						},
						get children() {
							return flexRender(groupingDef.aggregatedCell ?? def.cell, c.getContext());
						}
					});
				}
			}),
			createComponent$1(Match, {
				keyed: true,
				get when() {
					return memo(() => "header" in props)() && props.header;
				},
				children: (header) => flexRender(header.column.columnDef.header, header.getContext())
			}),
			createComponent$1(Match, {
				keyed: true,
				get when() {
					return memo(() => "footer" in props)() && props.footer;
				},
				children: (footer) => flexRender(footer.column.columnDef.footer, footer.getContext())
			})
		];
	} });
}

//#endregion
export { FlexRender, flexRender };