How to pass plugin props dynamically into an external component.

[dawidseipold]

Hi. How can I create a type that would have all of the plugins types in it? I want type safety in my Toolbar, but can't seem to get this working. I can't just create a type based on typeof PluginStates since I don't have any way to export it from the svelte component then. So how can I do it? Am I missing something?

This what my pluginSates type looks like:

const pluginStates: PluginStates<{
    select: TablePlugin<any, SelectedRowsState<any>, Record<string, never>, SelectedRowsPropSet>;
    sort: TablePlugin<any, SortByState<...>, SortByColumnOptions, SortByPropSet>;
    pagination: TablePlugin<...>;
    filter: TablePlugin<...>;
    hide: TablePlugin<...>;
    grid: TablePlugin<...>;
}>

And here's my component's index.ts:

import type { TableViewModel } from 'svelte-headless-table';
import Root from './toolbar.svelte';
import type { OrderData } from '$lib/constants/schemas/order';
import type { AnyPlugins } from 'svelte-headless-table/plugins';

type Props = {
	tableViewModel: TableViewModel<OrderData, AnyPlugins>;
};

export {
	// Public
	Root,
	type Props,

	// Global
	Root as DataTableToolbar,
	type Props as DataTableToolbarProps
};

Instead of AnyPlugins I would like the approach from above.

[bryanmylee]

Hey @dawidseipold, the plugin state's types are derived dynamically from createTable, so you need to statically know the type of the createTable invocation to derive the plugin state type.

One solution to do so is to create the table in a separate function and export types from that function:

// myTable.ts
import { Table, createTable } from 'svelte-headless-table';
import { addSortBy, type PluginStates } from 'svelte-headless-table/plugins';
import type { Writable } from 'svelte/store';

export function createMyTable<T>(data: Writable<T[]>) {
	return createTable(data, {
		sort: addSortBy(),
	});
}

type MyPlugins = ReturnType<typeof createMyTable> extends Table<
	unknown,
	infer Plugins
>
	? Plugins
	: never;

export type MyPluginsState = PluginStates<MyPlugins>;