Using dataComponent for edit options need data context

[TechplexEngineer]

I'm hoping to use the dataComponent on ptInstructs to create Edit and Delete buttons in a column in the table.

I've successfully created a component "Actions.svelte:

<script lang="ts">
    export let value; //The content of the cell
    export let rowIndex; //The position of the row relative to the page
    export let rowId; //The position of the row relative to the dataset
    export let instructKey; //The instruct key of the column (eg. actions)
</script>
<button class="btn btn-sm btn-outline-primary">Edit</button>
<button class="btn btn-sm btn-outline-danger">Delete</button>

I'm not sure what the best way is to implement button functions since the rowId prop is the most specific information.

I believe Jquery Datatables provides access to the whole row of data to allow the action logic to be self contained. Would you consider such a pull request to add an additional prop rowData (or similar name) with the row of data?

[muonw-public]

I'm not sure what the best way is to implement button functions since the rowId prop is the most specific information.

An efficient way to access (and modify) your dataset from within your custom component is to share the dataset via a Svelte store. So, for example create lib/stores/mainStore.ts with the following content:

import { writable } from 'svelte/store';
import type { Data } from '../../../node_modules/@muonw/powertable/components/PowerTable.svelte';

export const dataStore = writable(<Data[]>[]);

Then, in your +page.svelte set and use the store value:

<script lang="ts">
import { dataStore } from '$lib/stores/mainStore';
import { PowerTable } from '@muonw/powertable';
import MyComponent from './MyComponent.svelte';
import data from '../../../data/names.json';
import type { Instructs, Data } from '../../../../node_modules/@muonw/powertable/components/PowerTable.svelte';
import type { ComponentType, SvelteComponent } from 'svelte';

dataStore.set(data);

let ptInstructs: Instructs[] = [
    {key: 'id'},
    {key: 'name', parseAs: 'component', dataComponent: <ComponentType<SvelteComponent>>MyComponent}
];
</script>

<PowerTable ptData={$dataStore} {ptInstructs} />

Finally, in your custom component (in this example MyComponent.svelte) use the store to retrieve a dataset row by rowId:

<script lang="ts">
export let value: string = '';
export let rowIndex: number;
export let rowId: number;
export let instructKey: string;

import { dataStore } from "$lib/stores/mainStore";

function logRow(rowId: number) {
    console.log($dataStore[rowId]);
}
</script>

<button on:click={() => logRow(rowId)}>Console.log Row data</button>

[TechplexEngineer]

Perfect, that works thanks for the detailed explanation!