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

Headless UI for building powerful tables & datagrids for Solid.

import { FlexRender } from "./FlexRender.js";
import { solidReactivity } from "./reactivity.js";
import { constructTable } from "@tanstack/table-core";
import { createComputed, getOwner, mergeProps, onCleanup, untrack } from "solid-js";

//#region src/createTable.ts
/**
* Creates a Solid table instance backed by Solid-aware TanStack Store atoms.
*
* Table APIs and atom reads participate in Solid dependency tracking, so
* computations that read a specific slice can update without invalidating
* unrelated UI. Use `table.Subscribe` to create atom-tracked render boundaries.
*
* @example
* ```tsx
* const table = createTable(
*   {
*     features,
*     columns,
*     data,
*   },
* )
* ```
*/
function createTable(tableOptions) {
	const owner = getOwner();
	const reactivity = solidReactivity(owner);
	const mergedOptions = mergeProps(tableOptions, { features: {
		coreReactivityFeature: reactivity,
		...tableOptions.features
	} });
	const resolvedOptions = mergeProps({ mergeOptions: (defaultOptions, options) => {
		return mergeProps(defaultOptions, options);
	} }, mergedOptions);
	const table = constructTable(resolvedOptions);
	createComputed(() => {
		const userState = tableOptions.state;
		if (userState) for (const key in userState) userState[key];
		untrack(() => {
			table.setOptions((prev) => {
				return mergeProps(prev, mergedOptions);
			});
		});
	});
	onCleanup(() => reactivity.unmount?.());
	table.Subscribe = (props) => {
		return props.children(table.atoms);
	};
	table.FlexRender = FlexRender;
	return table;
}

//#endregion
export { createTable };