@tanstack/table-devtools/dist/components/OptionsPanel.js

Devtools for TanStack Table.

import { useTableDevtoolsContext } from "../TableContextProvider.js";
import { useStyles } from "../styles/use-styles.js";
import { useTableStore } from "../useTableStore.js";
import { NoTableConnected } from "./NoTableConnected.js";
import { ResizableSplit } from "./ResizableSplit.js";
import { Show, createMemo } from "solid-js";
import { className, createComponent, effect, insert, template } from "solid-js/web";
import { JsonTree } from "@tanstack/devtools-ui";

//#region src/components/OptionsPanel.tsx
var _tmpl$ = /*#__PURE__*/ template(`<div>`);
var _tmpl$2 = /*#__PURE__*/ template(`<div>Options`);
function projectOptionsForTree(full) {
	const { state: _s, data: _d, features: _f, ...options } = full;
	return options;
}
function OptionsPanel() {
	const styles = useStyles();
	const { table } = useTableDevtoolsContext();
	const optionsStoreValue = useTableStore(() => table()?.optionsStore, (options) => options);
	const options = createMemo(() => {
		const tableInstance = table();
		if (!tableInstance) return;
		return projectOptionsForTree(optionsStoreValue() ?? tableInstance.options);
	});
	return createComponent(Show, {
		get fallback() {
			return createComponent(NoTableConnected, { title: "Options" });
		},
		get when() {
			return table();
		},
		get children() {
			var _el$ = _tmpl$();
			insert(_el$, createComponent(ResizableSplit, {
				get left() {
					return [(() => {
						var _el$2 = _tmpl$2();
						effect(() => className(_el$2, styles().sectionTitle));
						return _el$2;
					})(), createComponent(JsonTree, {
						copyable: true,
						get value() {
							return options();
						}
					})];
				},
				right: []
			}));
			effect(() => className(_el$, styles().panelScroll));
			return _el$;
		}
	});
}

//#endregion
export { OptionsPanel };