@tanstack/table-devtools/dist/TableContextProvider.js

Devtools for TanStack Table.

import { getTableDevtoolsTargets, subscribeTableDevtoolsTargets } from "./tableTarget.js";
import { createContext, createEffect, createMemo, createSignal, onCleanup, useContext } from "solid-js";
import { createComponent } from "solid-js/web";

//#region src/TableContextProvider.tsx
const TableDevtoolsContext = createContext(void 0);
const TableContextProvider = (props) => {
	const initialTargets = getTableDevtoolsTargets();
	const [targets, setTargets] = createSignal(initialTargets);
	const [selectedTargetId, setSelectedTargetId] = createSignal(initialTargets[0]?.id);
	const [activeTab, setActiveTab] = createSignal("features");
	const selectedTarget = createMemo(() => targets().find((target) => target.id === selectedTargetId()));
	const table = createMemo(() => selectedTarget()?.table);
	createEffect(() => {
		const unsubscribe = subscribeTableDevtoolsTargets((nextTargets) => {
			setTargets(nextTargets);
		});
		onCleanup(unsubscribe);
	});
	createEffect(() => {
		const nextTargets = targets();
		const currentSelectedTargetId = selectedTargetId();
		if (nextTargets.length === 0) {
			if (currentSelectedTargetId !== void 0) setSelectedTargetId(void 0);
			return;
		}
		if (!currentSelectedTargetId || !nextTargets.some((target) => target.id === currentSelectedTargetId)) setSelectedTargetId(nextTargets[0]?.id);
	});
	return createComponent(TableDevtoolsContext.Provider, {
		value: {
			targets,
			selectedTargetId,
			setSelectedTargetId,
			table,
			activeTab,
			setActiveTab
		},
		get children() {
			return props.children;
		}
	});
};
function useTableDevtoolsContext() {
	const context = useContext(TableDevtoolsContext);
	if (!context) throw new Error("useTableDevtoolsContext must be used within TableContextProvider");
	return context;
}

//#endregion
export { TableContextProvider, useTableDevtoolsContext };