JSFiddle - React, Tailwind, and code Playground

by kranthi2210

HTML

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css">
<script src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script>
<div id="example1"></div>
<div id="example2"></div>

JavaScript

var
            container = document.getElementById('example1'),
            hot = new Handsontable(container, {
                //data: getCarData(),
                data: [], 
                Height:'Auto',
                dataSchema: {'Name':null,'ID':null,'Color':null},
                colHeaders: ['Name','ID','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: [], 
                dataSchema: {'Name':null,'ID':null,'Color':null},
                colHeaders: ['Name','ID','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: 'Item'
                 },
                  {
                    data: 'ID'
                 },
                  {
                    data: 'Color',
                    type: 'dropdown',
                    source:["yellow", "red", "orange", "green", "blue", "gray", "black", "white"]
                 }
                 ]
                 
            }