text: //== Class definition
  
  var DatatableColumnWidthDemo = function () {
  	//== Private functions
  
  	// basic demo
  	var demo = function () {
  
  		var datatable = $('.m_datatable').mDatatable({
  			// datasource definition
  			data: {
  				type: 'remote',
  				source: {
  					read: {
  						url: 'inc/api/datatables/demos/default.php'
  					}
  				},
  				pageSize: 10,
  				saveState: {
  					cookie: true,
  					webstorage: true
  				},
  				serverPaging: true,
  				serverFiltering: false,
  				serverSorting: true
  			},
  
  			// layout definition
  			layout: {
  				theme: 'default', // datatable theme
  				class: '', // custom wrapper class
  				scroll: false, // enable/disable datatable scroll both horizontal and vertical when needed.
  				height: null, // datatable's body's fixed height
  				footer: false // display/hide footer
  			},
  
  			// column sorting
  			sortable: true,
  
  			pagination: true,
  
  			// columns definition
  			columns: [{
  				field: "RecordID",
  				title: "#",
  				sortable: false, // disable sort for this column
  				width: 40,
  				textAlign: 'center',
  				selector: {class: 'm-checkbox--solid m-checkbox--brand'}
  			}, {
  				field: "OrderID",
  				title: "Order ID",
  				sortable: 'asc', // default sort
  				filterable: false, // disable or enable filtering
  				width: 150
  			}, {
  				field: "Notes",
  				title: "Notes",
  				width: 700
  			}, {
  				field: "CompanyAgent",
  				title: "Agent"
  			}, {
  				field: "ShipDate",
  				title: "Ship Date"
  			}, {
  				field: "Actions",
  				width: 110,
  				title: "Actions",
  				sortable: false,
  				overflow: 'visible',
  				template: function (row) {
  					var dropup = (row.getDatatable().getPageSize() - row.getIndex()) <= 4 ? 'dropup' : '';
  
  					return '<span>\
  						<a href="#" class="m-portlet__nav-link btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill" title="View details">\
  							<i class="la la-ellipsis-h"></i>\
  						</a>\
  						<a href="#" class="m-portlet__nav-link btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill" title="Edit details">\
  							<i class="la la-edit"></i>\
  						</a>\
  						<a href="#" class="m-portlet__nav-link btn m-btn m-btn--hover-danger m-btn--icon m-btn--icon-only m-btn--pill" title="Delete">\
  							<i class="la la-trash"></i>\
  						</a>\
  					</span>';
  				}
  			}]
  		});
  
  		var query = datatable.getDataSourceQuery();
  
  		$('#m_form_search').on('keyup', function (e) {
  			// shortcode to datatable.getDataSourceParam('query');
  			var query = datatable.getDataSourceQuery();
  			query.generalSearch = $(this).val().toLowerCase();
  			// shortcode to datatable.setDataSourceParam('query', query);
  			datatable.setDataSourceQuery(query);
  			datatable.load();
  		}).val(query.generalSearch);
  
  		$('#m_form_status, #m_form_type').selectpicker();
  	};
  
  	return {
  		// public functions
  		init: function () {
  			demo();
  		}
  	};
  }();
  
  jQuery(document).ready(function () {
  	DatatableColumnWidthDemo.init();
  });