rowReorder.selector

Define the selector used to pick the elements that will start a drag. Please note - this property requires the RowReorder extension for DataTables.

Description

In order to be able to start a row drag and drop reorder, the user needs to be able to click and drag an element in the row. This option defines what element in the table row performs that option.

The value of this option can take any jQuery selector, providing the option to provide potentially complex selection options, but typically you will wish to select either a specific cell (the default value is to select the first visible cell in the table), the whole row or a specific button in the table that is styles to appear as a drag start handle to the end user.

Type

string

Description:

jQuery selector to select which element will be used as the drag start handle.

Default

  • Value: td:first-child

First visible cell in the table

Examples

Enable RowReorder and the drag handle to be the last cell in the row:

$('#example').DataTable( {
	rowReorder: {
		selector: 'td:last-child'
	}
} );

Use a span element in the row - this could be styled to look like a drag handle:

$('#example').DataTable( {
	rowReorder: {
		selector: 'span.reorder'
	}
} );

Use the whole row as the drag start handle:

$('#example').DataTable( {
	rowReorder: {
		selector: 'tr'
	}
} );