Adding my own Button in the grid

JReis23

Hello,

I have a problem. I'm trying to add my own button inside the grid, but I'm unable to do so.

I couldn't find a way to do this in the documentation, and I'm really struggling with it. I know that I can use the buttons from your core library, but I want to centralize all changes to the buttons in one place. Since I’ll be using this grid in multiple places, I’ve also created a component for the grid.

My Button code:

<script lang="ts">
	import type { Snippet } from 'svelte';

	interface SvgPath {
		d?: string;
		stroke_linecap?: 'round' | 'inherit' | 'butt' | 'square';
		stroke_linejoin?: 'round' | 'inherit' | 'arcs' | 'miter-clip' | 'miter' | 'bevel';
		stroke_width?: string;
	}

	interface SvgProps {
		class?: string;
		xmlns?: string ;
		viewBox?: string;
		fill?: string;
		stroke?: string;
		path?: SvgPath[];
	}

	interface Props {
		type?: 'button' | 'reset' | 'submit';
		className?: string;
		formaction?: string;
		href?: string;
		svg?: SvgProps;
		buttonText: Snippet;
		onclick?: (event: MouseEvent) => void;
		arialabel?: string;
	}

	let { type, className, formaction, href, buttonText, svg, onclick, arialabel }: Props = $props();
</script>

{#if type}
	<button {type} class={className}>{@render buttonText()}</button>
{:else if formaction}
	<button class={className} {formaction}>{@render buttonText()}</button>
{:else if href}
	<a {href} class={className}>
		{#if svg}
			<svg
				class={svg?.class}
				xmlns={svg?.xmlns}
				fill={svg?.fill}
				viewBox={svg?.viewBox}
				stroke={svg?.stroke}
			>
				{#if svg?.path}
					{#each svg.path as path}
						<path
							stroke-linecap={path.stroke_linecap}
							stroke-linejoin={path.stroke_linejoin}
							stroke-width={path.stroke_width}
							d={path.d}
						/>
					{/each}
				{/if}
			</svg>
		{/if}

		{@render buttonText()}</a
	>
{:else}
	<button {onclick} class={className} aria-label={arialabel}>{@render buttonText()}</button>
{/if}

My Grid component:

<script lang="ts">
	import { Grid, Tooltip } from 'wx-svelte-grid';
	import type { SvelteComponent } from 'svelte';
	import Button from './Button.svelte';
	
	type Column = {
		id: string;
		header: string;
		footer: string;
		flexgrow?: number;
		width?: number;
		treetoggle?: boolean;
		cell?: SvelteComponent;
	};

	type Props = {
		data: any[];
		columns: Column[];
		tree?: boolean;
		className?: string;
		onRowClick?: (event: any) => void;
		api: any;
	};

	let { data, columns, tree, onRowClick, api }: Props = $props();
</script>

<Tooltip {api} content={Button}>
	<Grid {tree} {data} {columns} onClick={onRowClick} bind:this={api} />
</Tooltip>

Where I use the component:

<script lang="ts">
	import type { PageData } from './$types';
	import MyGrid from '$lib/components/ui/MyGrid.svelte';

	let { data }: { data: PageData } = $props();
	let filteredPatients = $state(data.patients);
	let treeData = data.patients;

	let api;
	const treeColumns = [
		{
			id: 'patient_name',
			header: 'Patient Name',
			footer: 'Patient Name',
			flexgrow: 1,
			treetoggle: true
		},
		{
			id: 'patient_phone_number',
			header: 'Phone',
			footer: 'Phone',
			width: 150
		},
		{
			id: 'city',
			width: 100,
			header: 'City',
			footer: 'City'
		},
		{
			id: 'treatment_type',
			width: 150,
			header: 'Treatment',
			footer: 'Treatment'
		},
		{
			id: 'treatment_date',
			width: 150,
			header: 'Date',
			footer: 'Date'
		}
	];

</script>

<MyGrid {api} tree={true} data={treeData} columns={treeColumns} />

I have tried several different approaches but same result.

I've started to work with your library today and I really like the way it was done. I hope Grid can be passed to TS in a near future so a lot more devs can use it.

Keep the good work. :)