datatables-contextual-actions v1.3.2

datatables-contextual-actions

👉View Example👈

A DataTables JS extension for adding contextual options to one or many selected rows. Ideal if you want synchronized buttons and context-menu actions defined in a single place.

This will alter your DataTables table in the following ways:

• Your actions will be rendered as a row of buttons above your table
• Right-clicking a row will select it and present the user with a context menu of your actions

Both can be individually enabled/disabled.

Dependencies:

• DataTables, the world's most comprehensive jQuery-based table component

Getting Started:

• Use DataTables in your project
• Include the javascript and css in your project:

<!-- For example, use a CDN: -->
<link rel="stylesheet" href="https://unpkg.com/datatables-contextual-actions@latest/dist/dataTables.contextualActions.min.css"/>
<script src="https://unpkg.com/datatables-contextual-actions@latest/dist/dataTables.contextualActions.min.js"></script>

• Initialize with a configuration (see the Configuration section below)

$(document).ready(function () {
	// Set up our table in standard DataTables fashion (with selection enabled)
	var myTable = $('#dt').DataTable({
		select: {
			style: 'os',
			selector: 'td:first-child',
		},
	});

	// And initialize our plugin.
	myTable.contextualActions({
		// Configuration options as described above
	});
});

Configuration:

options

options.contextMenu

options.buttonList

options.item[]

Please see the example page referred to above for a demo of how to use all these options together.

Refreshing:

If you change underlying data that some renderers rely on (isDisabled on a static-typed action, for example), and want to update the controls without having the user manually select/deselect rows, you can force-update contextualActions like so:

$(document).ready(function () {
	var myTable = $('#dt').DataTable({
		// ...
	});

	// And initialize our plugin.
	var myContextActions = myTable.contextualActions({
		// ...
	});

	// Manually refresh the control and force all actions to be re-evaluated
	myContextActions.update();
});

Development & Building:

• Launch the included VSCode workspace file (datatables-contextual-actions.code-workspace)
• Run npm i to install any dependencies
• Perform any development and test in the ~/index.html file
• When you're ready to build, execute the default build task (Ctrl + Shift + B)
• Test the built changes in the ~/docs/index.html documentation/demo file