Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Using sortable on table columns not on rows #15

Open
codewp opened this issue Oct 14, 2017 · 1 comment
Open

Using sortable on table columns not on rows #15

codewp opened this issue Oct 14, 2017 · 1 comment

Comments

@codewp
Copy link

codewp commented Oct 14, 2017

Is it possible to using sortable on table columns not on rows?
This is an example code that I used to adding ordering feature to table rows, in this example user can order table rows by dragging and dropping rows, but I want to add this feature to order column of table and when user drags that column can order table rows.

<tbody class="container" v-dragula="pricingList" drake="pricingList">
				<tr v-for="pricing in pricingList" v-bind:key="pricing">
					<td><i class="fa fa-reorder" aria-hidden="true"></i></td>
					<td>{{ pricing.id }}</td>
					<td>{{ pricing.name }}</td>
					<td>
						<select v-model="pricing.status" @change="updateStatus( pricing )">
							<option value="0">{{ strings.disabled }}</option>
							<option value="1">{{ strings.enabled }}</option>
						</select>
					</td>
					<td>
						<router-link :to="'/pricing/' + pricing.id" class="button button-primary" :title="strings.edit"><i class="fa fa-edit" aria-hidden="true"></i></router-link>
						<button class="button button-delete" @click="deletePricing( pricing.id )" :title="strings.delete"><i class="fa fa-remove" aria-hidden="true"></i></button>
					</td>
				</tr>
			</tbody>
		</table>
export default {
	name : 'pricing-list',

	created() {
		const $service = this.$dragula.$service
		$service.options( 'pricingList', { direction: 'vertical' } )
		$service.eventBus.$on( 'dragend', (args) => {
			this.pricingList.forEach( ( value, index ) => {
				value.ordering = index + 1;
			});
			this.updateOrders();
		} )
	}
}

draggula

I want to add sortable feature to <td><i class="fa fa-reorder" aria-hidden="true"></i></td> this column of table.

@kristianmandrup
Copy link
Owner

kristianmandrup commented Oct 14, 2017

Should be possible to modify the ModelManager to always sort itself after any update. Exactly the kind of scenario I made it for ;) Would love for you to make a working example we can include in examples folder or in the demo repo. Cheers!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants