JSFiddle - React, Tailwind, and code Playground

by octavient

HTML

here
<table id="grd_attachment" class="grd_attachment"></table>
	<div id="pgr_attachment" class="pgr_attachment"></div>

JavaScript

attachments.grid.colModel = [
	{ name: 'DocumentID', index: 'DocumentID', hidden: true },
	{ name: 'SessionID', index: 'SessionID', hidden: true },
	{ name: 'AssetID', index: 'AssetID', hidden: true },
	{ name: 'AssetName', index: 'AssetName'/*, stype: 'select', searchoptions: { sopt: ['eq'], value: 'All:All' }  */},
	{ name: 'DocumentTypeName', index: 'DocumentTypeName', search: true, stype: 'select', searchoptions: { sopt: ['eq'], value: ':All' } },
	{ name: 'DocumentTitle', index: 'DocumentTitle' },
	{ name: 'CreateDate', index: 'CreateDate', hidden:true },
	{ name: 'DocumentAuthor', index: 'DocumentAuthor', hidden:true },
	{ name: 'friendly_file_size', index: 'friendly_file_size', hidden: true },
	{ name: 'FileType', index: 'FileType', hidden: true },
	{ name: 'security_designation', index: 'security_designation'/*, stype: 'select', searchoptions: { sopt: ['eq'], value: 'All:All' } */},
	{ name: 'DocumentEffectiveDate', index: 'DocumentEffectiveDate', search: false, sorttype:'date' },
	{ name: 'document_guid', index: 'document_guid', hidden:true }
];
attachments.grid.colNames = ['ID','SessionID','AssetID','System','Type','Title','Uploaded On','Uploaded By','Size','File Type','Security', 'Effective Date', 'GUID'];

$("#grd_attachment").jqGrid({
		url: 'http://cdn.octavient.net/jsfiddle/json_nested_root/data.aspx',
		datatype: "json",
		jsonReader: {root: 'data.rows', page: 'data.page', total: 'data.total', records: 'data.records', repeatitems: false, id: '0' },
		loadonce: true,
		height: '480', autowidth: true, altRows: true, altclass: 'altrowcolor', shrinkToFit: true,
		rowNum: 1000,
		gridview: true,
		pager: '#pgr_attachment',
		viewrecords: true,
		ignoreCase: true,
		sortname: 'DocumentEffectiveDate',
		sortorder: 'desc',
		colNames: attachments.grid.colNames,
		colModel: attachments.grid.colModel
});