vincjo / svelte-simple-datatables

A Datatable component for Svelte

Home Page:https://vincjo.fr/svelte-simple-datatables

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Action Buttons?

jeffRTC opened this issue · comments

Any plan to add action buttons where a user could perform a action on selected row?

Not sure if this is relevant now, but I thought of making a comment in case if someone wanted a workaround.

I've used a quick and dirty workaround for this scenario:
image
I defined a column Actions and then I added buttons with event handlers to handle those actions.

This is the equivalent code

<Datatable settings={$settings} data={$labels}>
	<thead>
		<th data-key="id">ID</th>
		<th data-key="name">Label</th>
		<th>Actions</th>
	</thead>
	<tbody>
		{#each $rows as { id, name }, i}
			<tr>
				<td>
					{id}
				</td>
				<td>
					{name}
				</td>
				<td>
					<button
						data-type="labels"
						data-id={id}
						on:click={(event, index = i) => handleEdit(event, index)}>Edit</button
					>
					<button data-type="labels" data-id={id} on:click={handleDelete}>Delete</button>
				</td>
			</tr>
		{/each}
	</tbody>
</Datatable>

For sure, this isn't an optimal solution, because the table CSS becomes skewed in case of many columns.

can you share your settings object. were you able to hide the filter for Actions column?

can you share your settings object. were you able to hide the filter for Actions column?

In case if your question is to me, I've opened the project, and it had only this as the settings.
{ columnFilter: true } Which I guess is the default behavior?
But anyway, but my method was to embed the buttons, probably the data-table doesn't parse them as text, thus it doesn't offer filtering for them (not really sure).

can you share your settings object. were you able to hide the filter for Actions column?

In case if your question is to me, I've opened the project, and it had only this as the settings. { columnFilter: true } Which I guess is the default behavior? But anyway, but my method was to embed the buttons, probably the data-table doesn't parse them as text, thus it doesn't offer filtering for them (not really sure).

Thanks . i wanted to disable the filter for an individual column. i just had to remove the data-key from the header

I get this part bugged when I want to have actions and columnFilter at the same time, any solution?

image