In table dropdown

This example demonstrates the use of a dropdown control to trigger editing actions in the last column of the table, a common pattern that is used for editing interfaces. To demonstrate various functions of Editor, there are additional option beyond simply editing and deleting rows - you can also duplicate a row, and trigger an action to increase the salary via a direct API call. This could also readily be used for setting boolean flags such as "Approved" or "Archived", if suitable for your data set.

The dropdown used in this example is a custom one (so this example contains a lot more CSS than most of the demos!). If you are using a styling framework such as Bootstrap or Bulma, you could use their Dropdown components. There are also a great many dropdown libraries available, or you could ever use a simple select. Use whatever is appropriate for your use case, the key take away from this example is being able to trigger editing actions via the Editor API.

Name	Position	Office	Extn.	Start date	Salary	Actions
Name	Position	Office	Extn.	Start date	Salary	Actions

Javascript
HTML
CSS
Ajax
Server-side script
Comments

The Javascript shown below is used to initialise the table shown in this example:

var editor = new DataTable.Editor({
	ajax: '../php/staff.php',
	fields: [
		{
			label: 'First name:',
			name: 'first_name'
		},
		{
			label: 'Last name:',
			name: 'last_name'
		},
		{
			label: 'Position:',
			name: 'position'
		},
		{
			label: 'Office:',
			name: 'office'
		},
		{
			label: 'Extension:',
			name: 'extn'
		},
		{
			label: 'Start date:',
			name: 'start_date',
			type: 'datetime'
		},
		{
			label: 'Salary:',
			name: 'salary'
		}
	],
	table: '#example'
});

var table = new DataTable('#example', {
	ajax: '../php/staff.php',
	columns: [
		{
			data: null,
			render: (data) => data.first_name + ' ' + data.last_name
		},
		{ data: 'position' },
		{ data: 'office' },
		{ data: 'extn' },
		{ data: 'start_date' },
		{ data: 'salary', render: DataTable.render.number(null, null, 0, '$') },
		{
			data: null,
			className: 'dt-center actions',
			defaultContent: '<button class="dropdown">Action</button>',
			orderable: false
		}
	],
	layout: {
		topStart: {
			buttons: [
				{
					text: 'Create new record',
					action: function () {
						// Create new record
						editor.create({
							title: 'Create new record',
							buttons: 'Add'
						});
					}
				}
			]
		}
	}
});

var actions = $('#actions');

// Show the action dropdown
table.on('click', 'button.dropdown', function (e) {
	e.stopPropagation();

	// Display and position the dropdown
	actions.appendTo(this.parentNode).css({
		display: 'block',
		top: (this.offsetTop + this.offsetHeight + 5),
		right: this.offsetLeft
	});

	// Remove with the next click on the document
	$(document).one('click', function () {
		actions.remove();
	});
});

// Edit button
table.on('click', 'button[value="edit"]', function (e) {
	editor.edit(e.target.closest('tr'), {
		title: 'Edit record',
		buttons: 'Update'
	});
});

// Duplicate button
table.on('click', 'button[value="duplicate"]', function (e) {
	editor
		.edit(e.target.closest('tr'), {
			title: 'Duplicate record',
			buttons: 'Create from existing'
		})
		.mode('create');
});

// 5% button
table.on('click', 'button[value="salary"]', function (e) {
	editor.edit(e.target.closest('tr'), false);

	let current = editor.field( 'salary' ).val();
	editor.field( 'salary' ).val(parseInt(current * 1.05))

	editor.submit();
});

// Delete button
table.on('click', 'button[value="delete"]', function (e) {
	editor.remove(e.target.closest('tr'), {
		title: 'Delete record',
		message: 'Are you sure you wish to remove this record?',
		buttons: 'Delete'
	});
});

const editor = new DataTable.Editor({
	ajax: '../php/staff.php',
	fields: [
		{
			label: 'First name:',
			name: 'first_name'
		},
		{
			label: 'Last name:',
			name: 'last_name'
		},
		{
			label: 'Position:',
			name: 'position'
		},
		{
			label: 'Office:',
			name: 'office'
		},
		{
			label: 'Extension:',
			name: 'extn'
		},
		{
			label: 'Start date:',
			name: 'start_date',
			type: 'datetime'
		},
		{
			label: 'Salary:',
			name: 'salary'
		}
	],
	table: '#example'
});

const table = new DataTable('#example', {
	ajax: '../php/staff.php',
	columns: [
		{
			data: null,
			render: (data) => data.first_name + ' ' + data.last_name
		},
		{ data: 'position' },
		{ data: 'office' },
		{ data: 'extn' },
		{ data: 'start_date' },
		{ data: 'salary', render: DataTable.render.number(null, null, 0, '$') },
		{
			data: null,
			className: 'dt-center actions',
			defaultContent: '<button class="dropdown">Action</button>',
			orderable: false
		}
	],
	layout: {
		topStart: {
			buttons: [
				{
					text: 'Create new record',
					action: function () {
						// Create new record
						editor.create({
							title: 'Create new record',
							buttons: 'Add'
						});
					}
				}
			]
		}
	}
});

