JSFiddle - React, Tailwind, and code Playground

by amitava82

HTML

<html>
<head>

<script>
 $(document).ready(function() {
   // do stuff when DOM is ready
   $('#dataGrid tr:first td').each(function(i, e){
       
    //$('#customCol').append($(e).attr('class'));
    $('.ulDropdown').append('<li><input type="checkbox" />' + $(e).attr('class') + '</li>');
   });
    
     $('.colSelection').change(function(){
         var col = $(this +':selected').val();
         $('.'+col).hide();
     });

    $('.colSelector').hide();
    $('.toggle').click(function(e){
        
        $('.colSelector').toggle();
    });
    
    $('.applyColFilter').click(function(){
        $('.colSelector').hide();
        
        
    });
    
 });    
</script>

<style>

ul{
    list-style-type:none;
    padding: 0px;
}

li{
margin: 0;
}

.colSelector {
    width: 150px;
    height: 132px;
    border: solid black 1px;
    background-color: #EEE;
    box-shadow: 0 4px 10px #8b8b8b;
    position: absolute;
    left: 286px;
    top: 25px;

}

.colList {
    padding: .2em;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100px;
    border-bottom: solid black 1px;
    color: #69F;
    
}

.toggle{
    background-color: #1E6D74;
    color: white;
    width: 150px;
    padding: 3 8px;
    border: 1px solid black;
    margin-bottom: 3px;
    display:inline;
}
</style>

</head>
<body>

<table id="dataGrid" border="1" bordercolor="" style="background-color:" width="400" cellpadding="0" cellspacing="0" class="ui-widget">
    <tr>
        <td class="col1">column 1</td>
        <td class="col2">column 2</td>
        <td class="col3">column 3</td>
    </tr>
    <tr>
        <td class="col1">column 1</td>
        <td class="col2">column 2</td>
        <td class="col3">column 3</td>
    </tr>
    <tr>
        <td class="col1">column 1</td>
        <td class="col2">column 2</td>
        <td class="col3">column 3</td>
    </tr>
</table>
<br />
<div style="position: relative;">
<div>
<div class="toggle"><a href="#" >button one</a></div>
<div class="toggle"><a...