Using with jquery 3.3.1 - https://www.gridphp.com

using-jquery-3-3-1.php

<?php
/**
 * PHP Grid Component
 *
 * @author Abu Ghufran <gridphp@gmail.com> - http://www.phpgrid.org
 * @version 2.0.0
 * @license: see license.txt included in package
 */

include_once("../../config.php");

include(PHPGRID_LIBPATH."inc/jqgrid_dist.php");

// Database config file to be passed in phpgrid constructor
$db_conf = array(
	"type" 		=> PHPGRID_DBTYPE,
	"server" 	=> PHPGRID_DBHOST,
	"user" 		=> PHPGRID_DBUSER,
	"password" 	=> PHPGRID_DBPASS,
	"database" 	=> PHPGRID_DBNAME
);

$g = new jqgrid();

$opt["caption"] = "Dairy Products";
$opt["responsive"] = true;
$opt["globalsearch"] = true;
$opt["altRows"] = true;
$opt["rowNum"] = 20; 
$opt["rowheight"] = 30; 
$opt["add_options"]["width"] = "500";
$opt["edit_options"]["width"] = "500";
$opt["view_options"]["width"] = "500";
$opt["height"] = "100%";
$opt["subGrid"] = true;
$opt["subgridurl"] = "index_detail.php";
// $opt["readonly"] = true; 

// grouping
$opt["grouping"] = true;
$opt["groupingView"] = array();
$opt["groupingView"]["groupField"] = array("company_name"); // specify column name to group listing
$opt["groupingView"]["groupColumnShow"] = array(true); // either show grouped column in list or not (default: true)
$opt["groupingView"]["groupText"] = array("<b>{0} - {1} Products(s)</b>"); // {0} is grouped value, {1} is count in group
$opt["groupingView"]["groupOrder"] = array("desc"); // show group in asc or desc order
$opt["groupingView"]["groupDataSorted"] = array(true); // show sorted data within group
$opt["groupingView"]["groupSummary"] = array(false); // work with summaryType, summaryTpl, see column: $col["name"] = "total"; (if false, set showSummaryOnHide to false)
$opt["groupingView"]["groupCollapse"] = false; // Turn true to show group collapse (default: false) 
$opt["groupingView"]["showSummaryOnHide"] = false; // show summary row even if group collapsed (hide) 

$opt["loadComplete"] = "function(){ load(); }";


// Define predefined search templates
$opt["search_options"]["tmplNames"] = array("Choco Products","Price > 10");
$opt["search_options"]["tmplFilters"] = array(
	array(
		"groupOp" => "AND",
		"rules" => array (
						array("field"=>"product_name", "op"=>"cn", "data"=>"Choc")
						)
		),
		array(
			"groupOp" => "AND",
			"rules" => array (
							array("field"=>"unit_price", "op"=>"gt", "data"=>"10"),
							array("field"=>"quantity_per_unit", "op"=>"cn", "data"=>"box"),		
							)
		)	
);

$g->set_options($opt);

$g->table = "products";
$g->select_command = "select p.*,s.company_name, category_name from products p
			inner join suppliers s on s.supplier_id = p.supplier_id
			inner join categories c on c.category_id = p.category_id
			";

$cols = array();

$col = array();
$col["title"] = "Product Id";
$col["name"] = "product_id";
$col["width"] = "100";
$col["editable"] = true;
$col["search"] = true;
$col["hidden"] = true;
$cols[] = $col;

$col = array();
$col["title"] = "Image";
$col["name"] = "product_image";
$col["width"] = "20";
$col["editable"] = false;
$col["icon"] = "image";
$col["search"] = false;
$col["sortable"] = false;
$col["template"] = "<div style='background-image: url(../../assets/img/products/{product_id}.jpg); max-width:100px; max-height:100px; width:100%; height: 100%; background-position-y: center;' />";
$cols[] = $col;

$col = array();
$col["title"] = "Product Name";
$col["name"] = "product_name";
$col["width"] = "50";
$col["editable"] = true;
$col["search"] = true;
$cols[] = $col;

$col = array();
$col["title"] = "Company Name";
$col["name"] = "company_name";
$col["width"] = "50";
$col["editable"] = false;
$col["search"] = true;
$col["edittype"] = "lookup";
$col["editoptions"] = array("table"=>"suppliers", "id"=>"company_name", "label"=>"company_name");
$cols[] = $col;

$col = array();
$col["title"] = "Supplier";
$col["name"] = "supplier_id";
$col["dbname"] = "s.supplier_id";
$col["width"] = "50";
$col["show"]["list"] = false;
$col["show"]["view"] = false;
$col["editable"] = true;
$col["search"] = true;
$col["edittype"] = "lookup";
$col["editoptions"] = array("table"=>"suppliers", "id"=>"supplier_id", "label"=>"company_name");
$cols[] = $col;

$col = array();
$col["title"] = "Category Name";
$col["name"] = "category_name";
$col["width"] = "50";
$col["editable"] = false;
$col["search"] = true;
$col["edittype"] = "lookup";
$col["editoptions"] = array("table"=>"categories", "id"=>"category_name", "label"=>"category_name");
$cols[] = $col;

$col = array();
$col["title"] = "Category";
$col["name"] = "category_id";
$col["dbname"] = "c.category_id";
$col["width"] = "30";
$col["show"]["list"] = false;
$col["show"]["view"] = false;
$col["editable"] = true;
$col["search"] = true;
$col["edittype"] = "lookup";
$col["editoptions"] = array("table"=>"categories", "id"=>"category_id", "label"=>"category_name");
$cols[] = $col;

