JSFiddle - React, Tailwind, and code Playground

by Zach Saeed

HTML

<head>
  <!-- All pre-minified also being imported:
  
  <?xml version="1.0" encoding="UTF-8"?>
<minify>
	<css>
		<file>sources/jquery-ui-1.8.7.custom</file>
		<file>sources/ios-checkboxes/jquery.ios-checkboxes</file>
		<file>sources/ui.jqgrid.custom</file>
		<file>sources/ui.multiselect</file>
		<file>sources/ribbon</file>
		<file>sources/cake.custom</file>
		<file>sources/jquery.multiselect</file>
		<file>sources/dropzone</file>
		<file>sources/jquery.qtip.min</file>
		<file>sources/jquery-ui-timepicker-addon</file>
		<file>sources/jquery.modal</file>
        <file>sources/qualitative_rankscore</file>
	</css>
	<js>
		<file>sources/jquery.1.7.1</file>
		<file>sources/jquery.ba-outside-events</file>
		<file>sources/jquery-ui.1.11.2.min</file>
		<file>sources/jquery.ios-checkboxes</file>
		<file>sources/i18n/grid.locale-en</file>
		<file>sources/ui.multiselect</file>
		<file>sources/jquery.jqGrid.4.5.0.min</file>
		<file>sources/jquery-ui-timepicker-addon</file>
		<file>sources/jquery.multiselectdropdown.min</file>
		<file>sources/jquery.floatThead.min</file>
		<file>sources/jquery.zoom-min</file>
		<file>sources/jquery.jqGrid.treeSelect</file>
		<file>sources/ribbon</file>
		<file>sources/dropzone.min</file>
		<file>sources/imp.common</file>
		<file>sources/imp.tender_process</file>
		<file>sources/imp.database_browser</file>
		<file>sources/assetClassTable</file>
		<file>sources/jquery.qtip.min</file>
		<file>sources/jquery.fileDownload</file>
		<file>sources/jquery.highlight</file>
	</js>
</minify>
  -->

  <link rel="stylesheet" type="text/css" href="/imp-int/css/datatables/1.10.13/css/jquery.dataTables.min.css" />
  <link rel="stylesheet" type="text/css" href="/imp-int/css/datatables/fixedcolumns/3.2.2/css/fixedColumns.dataTables.min.css" />
  <link rel="stylesheet" type="text/css" href="/imp-int/css/datatables/buttons/1.2.3/css/buttons.dataTables.min.css" />
  <link rel="stylesheet" type="text/css"...

JavaScript

var editor; // use a global for the submit and return data rendering in the examples

$(document).ready(function () {
	// Setup - add a text input to each footer cell https://datatables.net/examples/api/multi_filter.html
	$("#example tfoot th").each(function () {
		var title = $(this).text();
		$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
	} );

	editor = new $.fn.dataTable.Editor( {
		ajax: "/imp-int/QualitativeAnalysis/updateField/13/129/129",
		//ajax: "/imp-int/QualitativeAnalysis/getJSONData/13/129/129",
		table: "#example",
		//idSrc: "TRACK_ID",
		//legacyAjax: true,
		fields: [
			{
				label: "Do you offer a UCITS III fund?:",
				name: "UCITS_III",
				type: "textarea"
			},
			{
				label: "Total assets in the proposed pooled fund (EURm):",
				name: "TOTAL_ASSETS_FUND",
				type: "textarea"
			},
			{
				label: "al:",
				name: "PERCENT_SUBINVESTMENT_GRADE",
				type: "textarea"
			},
			{
				label: "Minimum Size:",
				name: "MINIMU_SIZE",
				type: "textarea"
			},
			{
				label: "Benchmark driven or comparison only?:",
				name: "BENCHMARK_DRIVEN",
				type: "textarea"
			},
			{
				label: "f:",
				name: "NO_MULTI_MGR_OR_PORT_ALPHA",
				type: "textarea"
			},
			{
				label: "Score:",
				name: "SCORE",
				type: "text"
			}, 
			{
				label: "Comments:",
				name: "COMMENT",
				type: "textarea"
			}
		]
	} );

	table = $("#example").DataTable( {
		//Fixed column https://editor.datatables.net/examples/inline-editing/fixedcolumns.html
		fixedColumns: {
			leftColumns: 2
		},
		scrollX: true,//to get a scrollbar at the bottom

		dom: "Bfrtip",
		//Table style
		"scrollY": "300px",
		"paging": false,
		//Responsive table https://datatables.net/blog/2014-07-16
		responsive: false, //set to false so we get a scrollbar at the bottom if table is too wide
		//Basic column visibility toggle button: https://datatables.net/extensions/buttons/examples/column_visibility/simple.html
		ajax:...