bps-rw/wwwroot/plugins/datatables/dataTables.tailwindcss.js

/*! DataTables Tailwind CSS integration
 */

(function (factory) {
	if (typeof define === 'function' && define.amd) {
		// AMD
		define(['jquery', 'datatables.net'], function ($) {
			return factory($, window, document);
		});
	}
	else if (typeof exports === 'object') {
		// CommonJS
		var jq = require('jquery');
		var cjsRequires = function (root, $) {
			if (!$.fn.dataTable) {
				require('datatables.net')(root, $);
			}
		};

		if (typeof window === 'undefined') {
			module.exports = function (root, $) {
				if (!root) {
					// CommonJS environments without a window global must pass a
					// root. This will give an error otherwise
					root = window;
				}

				if (!$) {
					$ = jq(root);
				}

				cjsRequires(root, $);
				return factory($, root, root.document);
			};
		}
		else {
			cjsRequires(window, jq);
			module.exports = factory(jq, window, window.document);
		}
	}
	else {
		// Browser
		factory(jQuery, window, document);
	}
}(function ($, window, document) {
	'use strict';
	var DataTable = $.fn.dataTable;



	/*
	 * This is a tech preview of Tailwind CSS integration with DataTables.
	 */

	// Set the defaults for DataTables initialisation
	$.extend(true, DataTable.defaults, {
		renderer: 'tailwindcss',
		dom: "<'grid grid-cols-1 bg-gray-50 rounded-t-md py-3 px-2 lg:grid-cols-12 mb-1 items-center space-y-4 lg:space-y-0'<'lg:col-span-9'l><'lg:col-span-3'f><'lg:justify-self-center'B>>" +
			"rt" +
			"<'flex flex-col lg:flex-row items-center py-2 px-2 lg:justify-between pt-4'ip>",
		language: {
			processing: '<div class="badge badge-soft badge-info rounded-full">' +
				'<span class="loading loading-bars loading-xs"></span>' +
				'Sedang memproses' +
				'</div>',
			loadingRecords: "Sedang memuat...",
			select: {
				rows: {
					_: '<span class="ms-4 badge badge-sm badge-soft badge-primary">%d baris dipilih</span>',
					0: "",
					1: '<span class="ms-4 badge badge-sm badge-soft badge-primary">1 baris dipilih</span>'
				}
			},
			lengthMenu: "Tampilkan _MENU_ data",
			search: "",
			searchPlaceholder: "Cari data disini...",
			emptyTable: "Tidak ada data yang tersedia pada tabel ini",
			info: "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
			infoEmpty: "Menampilkan 0 sampai 0 dari 0 data",
			infoFiltered: "(disaring dari _MAX_ data keseluruhan)",
			zeroRecords: "Tidak ditemukan data yang sesuai",
		},
	});


	// Default class modification
	$.extend(true, DataTable.ext.classes, {
		container: "dt-container dt-tailwindcss p-2",
		empty: {
			row: 'text-center'
		},
		info: {
			container: 'dt-info'
		},
		search: {
			container: "input input-sm rounded-full",
			input: "",
		},
		length: {
			select: "select select-sm w-auto",
		},
		processing: {
			container: "dt-processing"
		},
		paging: {
			active: 'bg-primary-500 text-white border-primary-500',
			notActive: '',
			button: 'join-item btn btn-sm btn-outline rounded-full',
			first: '',
			last: '',
			enabled: 'border-gray-300 border-1 text-gray-500 hover:bg-primary-500 hover:text-white hover:border-primary-500',
			notEnabled: 'text-gray-500 border-0'
		},
		order: {
			canAsc: 'dt-orderable-asc',
			canDesc: 'dt-orderable-desc',
			isAsc: 'dt-ordering-asc',
			isDesc: 'dt-ordering-desc',
			none: 'dt-orderable-none',
			position: 'sorting_'
		},
		table: 'dataTable min-w-full text-sm align-middle whitespace-nowrap',
		thead: {
			row: 'bg-white',
			cell: 'px-3 py-4 font-semibold text-left'
		},
		tbody: {
			row: 'even:bg-gray-50',
			cell: 'p-3'
		},
		tfoot: {
			row: 'even:bg-gray-50',
			cell: 'p-3 text-left'
		},
	});

	DataTable.ext.renderer.pagingButton.tailwindcss = function (settings, buttonType, content, active, disabled) {
		var classes = settings.oClasses.paging;
		var btnClasses = [classes.button];

		btnClasses.push(active ? classes.active : classes.notActive);
		btnClasses.push(disabled ? classes.notEnabled : classes.enabled);

		var a = $('<a>', {
			'href': disabled ? null : '#',
			'class': btnClasses.join(' ')
		})
			.html(content);

		return {
			display: a,
			clicker: a
		};
	};

	DataTable.ext.renderer.pagingContainer.tailwindcss = function (settings, buttonEls) {
		var classes = settings.oClasses.paging;

		buttonEls[0].addClass(classes.first);
		buttonEls[buttonEls.length - 1].addClass(classes.last);

		return $('<ul/>').addClass('join gap-1').append(buttonEls);
	};

	DataTable.ext.renderer.layout.tailwindcss = function (settings, container, items) {
		var row = $('<div/>', {
			"class": items.full ?
				'grid grid-cols-1 gap-4 py-2' :
				'flex flex-col lg:flex-row gap-2 lg:justify-between py-2 items-center'
		})
			.appendTo(container);

		DataTable.ext.renderer.layout._forLayoutRow(items, function (key, val) {
			var klass;

			// Apply start / end (left / right when ltr) margins
			if (val.table) {
				klass = 'col-span-2';
			}
			else if (key === 'start') {
				klass = 'justify-self-start';
			}
			else if (key === 'end') {
				klass = 'col-start-2 justify-self-end';
			}
			else {
				klass = 'col-span-2 justify-self-center';
			}

			$('<div/>', {
				id: val.id || null,
				"class": klass + ' ' + (val.className || '')
			})
				.append(val.contents)
				.appendTo(row);
		});
	};


	return DataTable;
}));