JSFiddle - React, Tailwind, and code Playground

by kranthi2210

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.js"></script>
<script src="http://mydea.github.io/handsontable-chosen-editor/handsontable-chosen-editor.js"></script>
<div id="example1"></div>
<div  id="example2"></div>

JavaScript

var
            container = document.getElementById('example1'),
            hot = new Handsontable(container, {
                //data: getCarData(),
                data: [], // for Inserting values first time
                dataSchema: {'Brand':null, 'Color':null},
                colHeaders: ['Brand','Color'],
                rowHeaders: true,
                columnSorting: true,
                minSpareRows: 1,
                contextMenu: true,
                search:true,
                fillHandle: true, 
                dropdownMenu: true,
                 filters: true,
                licenseKey: 'non-commercial-and-evaluation',
                columns: getColumns()
                });
                
                
                var
            container2 = document.getElementById('example2'),
            hot2 = new Handsontable(container2, {
                //data: getCarData(),
                data: [], // for Inserting values first time
                dataSchema: {'Brand':null, 'Color':null},
                colHeaders: ['Brand','Color'],
                rowHeaders: true,
                columnSorting: true,
                minSpareRows: 1,
                contextMenu: true,
                search:true,
                fillHandle: true, 
                dropdownMenu: true,
                 filters: true,
                licenseKey: 'non-commercial-and-evaluation',
                columns: getColumns()
                });
                
                
               
                
                function getColumns(){
                return[
                {
                    data: 'Brand',
                    renderer: customDropdownRenderer,
                    editor: "chosen",
                    width: 200,
                    allowEmpty: false,
                    chosenOptions: {
                        multiple: true,
                        data: [
                            {
                                id: "1",
    ...