$col = array();
$col["title"] = "Quantity / Unit";
$col["name"] = "quantity_per_unit";
$col["width"] = "50";
$col["editable"] = true;
$col["search"] = true;
$col["sanitize"] = false;
$cols[] = $col;

$col = array();
$col["title"] = "Unit Price";
$col["name"] = "unit_price";
$col["formatter"] = "currency";
$col["width"] = "30";
$col["align"] = "right";
$col["firstsortorder"] = "desc";
$col["editable"] = true;
$col["search"] = true;
$cols[] = $col;

$col = array();
$col["title"] = "# in Stock";
$col["name"] = "units_in_stock";
$col["formatter"] = "integer";
$col["width"] = "30";
$col["editable"] = true;
$col["search"] = true;
$cols[] = $col;

$col = array();
$col["title"] = "Reorder";
$col["name"] = "reorder_level";
$col["formatter"] = "integer";
$col["width"] = "30";
$col["editable"] = true;
$col["search"] = true;
$cols[] = $col;

$g->set_columns($cols);

$f = array();
$f["column"] = "category_id";
$f["target"] = "category_name";
$f["op"] = "=";
$f["value"] = "1";
$f["cellcss"] = "'color':'#8b86ff','font-weight':'bold'"; 
$f_conditions[] = $f;

$f = array();
$f["column"] = "category_id";
$f["target"] = "category_name";
$f["op"] = "=";
$f["value"] = "2";
$f["cellcss"] = "'color':'#20c933','font-weight':'bold'"; 
$f_conditions[] = $f;

$f = array();
$f["column"] = "category_id";
$f["target"] = "category_name";
$f["op"] = "=";
$f["value"] = "3";
$f["cellcss"] = "'color':'#20c933','font-weight':'bold'"; 
$f_conditions[] = $f;

$f = array();
$f["column"] = "category_id";
$f["target"] = "category_name";
$f["op"] = "=";
$f["value"] = "4";
$f["cellcss"] = "'color':'#f82b60','font-weight':'bold'"; 
$f_conditions[] = $f;

$f = array();
$f["column"] = "category_id";
$f["target"] = "category_name";
$f["op"] = "=";
$f["value"] = "5";
$f["cellcss"] = "'color':'#f82b60','font-weight':'bold'"; 
$f_conditions[] = $f;

$f = array();
$f["column"] = "category_id";
$f["target"] = "category_name";
$f["op"] = "=";
$f["value"] = "6";
$f["cellcss"] = "'color':'#20d9d2','font-weight':'bold'"; 
$f_conditions[] = $f;

$f = array();
$f["column"] = "category_id";
$f["target"] = "category_name";
$f["op"] = "=";
$f["value"] = "7";
$f["cellcss"] = "'color':'#ff6f2c','font-weight':'bold'"; 
$f_conditions[] = $f;

$f = array();
$f["column"] = "category_id";
$f["target"] = "category_name";
$f["op"] = "=";
$f["value"] = "8";
$f["cellcss"] = "'color':'#ff6f2c','font-weight':'bold'"; 
$f_conditions[] = $f;

$f = array();
$f["column"] = "units_in_stock";
$f["op"] = "<";
$f["value"] = "{reorder_level}";
$f["cellcss"] = "'background-color':'#ff851b','color':'white','fontWeight':'bold','opacity':0.4"; 
$f_conditions[] = $f;

$f = array();
$f["column"] = "unit_price";
$f["op"] = "<";
$f["value"] = "20";
$f["cellcss"] = "'background-color':'#c0e8ca','color':'green','fontWeight':'bold','opacity':0.4"; 
$f_conditions[] = $f;

$g->set_conditional_css($f_conditions);

$g->set_actions(array(	
						"add"=>true, // allow/disallow add
						"edit"=>true, // allow/disallow edit
						"delete"=>true, // allow/disallow delete
						"export_pdf"=>true, // allow/disallow delete
						"showhidecolumns"=>true,
						"rowactions"=>true, // show/hide row wise edit/del/save option
						"autofilter" => true, // show/hide autofilter for search
						"search" => "group", // show/hide autofilter for search
					)
				);

$out = $g->render("list1");

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" media="screen" href="../../lib/js/themes/material/jquery-ui.custom.css" />
	<link rel="stylesheet" type="text/css" media="screen" href="../../lib/js/jqgrid/css/ui.jqgrid.css" />

	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.0.1/jquery-migrate.min.js"></script>

	<script src="../../lib/js/jqgrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
	<script src="../../lib/js/jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
	<script src="../../lib/js/themes/jquery-ui.custom.min.js" type="text/javascript"></script>
	
	<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>	
	<link href="https://gitcdn.xyz/repo/wenzhixin/multiple-select/master/multiple-select.css" rel="stylesheet" />
	<script src="https://gitcdn.xyz/repo/wenzhixin/multiple-select/master/multiple-select.js"></script>	

</head>
<body>
	<div>
	<?php echo $out?>
	</div>
	
	<script>
	$.jgrid.nav.addtext = "Add";
	$.jgrid.nav.edittext = "Edit";
	// $.jgrid.nav.deltext = "Delete";
	// $.jgrid.nav.viewtext = "View";

	function load()
	{
	}
	</script>
	
	<style>
	.ui-priority-secondary
	{
		background-color: #f5f5f5;
		opacity: 1 !important;
	}
	
	#trv_product_image div
	{
		width: 136px;
		height: 111px;
		position: absolute;
		right: 20px;
		background-repeat: no-repeat;
		opacity: 0.8;
	}
	</style>
</body>
</html>