[Feature request] Dynamic table content - Svelte

[piotrowski]

Hello. Following what we talked at gitter 😄

Use case:

I want to be able to press X mark and remove every line I want. Right now it is not possible, as there is no callback from renderComponent.

MY solution

1. Add handleUpdate function to headers. This function is basically overwriting tabelArgs with new value:

headers: [
		...		
		{
			label: 'Remove',
			key: 'interactive',
			width: '10%',
			handleUpdate: handleUpdate,
			renderComponent: () => RemoveRow
		}
],

2. Add event to svelte:component (I have extracted code from yarn package)

<svelte:component
	this={headers[cIndex].renderComponent()}
	on:update={headers[cIndex].handleUpdate}
	{...{ cellValue: row[key] }}
/>

3. Inside the renderComponent I have code that dispatches event:

dispatch('update', {
        id: cellValue.id
});

So as you see it is quite easy to do, however it involves adding new field to headers API.

[roblevintennis]

I like the overall idea and direction 👍

I have some question just for clarification and so I have full context…

In your example 2. I'm interpreting that as some code you've extracted from the node modules package and I'm wondering why it's headers (perhaps it's an older version?); I think those are mapped to columns:
https://github.com/AgnosticUI/agnosticui/blob/master/agnostic-svelte/src/lib/components/Table/Table.svelte#L370
This is probably a non-issue I just want to make sure I'm understanding your example 100%.

I'm wondering what is handleUpdate meant for exactly? The use case here is row removal, but I think if we have a handleUpdate the consumer might do other things too no? CRUD? https://socket.dev/npm/package/svelte-generic-crud-table appears to support firing CRUD events individually on:remove, on:update, on:create etc. (although their implementation is built to support more sophisticated CRUD operations as part of its feature set; ours does not...at least not yet and it would be ideal if we can let consumer handle most of the logic control inverted if possible).

Maybe I'm hung up on the "update" part being so closely a part of CRUD. If we feel a single event is simplest I suppose we could also call it handleChange just to differentiate from CRUD.

All said, I think you're basically just dispatching an event so the consumer will "known" that cellValue.id has been updated somehow. What's triggering the updates internal to the table in the first place?

Another question. When the consumer receives on:update callback, are they going to get the table to re-render by passing in updated rows props or? That's the goal correct? Consumer will remove the row in its local code then pass in the list of rows after such removal?

@Croug you've done the most work in the Table / Pagination of late. Do you have any input, questions or concerns here?

[piotrowski]

Yeah, you could call it handleChange function. It is fired after being dispatched from Table. It works just like you said, I am rerendering full table each time, might be not ideal, but good enough for my case.

[roblevintennis]

Ok thanks for clarifying @apiotrowski312 -- let's cut a PR when you can 👍🏽