DEMO SITE v1.7.24

Tabulator Formatting Bootstrap 4.5 theme

Tabulator Formatting

HIDE CODE
<?php

    $xcrud = Xcrud::get_instance();	
    $xcrud->table('payments');
	$xcrud->label('checkNumber','Check No');
	$xcrud->label('paymentDate','Payment Date');
	$xcrud->label('customerNumber','Customer Number');
	$xcrud->label('amount','Amount');
	$xcrud->columns('paymentDate,customerNumber,checkNumber,amount');
	$xcrud->column_width('checkNumber','35%');
	$xcrud->column_width('paymentDate','25%');
	$xcrud->column_width('action','30%');
	
	$xcrud->tabulator_active(true);
	$xcrud->tabulator_main_properties('responsiveLayout:"collapse",
		                              movableColumns: true,
		                              headerVisible:true,
		                              width: "100%",
		                              height: "400px",
		                              groupStartOpen:true,
		                              placeholder:"No Data Available",
		                              tooltipsHeader:true,
									  tooltips:true');
	
	$xcrud->tabulator_column_properties('customerNumber','topCalc:avg');
	$xcrud->tabulator_column_properties('amount','bottomCalc:sum');
	$xcrud->tabulator_column_properties('paymentDate','topCalcFormatter:star');								  
									  
  							  								  
   //JS gives flexibility to format table									  
   $xcrud->tabulator_row_formatter_js('if(row.getData().customerNumber == 103){
								            row.getElement().style.backgroundColor = "#A6A6DF";
								        }')	;								  
									   
   	
   //Column Formatting	
   //$xcrud->tabulator_column_properties('amount','editor:input');	//edit column
   $xcrud->tabulator_column_properties('amount','formatter:decorateColumn');//apply stlying for amount less than 10000	
   $xcrud->tabulator_general_function_js('var decorateColumn = function(cell, formatterParams){
       var value = cell.getValue();
	   console.log(value);
        if(value < 10000){
            return "<span>" + value + "</span>";
        }else{
            return value;
        }
    };');
	
    echo $xcrud->render();


?>

Payments

Search