let actions = document.querySelector('#actions');

// Show the action dropdown
table.on('click', 'button.dropdown', function (e) {
	e.stopPropagation();

	// Display and position the dropdown
	this.parentNode.append(actions);
	actions.style.display = 'block';
	actions.style.top = (this.offsetTop + this.offsetHeight + 5) + 'px';
	actions.style.right = this.offsetLeft + 'px';

	// Remove with the next click on the document
	document.addEventListener('click', function () {
		actions.remove();
	});
});

// Edit button
table.on('click', 'button[value="edit"]', function (e) {
	editor.edit(e.target.closest('tr'), {
		title: 'Edit record',
		buttons: 'Update'
	});
});

// Duplicate button
table.on('click', 'button[value="duplicate"]', function (e) {
	editor
		.edit(e.target.closest('tr'), {
			title: 'Duplicate record',
			buttons: 'Create from existing'
		})
		.mode('create');
});

// 5% button
table.on('click', 'button[value="salary"]', function (e) {
	editor.edit(e.target.closest('tr'), false);

	let current = editor.field( 'salary' ).val();
	editor.field( 'salary' ).val(parseInt(current * 1.05))

	editor.submit();
});

// Delete button
table.on('click', 'button[value="delete"]', function (e) {
	editor.remove(e.target.closest('tr'), {
		title: 'Delete record',
		message: 'Are you sure you wish to remove this record?',
		buttons: 'Delete'
	});
});

In addition to the above code, the following Javascript library files are loaded for use in this example:

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

td.actions {
	position: relative;
}

button.dropdown {
	background: rgb(255, 255, 255);
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: .25em 1em;
	font-size: 12px;
}

button.dropdown:hover {
	background: rgb(245, 245, 245);
	cursor: pointer;
}

button.dropdown::after {
	position: relative;
	display: inline-block;
	top: -1px;
	margin-left: 0.25em;
	content: '▼';
	opacity: 0.5;
	font-size: 0.7rem;
}

div.dropdown {
	display: none;
	position: absolute;
	z-index: 2;

	border: 1px solid #ccc;
	background: rgb(255, 255, 255);
	border-radius: 3px;
	width: 200px;
	padding: 0;
	box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.15);
}

div.dropdown button {
	position: relative;
	width: 100%;
	padding: .75em 1em;
	margin: 0;
	border-radius: 0;
	text-align: left;

	background: white;
	border: none;
	border-bottom: 1px solid #ccc;
	font-size: 12px;
}

div.dropdown button:hover {
	background: rgb(245, 245, 245);
	cursor: pointer;
}

div.dropdown button:last-child {
	border-bottom: none;
}

div.dropdown button::after {
	position: absolute;
	right: 5px;
    display: inline-block;
    font-family: FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    margin-right: 0.5em;
	opacity: 0.7;
}

div.dropdown button[value='edit']::after {
    content: '\f040';
}

div.dropdown button[value='duplicate']::after {
    content: '\f24d';
}

div.dropdown button[value='salary']::after {
    content: '\f155';
}

div.dropdown button[value='delete']::after {
    content: '\f1f8';
}

/* Dark mode colouring */
html.dark button.dropdown {
	background: rgba(255, 255, 255, 0.15);
	border: 1px solid rgb(89, 91, 94);
	color: white;
}

html.dark button.dropdown:hover {
	background: rgba(255, 255, 255, 0.25);
}

html.dark div.dropdown {
	background: rgb(33, 37, 41);
	border: 1px solid rgb(89, 91, 94);
}

html.dark div.dropdown button {
	background: rgba(255, 255, 255, 0.15);
	border-bottom: 1px solid rgb(89, 91, 94);
	color: white;
}

html.dark div.dropdown button:hover {
	background: rgba(255, 255, 255, 0.25);
}

The following CSS library files are loaded for use in this example to provide the styling of the table:

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

The script used to perform the server-side interaction for this demo is shown below. This server uses PHP, so the PHP script is shown, however our download packages include the equivalent script for other platforms, including .NET and Node.js. Server-side scripts can be written in any language, using the protocol described in the Editor documentation.

In table dropdown

Other examples

Simple initialisation

Advanced initialisation

Triggering editing

DataTables as an input

Dates and time

Dropdown input types

DataTables extensions

Inline editing

Bubble editing

API

Standalone

Styling

Plug-ins

DataTables