JSFiddle - React, Tailwind, and code Playground

by sleepy_loco

HTML

<?php $qs = '';
if (isset($_SERVER['QUERY_STRING'])) {
	$qs = substr(str_replace('%20', ' ', $_SERVER['QUERY_STRING']), 7);
} ?>
<!doctype html>
<html>

<?php
include ('partials/head.php');
include('partials/banner.php');

?>
<body class="dataTables">
	<div class="container" class="w-full">
		<input type="text" name="qs" id="qs" hidden="hidden" value="<?= $qs ?>">
		<h1 class="font-sans text-color-black whitespace-nowrap">
			DataTables Editor <span>Linked Docs</span> <span class="mx-20 underline underline-color-blue"><a href="/index.php">Home</a></span>
		</h1>
		<?php
		if (str_contains($qs, 'Class Price') && !str_contains($qs, 'Release')) {
			include('partials/searchtip.php');
		};
		?>

		<table cellpadding="0" cellspacing="0" border="0" class="display" id="linkeddocs" width="100%">
			<thead>
				<tr>
					<th>Left Menu Header</th>
					<th>Left Menu Content</th>
					<th>Main Content</th>
					<th>Main Content Heading</th>
					<th>Content Heading</th>
					<th>Root Folder</th>
					<th>Sub Folder one</th>
					<th>Sub Folder Two</th>
					<th>File Name</th>
					<th>year</th>
					<th>Month</th>
					<th>Link</th>
					<th>Year Group</th>
					<th>Hide Content</th>
				</tr>
			</thead>
		</table>

	</div>
</body>

</html>

CSS

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

    <!-- <title>DataTables Editor - home</title> -->

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jqc-1.12.4/moment-2.29.4/dt-1.13.8/b-2.4.2/date-1.5.1/sl-1.7.0/datatables.min.css">
    <link rel="stylesheet" type="text/css" href="css/generator-base.css">
    <link rel="stylesheet" type="text/css" href="css/editor.dataTables.min.css">

    <script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/v/dt/jqc-1.12.4/moment-2.29.4/dt-1.13.8/b-2.4.2/date-1.5.1/sl-1.7.0/datatables.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/dataTables.editor.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/table.home.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

JavaScript

/*
 * Editor client script for DB table linkeddocs
 * Created by http://editor.datatables.net/generator
 */

(function($){

	$(document).ready(function() {
		var selector = document.querySelector("#qs").value;
		var editor = new DataTable.Editor( {
			ajax: 'php/table.linkeddocs.php',
			table: '#linkeddocs',
			fields: [
				{
					"label": "Left Menu Header:",
					"name": "lmh"
				},
				{
					"label": "Left Menu Content:",
					"name": "lmc"
				},
				{
					"label": "Main Content:",
					"name": "mc"
				},
				{
					"label": "Main Content Heading:",
					"name": "mch"
				},
				{
					"label": "Content Heading:",
					"name": "ch"
				},
				{
					"label": "Root Folder:",
					"name": "rf"
				},
				{
					"label": "Sub Folder one:",
					"name": "sf1"
				},
				{
					"label": "Sub Folder Two:",
					"name": "sf2"
				},
				{
					"label": "File Name:",
					"name": "fn"
				},
				{
					"label": "year:",
					"name": "year"
				},
				{
					"label": "Month:",
					"name": "month"
				},
				{
					"label": "Link:",
					"name": "link"
				},
				{
					"label": "Year Group:",
					"name": "yeargroup"
				},
				{
					"label": "Hide Content:",
					"name": "hc"
				}
			]
		} );
	
		var table = new DataTable('#linkeddocs', {
			dom: 'Bfrtip',
			ajax: 'php/table.linkeddocs.php',
			columns: [
				{
					"data": "lmh"
				},
				{
					"data": "lmc"
				},
				{
					"data": "mc"
				},
				{
					"data": "mch"
				},
				{
					"data": "ch"
				},
				{
					"data": "rf"
				},
				{
					"data": "sf1"
				},
				{
					"data": "sf2"
				},
				{
					"data": "fn"
				},
				{
					"data": "year"
				},
				{
					"data": "month"
				},
				{
					"data": "link"
				},
				{
					"data": "yeargroup"
				},
				{
					"data": "hc"
				}
			],
			select: true,
			lengthChange: false,
			buttons: [
				{ extend: 'create', editor: editor },
				{ extend: 'edit',   editor: editor },
				{ extend: 'remove', editor: editor...