JSFiddle - React, Tailwind, and code Playground

by Mottie

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.1/dat.gui.min.js"></script>

JavaScript

var arraysOfObject = [],
  system = {},
  chunk = 10,
  size = 92;

for (var i = 0; i < size; i++) {
  arraysOfObject.push("Number " + i);
}

var sets = [];
var index = 0;
for (i = 0; i < size; i += chunk) {
  sets.push(arraysOfObject.slice(i, i + chunk));
  system[index + 1] = index++;
}

var gui = new dat.GUI();
var guiData = function() {
  this.message = "Dat.Gui menu";
  this.system = 0;
  this.Sets = 0;
};

var data = new guiData();

gui.add(data, 'message', 'Dat.Gui Menu!');
gui
	.add(data, 'system', system)
	.name('system #')
  .onChange(function(value) {
  	updateSets(value);
	});
gui.add(data, 'Sets', sets[0]).onChange();

function updateSets(id) {
  var controller = gui.__controllers[2];
  controller.remove();
  gui.add(data, 'Sets', sets[id]).onChange();

  data.Sets = 0;
  gui.__controllers[2].updateDisplay();
}