svelte-simple-datatables icon indicating copy to clipboard operation
svelte-simple-datatables copied to clipboard

Action Buttons?

Open jeffRTC opened this issue 3 years ago • 5 comments

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

jeffRTC avatar Mar 08 '21 07:03 jeffRTC

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.

nooreldeensalah avatar Aug 30 '21 22:08 nooreldeensalah

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

Audhut avatar Nov 08 '21 13:11 Audhut

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).

nooreldeensalah avatar Nov 09 '21 20:11 nooreldeensalah

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

Audhut avatar Nov 10 '21 14:11 Audhut

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

image

kevin4dhd avatar Sep 28 '22 22:09 kevin4dhd