@tanstack/angular-table-devtools/dist/TableDevtools.js

Angular devtools for TanStack Table.

import { computed, effect } from "@angular/core";
import { TableDevtoolsCore } from "@tanstack/table-devtools";

//#region src/TableDevtools.ts
function resolvePanelProps(props) {
	return {
		theme: props?.theme ?? "dark",
		devtoolsOpen: props?.devtoolsOpen ?? true
	};
}
const TableDevtoolsPanel = () => (props, host) => {
	const panel = host.ownerDocument.createElement("div");
	panel.style.height = "100%";
	host.appendChild(panel);
	const panelProps = computed(() => resolvePanelProps(props()), { equal: (previous, next) => previous.theme === next.theme && previous.devtoolsOpen === next.devtoolsOpen });
	const panelEffect = effect((onCleanup) => {
		const instance = new TableDevtoolsCore();
		instance.mount(panel, panelProps());
		onCleanup(() => instance.unmount());
	});
	return () => {
		panelEffect.destroy();
		panel.remove();
	};
};
const TableDevtoolsPanelNoOp = () => (_props, _host) => () => {};

//#endregion
export { TableDevtoolsPanel, TableDevtoolsPanelNoOp, resolvePanelProps };