JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://raw.githubusercontent.com/selectize/selectize.js/master/dist/css/selectize.css">
<link rel="stylesheet" href="https://selectize.github.io/selectize.js/css/styles.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://editor.datatables.net/extensions/Editor/css/editor.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<script src="https://secure.sms4parents.com/dataTables.editor.min.js"></script>
<script src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script>
<script src="https://cdn.datatables.net/keytable/2.5.3/js/dataTables.keyTable.min.js"></script>
<script src="https://selectize.github.io/selectize.js/js/selectize.js"></script>
<html lang="en">
<head>
	
	<style class="init">
	
	</style>
	

</head>
<body class="editor wide comments example">
	<a name="top" id="top"></a>
	<div class="fw-background">
		<div></div>
	</div>
	<div class="fw-container">
		
		
		<div class="fw-body">
			<div class="content">				
				
				<table id="example" class="display" cellspacing="0" width="100%" border="1">
					<thead>
						<tr>
							<th>Product Name</th>
							<th>Field 1</th>
							<th>Field 2</th>
							<th>Calculation</th>
						</tr>
					</thead>                    	
                    <tbody>
                    	<tr id="row-1" role="row">
							<td></td>
							<td>1</td>
							<td>3</td>
							<td>5</td>
						</tr>
                        <tr id="row-2" role="row">
							<td></td>
							<td>2</td>
							<td>4</td>
							<td>7</td>
						</tr>
                    </tbody>
				</table>
				
			</div>
		</div>
	</div>
  <script>
  


  </script>
  </body>
</html>

CSS

/**
 * selectize.css (v0.12.6)
 * Copyright (c) 2013–2015 Brian Reavis & contributors
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
 * file except in compliance with the License. You may obtain a copy of the License at:
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
 * ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 *
 * @author Brian Reavis <[email protected]>
 */

.selectize-control.plugin-drag_drop.multi > .selectize-input > div.ui-sortable-placeholder {
  visibility: visible !important;
  background: #f2f2f2 !important;
  background: rgba(0, 0, 0, 0.06) !important;
  border: 0 none !important;
  -webkit-box-shadow: inset 0 0 12px 4px #fff;
  box-shadow: inset 0 0 12px 4px #fff;
}
.selectize-control.plugin-drag_drop .ui-sortable-placeholder::after {
  content: '!';
  visibility: hidden;
}
.selectize-control.plugin-drag_drop .ui-sortable-helper {
  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.selectize-dropdown-header {
  position: relative;
  padding: 5px 8px;
  border-bottom: 1px solid #d0d0d0;
  background: #f8f8f8;
  -webkit-border-radius: 3px 3px 0 0;
  -moz-border-radius: 3px 3px 0 0;
  border-radius: 3px 3px 0 0;
}
.selectize-dropdown-header-close {
  position: absolute;
  right: 8px;
  top: 50%;
  color: #303030;
  opacity: 0.4;
  margin-top: -12px;
  line-height: 20px;
  font-size: 20px !important;
}
.selectize-dropdown-header-close:hover {
  color: #000000;
}
.selectize-dropdown.plugin-optgroup_columns .optgroup {
  border-right: 1px solid #f2f2f2;
  border-top: 0 none;
  float: left;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing:...

JavaScript

var products_list =  [{"label":"Select","value":""},{"label":"P1","value":"1"},{"label":"P2","value":"2"},{"label":"P3","value":"3"},{"label":"P4","value":"4"},{"label":"P5","value":"5"},{"label":"P6","value":"6"},{"label":"P7","value":"7"},{"label":"P8","value":"8"},{"label":"P9","value":"9"},{"label":"P10","value":"10"}]; 


(function (factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD
        define(['jquery', 'datatables', 'datatables-editor'], factory);
    }
    else if (typeof exports === 'object') {
        // Node / CommonJS
        module.exports = function ($, dt) {
            if (!$) { $ = require('jquery'); }
            factory($, dt || $.fn.dataTable || require('datatables'));
        };
    }
    else if (jQuery) {
        // Browser standard
        factory(jQuery, jQuery.fn.dataTable);
    }
}
(function ($, DataTable) {
    'use strict';
 
    if (!DataTable.ext.editorFields) {
        DataTable.ext.editorFields = {};
    }
 
    var _fieldTypes = DataTable.Editor ?
        DataTable.Editor.fieldTypes :
        DataTable.ext.editorFields;
 
    _fieldTypes.selectize = {
		_addOptions: function ( conf, options ) {
			var selectize = conf._selectize;
	
			selectize.clearOptions();
			selectize.addOption( options );
			selectize.refreshOptions(false);
		},
	 
		create: function ( conf ) {
			var container = $('<div/>');
			conf._input = $('<select/>')
					.attr( $.extend( {
						id: conf.id
					}, conf.attr || {} ) )
				.appendTo( container );
	 
			conf._input.selectize( $.extend( {
				valueField: 'value',
				labelField: 'label',
				dropdownParent: 'body'
			}, conf.opts ) );
	
			conf._selectize = conf._input[0].selectize;
	
			if ( conf.options || conf.ipOpts ) {
				_fieldTypes.selectize._addOptions( conf, conf.options || conf.ipOpts );
			}
	 
			return container[0];
		},
	 
		get: function ( conf ) {
			return conf._selectize.getValue();
		},
	 
		set: function ( conf, val ) {
			return...